[Android] 안드로이드 : 레이아웃 (Layout) 만들기

1. 레이아웃 종류

레이아웃	설명
제약 레이아웃 (Constraint Layout)	- 제약 조건 기반 모델 - 제약 조건을 사용해 화면 구성  - 안드로이드 스튜디오에서 자동으로 설정하는 디폴트 레이아웃
리니어 레이아웃 (Linear Layout)	- 박스 모델  - 한쪽 방향으로 차례대로 뷰를 추가하며 화면 구성  - 뷰가 차지할 수 있는 사각형 영역 할당
상대 레이아웃 (Relative Layout)	- 규칙 기반 모델 - 부모 컨테이너나 다른 뷰와의 상대적 위치로 화면 구성 - 제약 레이아웃과 유사하나 기능이 더 적음
프레임 레이아웃 (Frame Layout)	- 싱글 모델  - 가장 상위에 있는 하나의 뷰 또는 뷰그룹만 보여줌  - 여러 개의 뷰가 들어가면 중첩해서 쌓음 - 여러 개의 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식  - 가장 단순하지만 자주 사용
테이블 레이아웃 (Table Layout)	- 격자(Grid) 모델  - 격자 모양의 배열을 사용해 화면 구성  - HTML에서 많이 사용하는 정렬 방식과 유사하지만 사용 빈도 낮음

※ 화면을 만들기 위해서는 xml 파일 1개 + java 파일 1개로 이루어져야 함

 

 

2. Constraint Layout

- 연결선이 반드시 필요 (연결한 곳과 margin 부여 가능) : 레이아웃 또는 다른 뷰와 연결

- 자석 아이콘 : 연결선을 자동으로 만들어주는 역할

Constraint Layout : 자석 아이콘

- 가이드라인 : 가이드라인에 버튼 등을 붙여서 정렬 가능

Constraint Layout 가이드라인

 

3. Linear Layout

- android:orientation 속성 필수

- layout_gravity : 레이아웃 내 뷰들의 정렬

- gravity : 뷰 (e.g. 버튼) 내 텍스트, 즉 선택한 뷰 안의 요소 정렬

- layout_weight : 남은 공간을 가중치만큼 차지함 (layout_width = 0dp 와 함께 사용)

 

 

4. Relative Layout

- 레이아웃에는 별도 속성 필요 없음

- 버튼 등 뷰 예시 : align 속성 필요

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="3dp"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="1dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="0dp"
        android:layout_above="@+id/button3"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Button" />
</RelativeLayout>

 

5. Frame Layout

- Constraint Layout 안에 Frame Layout 설정 가능 : Frame Layout의 dp 정해줘야 함

- drawable에 이미지 2개 추가 > Frame Layout 하위에 설정 > 버튼 클릭할 때마다 이미지 변경 되도록

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView2;

    int index = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.imageView);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v) {
        index += 1;
        if (index > 1) {
            index = 0;
        }

        if (index == 0) {
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.INVISIBLE);
        } else if (index == 1) {
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);
        }
    }
}