07. [뷰를 배치하는 레이아웃]

728x90

[07. 뷰를 배치하는 레이아웃]

-레이아웃 클래스 : 다르 뷰 객체들 담아서 제어하는 컨테이너 역할.

[07-1. 선형 배치] : LinearLayout 클래스

[LinearLyout 배치 기본 규칙]

-LinearLayout : 담고 있는 뷰 객체들을 방향 기준 선형 나열 레이아웃

-기본적으로 ‘뷰 객체’ 추가한 순서대로 일렬로 나열.

-화면에서 벗어나도 자동 줄 바꿈 X

-<orientation 속성> 에 속성값 지정하여 선형 나열의 ‘방향’을 지정

▷[방향 지정 속성값]

vertical	세로 나열
hroizontal	가로 나열

[LinearLayout 레이아웃 충접 구조] : 복잡한 화면 구성 가능

-레이아웃 클래스도 역시 뷰 객체이므로, 내부에 다른 레이아웃 객체 포함 O

[여백 채우기 속성] : <layout_weight 속성>

-각각의 뷰 객체에 설정한 가중치 값에 비례하게 여백을 채움

ex. android: layout_weithg = “가중치값”

-이 속성에 지정한 가중치값은 뷰가 차지하는 여백을 1로 두고 여백의 비율에 두는 가중치

▶[뷰 여러 개로 전체 여백 채우기]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">  //가로 방향 나열
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
	android:text="Button1"
	android:layout_weight= "1"/> // 가중치값 1 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
	android:text="Button2"
	android:layout_weight="3"/> //가중치값 3
</LinearLayout>

-전체 뷰 객체를 감싸고 있는 선형 레이아웃 내부에 뷰 객체는 버튼 2개

-각각의 뷰 객체에 여백 가중치값은 1: 3

-따라서 두 뷰 객체가 차지하는 방향 나열 시, 남는 여백을 1:3 나눠서 채움

▶[중첩된 레이아웃에서 여백 채우기]

-layout_weight 속성 : 자신이 속한 레이아웃 영역의 여백 대상으로 채움

-따라서 서로 다른 레이아웃에 있는 뷰 객체끼리의 가중치는 상호 영향 미치지 않음

-같은 영역의 뷰끼리 여백에 가중치 두고 비율 나누어 채우는 것

▶[여백 채우기 -> 뷰 크기 비례 설정]

-뷰의 크기를 0으로 하여 화면 전체를 여백 대상으로 삼는다면, 여백채우기 속성을 이용해서 뷰가 차지할 크기를 비례하게 설정 가능 (ex. 3등분에 비례하게 뷰 차지 가능)

[뷰 정렬 속성] : gravity / layout_gravity 속성

-뷰 정렬 기본값 : left/top (화면 왼쪽 위 기준 정렬)

gravity 속성	정렬 대상 = 뷰 내부 콘텐츠(내용물)
layout_gravity 속성	정렬 대상 = 뷰 자체

▶[‘뷰’ 에 정렬 속성 적용]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical"> //세로 방향 기준 선형 나열
    <TextView
	android:layout_width="150dp"
 	android:layout_height="150dp"
	. . . 
	android:gracity="right|bottm" //뷰의 콘텐츠가 정렬 대상(오른쪽 아래)
	android:layout_gravity="center_horizontal"/> //뷰 자체가 정렬 대상(가로 기준 중앙값)
</LinearLayout>

▶[‘레이아웃’에 정렬 속성 적용]

-레이아웃 orientation 속성에 설정한 방향과 같은 방향으로는 layout_gravity속성 적용X

-이런 경우, ‘레이아웃’ 자체에 gravity 속성을 적용하여 중앙 배치 가능

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical" //세로 방향 기준 선형 나열
    android:gravity="center"> // 레이아웃 속 뷰 객체가 정렬 대상이 됨
                                           (gravity가 뷰의 콘텐츠 기준 정렬이므로)
    <TextView
	android:layout_width="150dp"
 	android:layout_height="150dp"
	. . . 
	android:gracity="right|bottm" //뷰의 콘텐츠가 정렬 대상(오른쪽 아래)
	android:layout_gravity="center_horizontal"/> //뷰 자체가 정렬 대상(가로 기준 중앙값)
</LinearLayout>

-gravity 속성은 뷰 객체에 포함된 내용물(콘텐츠)를 정렬 대상으로 삼음

-레이아웃 역시 뷰 객체 일종이므로, 레이아웃에 gravity 속성값을 준다면 레이아웃 안에 포함된 뷰 객체들이 ‘콘텐츠’가 되어 정렬 대상이 될 것.

-따라서, 레이아웃 규격 전체를 기준으로 포함되고 있는 TextView 뷰 객체가 레이아웃 중앙 정렬 되는 것.

