6. 뷰를 배치하는 레이아웃

 

 

 

 

1. 선형으로 배치 - LinearLayout

• LinearLayout: 뷰를 가로나 세로 방향으로 나열하는 레이아웃

1.  배치 규격

• 좌측 상단을 기준으로 선언한 순서대로 차곡차곡 보여주겠다.
• 수평으로 차곡차곡: android:orientation="horizontal"
• 수직으로 차곡차곡: android:orientation="vertical"

 

 

2. LinearLayout 중첩

• 레이아웃 클래스도 뷰이므로 다른 레이아웃 클래스에 포함할 수 있습니다. 

 

 

 

 

 

 

3. 정렬: gravity, layout_gravity 속성

• 레이아웃에 있는 속성들을 센터 정렬
• gravity: 정렬대상이 콘텐츠
• layout_gravity: 뷰 자체를 정렬하는 속성

 

 

 

 

 

4. 여백을 채우는 layout_weight 속성

• 뷰 여러개로 전체 여백 채우기
• layout_weight값을 각각1과 3으로 선언했다면 가로여백을 각각 1/4만큼, 3/4만큼 나누어 차지

 

 

 

깜짝 이미지 가져오기 및 기본 세팅

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 상대 위치로 배치- RelativeLayout

• 특정한 뷰를 기준(상대위치)으로 위치를 배치한다.
• 각각의 뷰들에 대해서 상대적으로 어떻게 배치할것인가에 대해 배치를 해야 한다.
• 귀찮지만 원하는 위치에 배치할 수 있다.
• 각각에 뷰에 대해서 위치에 대한 값들을 알아야 한다. id로 준다.
• 선언: @+id ( @는 어딘가 아이디를 다루는 파일에 아이디를 만들겠다는 의미 )
  • id는 내가 건들이지는 않지만 안드로이드가 관리
  • id는 반드시 다 다르게 설정해야 한다.
• 쓸때: @id

 

 

 

1. RelativeLayout 배치규칙: 상대 뷰의 위치를 기준으로 정렬하는 레이아웃

• android : layout_above: 기준뷰의 위쪽에 배치 
• android : layout_below: 기준뷰의 아래쪽에 배치 
• android : layout_toLeftOf: 기준뷰의 왼쪽에 배치 
• android : layout_toRightOf: 기준뷰의 오른쪽에 배치

 

 

 

2. 맞춤정렬하는align속성 : 상대 뷰의 어느쪽에 맞춰서 정렬할지를 정하는 속성

• android : layout_alignTop: 기준뷰와 위쪽을 맞춤 
• android : layout_alignBotom: 기준뷰와 아래쪽을 맞춤 
• android : layout_alignLeft: 기준뷰와 왼쪽을 맞춤 
• android : layout_alignRight: 기준뷰와 오른쪽을 맞춤 
• android :l ayout_alignBaseline: 기준뷰와 텍스트 기준선을 맞춤

 

 

 

3. 상위 레이아웃을 기준으로 맞춤 정렬하는 속성

• android : layout_alignParentTop: 부모의 위쪽에 맞춤
• android : layout_alignParentBotom: 부모의 아래쪽에 맞춤 
• android : layout_alignParentLeft: 부모의 왼쪽에 맞춤 
• android : layout_alignParentRight: 부모의 오른쪽에 맞춤 
• android : layout_centerHorizontal: 부모의 가로 방향중앙에 맞춤 
• android : layout_centerVertical: 부모의 세로 방향중앙에 맞춤 
• android : layout_centerInParent: 부모의 가로·세로중앙에 맞춤

 

3. 겹치서 배치 - FrameLayout

• 카드를 쌓듯이 뷰를 추가한 순서대로 위에 겹쳐서 계속 출력하는 레이아웃

 

 

 

 

 

 

 

 

4. 표 형태로 배치 - GridLayout

• 표형태로
• 주어진 순서대로 배치한다.
• 줄바꿈을 자동으로 해준다.

1. GridLayout 배치규칙

• orientation: 가로나 세로 방향으로 뷰를 나열 ( hporizontal, vertical )
• rowCount: 세로로 나열할 뷰 개수
• columnCount: 가로로 나열할 뷰 개수

 

 

 

 

 

 

 

 

2. GridLayout 속성

• layout_row : 뷰가 위치하는 세로 방향 인덱스
• layout_column : 뷰가 위치하는 가로 방향 인덱스

 

 

 

• layout_gravity: 특정 뷰의 크기 확장하기

 

 

 

 

• layout_columnSpan:가로로 열 병합  
• layout_rowSpan:세로로 행 병합

 

 

 

 

 

 

 

 

 

 

 

5. 계층 구조로 배치 - ConstraintLayout

• 다른 레이아웃은 안드로이드에서 기본적으로 있었던 거고
• 이 친구는 업그레이드 되면서 추가되서 안드로이드 x라는 확장된 라이브러리에 들어있다.
• 그래서 라이브러리 추가를 해야한다. 
• 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공

implementation(libs.androidx.constraintlayout)

 

 

 

• RE처럼 하나하나 위치를 나타낸다.
• 차이는 더 많은 속성을 제공한다. 
• 아래 있는데 얼마만큼 떨어져 있느냐

 

 

 

 

 

 

 

 

 

 

6. 전화 앱의 키패드 화면 만들기

 

 

• 배열같은 인덱스가 붙는다. 

 

 

 

 

 

차근차근 해봐

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation = "horizontal"
        android:gravity="center_horizontal">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src= "@drawable/add"
            app:tint="#00ff00"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="연락처 추가"
            android:textColor="#00ff00"
            android:textSize="20dp" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="80dp"
        android:text="02-120"
        android:textSize="50dp" />

    
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation = "horizontal"
        android:layout_margin="20sp"
        android:columnCount='3'>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="*"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="#"
            android:textSize="24dp"
            android:paddingRight="40dp"
            android:paddingLeft="40dp"
            android:paddingBottom="10dp"/>
    </GridLayout>



    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">
        <ImageView
            android:id="@+id/iv_video"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="40dp"
            android:src= "@drawable/video" />
        <ImageView
            android:id="@+id/iv_call"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src= "@drawable/call"
            android:layout_toRightOf="@id/iv_video"
            android:layout_marginRight="40dp"/>
        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src= "@drawable/back"
            android:layout_toRightOf="@id/iv_call"/>

    </RelativeLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="318dp"
            android:layout_marginBottom="358dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="1"
            android:textSize="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="318dp"
            android:layout_marginBottom="358dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:paddingBottom="10dp"
            android:text="2"
            android:textSize="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>