[Android 앱개발 입문] 레이아웃 (# 추가하기)

레이아웃

    : ViewGroup의 파생 클래스. 포함 된 View를 정렬하는 기능

 

1. Linear Layout : 컨테이너에 포함 된(자식) 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃

        - 가장 단순하고 직관적, 사용 빈도가 높음
        - LinearLayout의 자식으로 배치되는 View 위젯들은 한 방향(가로 또는 세로)로만 배치
        - 위젯의 크기(높이 또는 너비)와 관계없이 한 줄로만 배열
        - LinearLayout의 자식들은 중첩되지 않고, 지정한 방향으로 쌓이는 형태로 표시됨
        - LayoutWeight : 자식들이 배치될 때, 전체 영역 대비 비율의 개념으로 지정할 수 있는 가중치(weight)를 설정

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
    <LinearLayout
        ...
        android:layout_weight="1"  				//여기[1]와
        android:orientation="vertical"
        ...>
        <Button ...
            android:text="Button 1"/> />
        <Button
            ...
            android:text="Button 2" />
        <Button
            ...
            android:layout_weight="1" 			//얘가 나머지를 꽉 채우는 것
            android:text="Button 3"
            
        />
    </LinearLayout>
    <LinearLayout
        ...
        android:layout_weight="1"  				//여기[1] 때문에 1:1이 됨 
        android:orientation="horizontal"
        ...>
        <Button
            ...
            android:text="Button 4"/>
        <Button
            ...
            android:text="Button 5"/>
        <Button
            ...
            android:text="Button 6"/> 		//weight에 대한 속성을 주지 않아 동일한 사이즈
    </LinearLayout>
</LinearLayout>

        *주요 속성
        1) orientation : vertical(차일드를 위에서 아래로 수직으로 배열) / horizontal(차일드를 왼쪽에서 오른쪽으로 수평배열)

 

2. Relative Layout : 뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정해 배치하는 레이아웃

        - 자식 view 위젯들이 서로간의 상대적 배치 관계에 따라 화면에 표시될 위치가 결정되도록 만들어주는 Layout 클래스
            //ex. B를 A의 오른쪽에 배치 : B toRight Of A, D를 C의 아래쪽에 배치 : D below C
        - 부모 자체가 상대적 위치의 기준점으로 사용될 수도 있음
            // ex. A를 RelativeLayout의 왼쪽에 정렬 : alignParentLeft, B를 RelativeLayout의 가운데 정렬 : centerInParent
        - 자식들에 상대적인 배치 기준을 지정하지 않은 경우, RelativeLayout 내부에서 중첩되어 표시됨

        * 주요 속성
        1) 위젯끼리의 관계를 지정하는 속성 (anchor view의 id를 지정)

속성	설명
layout_alignBaseline	anchor view와 baseline을 맞춤
layout_alignBottom / _alignTop	anchor view와 아래쪽 / 위쪽 가장자리를 맞춤
layout_alignLeft / _alignRight	anchor view와 왼쪽 / 오른쪽 가장자리를 맞춤
layout_Above / _Below	anchor view의 위쪽 / 아래쪽에 배치
layout_toLeft / _toRight	anchor view의 왼쪽 / 오른쪽에 배치

        2) Parent와의 관계를 지정하는 속성

속성	설명
layout_centerHorizontal	수평 방향으로 컨테이너의 가운데 배치
layout_centerVertical	수직 방향으로 컨테이너의 가운데 배치
layout_centerInParent	??
layout_alignParentLeft / Right	컨테이너와 왼쪽 / 오른쪽 가장자리를 맞춤
layout_alignParentBottom / Top	컨테이너와 아래쪽 / 위쪽 가장자리를 맞춤

<RelativeLayout ...>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:id="@+id/button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/button1" 		//1번의 왼쪽으로
        android:text="Button 2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1" 			//1번의 아래로
        android:layout_alignParentRight="true"
        android:text="Button 3"/>
</RelativeLayout>

 

3. Table Layout : 표 형식으로 차일드를 배치하는 레이아웃

        - 자식 View 위젯들을 테이블(행과 열)로 나누어 표시하는 Layout 클래스

        - 표를 구성하는 행의 개수만큼 TableRow를 포함하고 TableRow는 각 행에 포함된 셀(view)를 포함함

        *주요 속성
        - stretchColumns : 늘릴 열을 지정 (인덱스는 0부터 시작됨)
            1) "*" : 모든 열을 늘여서 배치
            2) "1, 2" : 1열(왼쪽에서 2번째)과 2열(왼쪽에서 3번째)을 늘여서 배치

        - TableRow -> 정해진 규칙에 따라 크기가 결정되므로, layout_width / height를 지정할 필요 없음
                // layout_height 는 항상 wrap_content, layout_width 는 항상 match_parent

