[Android Studio] LinearLayout 배치, 회원 정보 화면 구성

티스토리 뷰

학업/모바일프로그래밍

[Android Studio] LinearLayout 배치, 회원 정보 화면 구성

그뇨 2024. 11. 30. 01:24

LinearLayout: 하위 뷰 공간 할당

MainActivity.java

package com.example.test;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

1. LinearLayout 개요

activity_main.xml

LinearLayout: 내부 요소들을 선형(수직/수평 방향) 배치하는 레이아웃
android:layout_width="match_parent": 레이아웃의 가로 폭 설정, 부모의 크기만큼 설정
android:layout_height="wrap_content": 레이아웃의 세로 높이 설정: 현재 뷰의 콘텐츠를 감쌀 만큼의 크기로 설정
android:background="# FFAB15": 뷰의 배경색을 RED 값(FF), GREEN 값(AB), BLUE 값(15)에 해당하는 색으로 설정
android:orientation="vertical": 자식 뷰들을 수직 방향으로 배치
android:orientation="horizontal": 자식 뷰들을 수평 방향으로 배치

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F0F0"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFAB15"
        android:text=" TextView 1 "/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF00FF"
        android:text=" TextView 2 "/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:text=" TextView 3 "/>
</LinearLayout>

2. LinearLayout 수직 배치 방법

동작 개요

하위 뷰 공간에 할당 가중치 설정하여 화면 전체적으로 수직 배치

activity_main.xml

android:layout_weight="1": 하위 뷰의 공간 할당 가중치를 1로 설정(공간 할당 가중치의 기본 값은 0)
android:layout_height="0dp"로 설정
android:layout_weight에 가중치 값 설정
아래 화면의 하위 뷰들에 설정된 layout_weight 값들은 각각1, 2, 3
즉, TextView 1, TextView 2, TextView 3에는 각각 1/6, 2/6, 3/6의 수직 방향 공간 할당

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F0F0"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FFAB15"
        android:text=" TextView 1 " />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#FF00FF"
        android:text=" TextView 2 " />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:background="#00FFFF"
        android:text=" TextView 3 " />
</LinearLayout>

3. LinearLayout 수직 배치 방법 2

activity_main.xml

android:layout_height="0dp"로 설정
android:layout_weight에 가중치 값 설정
TextView 2에만 layout_weight 설정
TextView1과 TextView3의 필요 영역을 제외한 나머지 전체 세로 방향 공간이 TextView 2에 할당됨

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F0F0"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFAB15"
        android:text=" TextView 1 "/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF00FF"
        android:text=" TextView 2 "/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:text=" TextView 3 "/>
</LinearLayout>

4. LinearLayout 수평 배치 방법

activity_main.xml

android:layout_width="0dp"로 설정
android:layout_weight에 가중치 값 설정
아래 화면의 하위 뷰들에 설정된 layout_weight 값들은 각각 1, 2, 3
즉, TextView 1, TextView 2, TextView 3에는 각각 1/6, 2/6, 3/6의 가로 방향 공간 할당

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0F0F0"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FFAB15"
        android:text="View1" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#FF00FF"
        android:text="View2" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:background="#00FFFF"
        android:text="View3" />
</LinearLayout>

gravity

MainActivity.java

package com.example.test;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

android:gravity="center": 뷰 내부 요소의 정렬 방식 설정
입력 가능한 gravity 값: center, left, right, top, bottom, center_horizontal, center_vertical 등

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#DEDEDE" android:orientation="vertical">
    <TextView
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#FFAB15" android:gravity="center"
        android:text=" center "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#FF00FF" android:gravity="right"
        android:text=" right "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#00FFFF" android:gravity="left"
        android:text=" left "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#FFFF00"
        android:text=" 설정 없음 "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:background="#BB00BB"
        android:gravity="top"
        android:text=" top "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:background="#00BBBB"
        android:gravity="bottom"
        android:text=" bottom "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:background="#BBBB00"
        android:gravity="top|center"
        android:text=" top|center "/>
    <TextView
        android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:background="#BBBBBB"
        android:gravity="right|center"
        android:text=" right|center "/>
</LinearLayout>

layout_gravity

MainActivity.java

package com.example.test;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

android:layout_gravity="center" : 뷰를 포함하는 레이아웃 관점에서 뷰의 정렬 방식 설정
입력 가능한 layout_gravity 값: center, left, right, top, bottom, center_horizontal, center_vertical 등

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DEDEDE"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFAB15"
        android:layout_gravity="center"
        android:text=" center " />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF00FF"
        android:layout_gravity="right"
        android:text=" right " />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:layout_gravity="left"
        android:text=" left " />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFF00"
        android:text=" 설정 없음 " />
</LinearLayout>

회원 정보 화면 구성

MainActivity.java

package com.example.test;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

android:padding="30dp": 화면에 내용(content)과 테두리(border) 사이의 간격인 패딩(padding) 영역의 크기 설정
android:inputType="textPassword": 비밀번호 입력 유형으로 동작
android:inputType="textEmailAddress": 전자 메일 주소 입력 유형으로 동작
inputType 예시: number, phone, textAutoComplete, textPassword, textEmailAddress 등

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"
    android:orientation="vertical">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="회원 이름"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="패스워드"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="회원 email"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:hint="회원 정보"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="회원 등록"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="메인"/>
    </LinearLayout>
</LinearLayout>

'학업 > 모바일프로그래밍' 카테고리의 다른 글

[Android Studio] View, 연료 유형 선택 폼, 주문 내역 작성 폼 화면 구성 (0)	2024.12.14
[Android Studio] xml로 화면에 동서남북 출력하기 (0)	2024.11.30
[Android Studio] Android의 View 계층 구조, LinearLayout 수직/수평 배치 (0)	2024.11.12
[Android Studio] 섭씨 온도 변환기 구현 (0)	2024.10.28
[Android Studio] 입력한 텍스트의 길이 계산기 구현 (0)	2024.10.28

공지사항

링크

Gnyo: github

GNYO

티스토리 뷰

[Android Studio] LinearLayout 배치, 회원 정보 화면 구성

LinearLayout: 하위 뷰 공간 할당

1. LinearLayout 개요

2. LinearLayout 수직 배치 방법

3. LinearLayout 수직 배치 방법 2

4. LinearLayout 수평 배치 방법

gravity

layout_gravity

회원 정보 화면 구성

'학업 > 모바일프로그래밍' 카테고리의 다른 글

티스토리툴바