[07-2. 상대 위치 배치] : RelativeLayout

[RelativeLayout 배치 규칙]

-RelativeLayout : 특정 뷰(기준 뷰) 위치 기준 정렬 레이아웃 클래스

-LinearLayout처럼 자동으로 방향 배치 X 직접 지정하여 배치해야 함

-기준 뷰에 id속성값 지정한 뒤, 해당 뷰를 기준으로 현재 뷰 정렬 위치 지정함

▷[특정 뷰 기준 배치 방향 지정 속성]

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

▷[맞춤 정렬하는 align 속성] : 기준 뷰와 맞춤 정렬

android:layout_alignTop	기준 뷰와 위쪽을 맞춤
android:layout_alignBottom	기준 뷰와 아래쪽을 맞춤
android:layout_alignLeft	기준 뷰와 왼쪽을 맞춤
android:layout_alignRight	기준 뷰와 오른쪽을 맞춤
android:layout_alignBaseline	기준 뷰와 텍스트 기준선을 맞춤

▷[상위(부모) 레이아웃 영역 기준 맞춤 정렬 속성] : 부모 영역 기준으로 뷰 맞춤 정렬

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

-LinearLayout으로 배치한 화면을 RelativeLayout으로 구현 O

-RelativeLayout으로 배치한 화면을 LinearLayout으로 구현 O

-즉, 어떤 레이아웃 선택할 지는 개발자 선택임

[07-3. 겹쳐서 배치] : FrameLayout

[FrameLayout] : 뷰를 겹쳐서 출력하는 레이아웃 클래스

-이 레이아웃은 똑같은 위치에 여러 뷰 객체를 겹쳐 놓고, 화면 전환 시 필요한 뷰만 출력O

-뷰 표시 여부 설정 <visibility> 속성 함께 사용 多

-처음에는 보이지 않다가 액티비티 코드에서 원하는 순간에 visibility 속성값 바꾸어 뷰 보임

[xml 파일]

<FrameLayout 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:text="BUTTON1"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:visibility="invisible"
        android:clickable="true" />
</FrameLayout>

[액티비티 코드]

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val binding=ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        binding.button.setOnClickListener {
            binding.button.visibility = View.INVISIBLE
            binding.imageView.visibility = View.VISIBLE
        }
        binding.imageView.setOnClickListener {
            binding.button.visibility = View.VISIBLE
            binding.imageView.visibility = View.INVISIBLE
        }
    }
}

[07-4.표 형태로 배치] : GridLayout

[GridLayout 배치 규칙]

-GridLayout : 행/열로 구성된 테이블 화면 레이아웃 클래스

-orientation 속성으로 가로/세로 방향으로 뷰 나열

-rowCount/columnCount 속성에 설정한 개수만큼의 뷰가 추가되면 자동 줄바꿈되어 출력

orientation	방향 설정
rowCount	세로로 나열할 뷰 개수
columnCount	가로로 나열할 뷰 개수

▷[배치 속성]

-단, orientation 속성이 horizontal(즉, 가로 기준 나열)일 때는 columnCount 속성으로

vertical (즉, 세로 기준 나열)일 때는 rowCount 속성으로 줄바꿈

[GridLayout 속성]

▷[특정 뷰의 위치 조정]

-기본적으로 GridLayout은 추가한 순서대로 뷰를 배치

layout_row / layout_column 속성 사용하면 특정 뷰 위치 조정 가능

이 이후에 추가한 뷰는 지정 위치 다음부터 출력된다

layout_row	뷰가 위치하는 행 인덱스 지정
layout_column	뷰가 위치하는 열 인덱스 지정

▷[특정 뷰 크기 확장]

layout_gravity = “fill_horizontal” 로 특정 뷰 확장 출력 가능

같은 칸에 뷰 겹치면, layout_gravitiy 속성으로 겹치는 뷰의 정렬 위치 지정해주어야 함

▷[열/행 병합]

뷰가 여러 칸 차지하게 설정 가능

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

[07-5. 계층 구조로 배치] : ConstraintLayout

[ConstraintLayout]

-androidx에서 제공하는 라이브러리

-뷰를 화면에 출력할 때, [id/layout_width/layout_height] 이외에 제약조건 지정해야 함

-뷰의 가로/세로 방향으로 제약을 설정해줘야 함

[레이아웃 편집기로 레이아웃 구성]

-안드로이드 스튜디오는 ‘레이아웃 편집기’ 제공

-마우스 클릭 만으로 디자인 구성 가능

[07-6. 전화 앱의 키패드 화면 만들기] : 실습

[참고] : Do It 안드로이드 앱 프로그래밍 with 코틀린