<TableLayout
    ...
    android:stretchColumns="0"
    ...>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 5"/>
    </TableRow>
    <TableRow
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 6"/>
    </TableRow>
</TableLayout>

 

4. Frame Layout : 컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃

        - 하나의 자식 view 위젯만 표시할 때 사용하는 Layout 클래스 (ex. 영상 띄우기 등)
        - FrameLayout에 자식으로 여러 View 위젯을 추가하면 겹쳐진 형태로 표시되고,
                가장 최근에 추가된 View 위젯이 가장 위에 표시됨

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#ff0000">
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="button 7"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="button 8"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="button 9"/>
</FrameLayout>

 

5. Constraint Layout : 제약 조건을 사용해 화면을 구성하는 방법

        - 복잡한 레이아웃을 단순한 계층구조를 이용해 표현할 수 있는 ViewGroup임

        - 형제 view들과의 관계를 정의해 레이아웃을 구성한다는 점에서 RelativeLayout과 유사
        - but 더 유연하고 다양한 기능을 제공

        (+) 자식 뷰간의 상호 관계 정의 가능 (RelativeLayout에선 불가능 -ex. 두 view를 위아래로 붙여 컨테이너 중앙에)
        (+) LinearLayout을 써야 했던 뷰 비율 조절도 가능
        (+) 뷰 계층을 간단히 할 수 있어 유지보수, 성능에서 장점

 

    1) 위젯의 크기 설정

        (1) 리사이즈 핸들 이용해 설정

            - 위젯 클릭 시 네 꼭짓점에 사각형의 핸들이 생김, 마우스로 드래그해 크기 설정
            - 드래그해서 크기 조절 시 우측 속성창의 Layout_width, Layout_height의 박스를 입력해 설정 가능

        (2) 직접 값을 입력해 설정

            - 위젯 클릭 수 우측 속성창에서 layout_width, layout_height를 입력해 크기 설정 가능
            - 수치 외에 wrap_content, match_parent도 사용 가능

    2) 위젯의 상대적인 정렬

        - 사이드핸들(위젯의 각 변의 가운데)을 이용해 위젯이 다른 위젯 또는 화면의 경계에 대해 어떻게 정렬될지 지정 가능
        - 좌우의 핸들 : 가로축에 있는 위젯들 간의 정렬 설정, 상하의 핸들 : 세로축 간의 정렬을 설정
        - 좌우 핸들을 상하 핸들에 연결할 수는 없음
        - 위젯, 화면의 각 경계, 임의로 추가된 수직, 수평의 가이드 라인과의 정렬 설정 가능
        - 드래그, 우측 속성창의 수치 등을 통해 설정 가능

    3) 위젯 내에 포함되어 있는 텍스트의 위치로 정렬기준 설정하기

        - 베이스라인 핸들
            : 위젯에 마우스를 가져가면 좌측 하단에 나타나는 ab 아이콘 클릭
                -> 위젯의 택스트 하단에 배이스 라인 핸들이 보임
                -> 베이스라인 핸들을 클릭해 다른 위젯의 텍스트에 연결 -> 연결된 위젯은 텍스트의 하단이 일치되도록 정렬됨

    4) constraint 툴바 사용하기

        (1) Autoconnect (말굽자석) : 켜두면 위젯을 배치할 때 자동으로 이웃한 위젯과 관계를 맺어줌

        (2) Clear All Constraints (연결 x 모양) : 모든 관계를 삭제함

        (3) Infer constraints (마법지팡이 모양) : 레이아웃 내 배치된 모든 위젯을 현재 위치를 기반으로 관계 맺어줌

        (4) Default Margins (8) : 위젯 값의 기본 마진 값을 지정

        (5) Guidelines (보조선) : 수평, 수직 가이드라인을 만들 수 있고, 위젯을 이 가이드라인을 기준으로 정렬 가능 

    5) 속성창

        (1) Margin (벽과 사각형 사이) : layout_width 가 match_constraint이면 여백으로 설정한 값 제외 전체를 위젯이 차지

        (2) Aspect Ratio (사각형 좌측 상단) : 클릭 시 위젯의 가로, 세로 비율을 지정할 수 있음

        (3) Wrap Content (>>>) : 부등호 3개로 된 모양은 wrap_content로 지정된 것

        (4) Any size (ww) : 톱니모양은 최대한의 너비를 차지하게 되고, match_constraint로 지정되어 있음

        (5) 점선 (...) : 아직 관계가 없음

        (6) Horizontal Bias (하단의 선과 원 속 숫자) : 위젯의 좌우측 위치 비율을 지정, 드래그해서 변경 가능