Kotlin Programming Study - 07

• 뷰를 배치하는 레이아웃

뷰를 배치하는 클래스를 레이아웃 클래스라고 합니다. 안드로이드는 여러  배치아웃 클래스를 제공하는데, 저마다 배치 규칙이 있습니다.

---

07-1 선형으로 배치 - LinearLayout

LinearLayout 배치 규칙

뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스입니다.

orientation 속성에 horizontal(가로)이나 vertical(세로)값으로 방향을 지정합니다.

화면에서 벗어나도 줄을 자동으로 바꾸지 않습니다.

이미지뷰	텍스트뷰	텍스트뷰
	텍스트뷰

위의 표 처럼 레이아웃을 나열하려면 LinearLayout의 중첩으로 가능합니다.

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

 

여백을 채우는 layout_weight 속성

화면에 뷰를 배치하다보면 가로나 세로 방향으로 새이는 여백을 뷰로 채울 수 있습니다.

 

뷰 1개로 전체 여백 채우기

layout_weight속성을 이용하면 계산하지 않아도 각 뷰에 설정한 가중치로 여백을 채울 수 있습니다.

해당 요소에 'android:layout_weight="1"'로 설정하면 해당 요소로 가로방향의 모든 여백을 채울 수 있습니다.

 

뷰 여러개로 여백을 나누어 채우기

여러 요소에 layout_weight속성을 지정하면 해당 숫자를 가중치로 계산해 여백을 채웁니다.

버튼 2개를 가로로 배치하며 1과 3으로 속성을 설정하면 가로여백을 1/4만큼, 3/4만큼 나누어 차지합니다.

 

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

중첩된 레이아웃에서의 layout_weight속성은 해당 요소가 속한 레이아웃 여백을 대상으로 적용됩니다.

 

여백 채우기로 뷰의 크기 설정하기

뷰의 크기를 0으로 하고 layout_weight값만 설정하기도 합니다.

layout_height값을 모두 0으로 설정해 화면에 아무것도 나오지 않게 화면 전체를 여백으로 만들고, 각 요소의 layout_weight를 1로 설정해 세로 여백을 3등분해 요소를 배치할 수 있습니다.

 

뷰를 정렬하는 gravity, layout_gravity 속성

뷰에 gravity와 layout_gravity속성 적용하기

뷰를 정렬할 때는 gravity와 layout_gravity속성을 사용합니다.

이 속성을 사용하지 않으면 기본값은 left/top입니다(왼쪽 위를 기준으로 정렬).

gravity속성을 right/bottom으로, layout_gravity속성을 center로 정렬하면, 요소의 정렬은 가운데로, 콘텐츠의 정렬은 우/하단으로 지정됩니다.

 

레이아웃에 gravity속성 적용하기

그런데 LinearLayout의 orientation이 vertical로 설정된 채로 layer_gravity속성을 center_vertical값으로 지정하면 정렬이 적용되지 않습니다. LinearLayout자체가 방향으로 뷰를 배치하는 레이아웃이므로 같은 방향으로는 속성이 적용되지 않기 때문입니다.

뷰를 LinearLayout영역의 가운데로 정렬하려면 layout_gravity가 아닌 gravity속성을 center로 설정해야 합니다.

 

07-2 상대 위치로 배치 - RelativeLayout

RalativeLayout 배치 규칙

RelativeLayout은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스입니다.

화면에 이미 출력된 특정 뷰를 기준으로 방향을 지정해 배치합니다. 아래 속성을 이용하며 각 속성에 입력하는 값은 기준이 되는 뷰의 id입니다.

android:layout_above:기준 뷰의 위쪽에 배치

android:layout_below:기준 뷰의 아래쪽에 배치

android:layout_toLeftOf: 기준 뷰의 왼쪽에 배치

android:layout_toRightOf: 기준 뷰의 오른쪽에 배치

 

맞춤 정렬하는 align 속성

상대 뷰의 어느쪽에 맞춰 정렬할지를 정하는 속성은 다음과 같습니다. 입력하는 값 역시 기준이 되는 뷰의 id 입니다.

android:layout_alignTop: 기준 뷰와 위쪽을 맞춤

android:layout_alignBottom: 기준 뷰와 아래쪽을 맞춤

android:layout_alignLeft: 기준 뷰와 왼쪽을 맞춤

android:layout_alignRight: 기준 뷰와 오른쪽을 맞춤

android:layout_alignBaseLine: 기준 뷰와 텍스트 기준선을 맞춤

 

상위 레이아웃을 기준으로 정렬하는 속성도 있습니다.

android:layout_alignParentTop: 부모의 위쪽에 맞춤(alignParentBottom, alignParentLeft, alignParentRight)

android:layout_centerHorizontal: 부모의 가로 방향 중앙에 맞춤(centerVertical, InParent(가로, 세로, 중앙에 맞춤)

 

07-3 겹쳐서 배치 - FrameLayout

FrameLayout은 뷰를 겹쳐서 출력하는 레이아웃 클래스입니다.

카드를 쌓듯 뷰를 추가한 순서대로 위에 겹쳐서 게속 출력하는 레이아웃입니다.

똑같은 위치에 여러 뷰를 겹처서 놓고, 어떤 순간에 하나의 뷰만 출력할 때 사용합니다. 따라서 대부분 뷰의 표시 여부를 결정하는 visibility 속성을 함께 사용합니다.

이를 액티비티 코드에서 아래와 같이 사용합니다.

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.button.setOnClickListener{
        	//	버튼 보이고 이미지 숨기기
        	binding.button.visibility = View.VISIBLE
            binding.imageView.Visibility = View.INVISIBLE
        }
    }
}

 

07-4 표 형태로 배치 - GridLayout

GridLayout 배치 규칙

GridLayout은 행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스입니다. LinearLayout처럼 orientation속성으로 가로나 세로 방향으로 뷰를 나열하는데 줄바꿈을 자동으로 해줍니다.

orintation: 방향 설정

rowCount: 세로로 나열할 뷰 개수

columnCount: 가로로 나열할 뷰 개수

 

GridLayout 속성

특정 뷰의 위치 조정하기

GridLayout으로 뷰를 배치하면 추가한 순서대로 배치되는데, layout_row, layout_column 속성을 이용하면 특정 뷰의 위치를 조정할 수 있습니다.

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

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

 

특정 뷰의 크기 확장하기

특정 뷰의 크기때문에 다른 뷰의 크기가 확장되거나 여백이 생기는 경우 layout_gravity="fill_horizontal"과 같은 속성값을 이용합니다.

 

열이나 행 병합하기

특정 뷰가 테이블에서 여러 칸을 차지하게 설정할 수 있습니다.

layout_columnSpan: 가로로 열 병합

layout_rowSpan: 세로로 행 병합

 

(TableLayout이라는 레이아웃도 있습니다.)

 

07-5 계층 구조로 배치 - ConstraintLayout

androidx에서 제공하는 라이브러리 입니다.

build.gradle.kts파일의 dependencies에 다음처럼 implementation을 선언해야 합니다.

(안드로이드 프로젝트를 만들면 자동으로 선언 됩니다.)

'implementation(libs.androidx.constraintlayout)'

 

레이아웃 편집기에서 레이아웃 구성하기

ConstraintLayout은 RelativeLayout과 비슷하지만 더 많은 속성을 제공합니다.

그런데 XML파일에 직접 작성하기는 부담스러우므로 안드로이드 스튜디오에서 제공하는 레이아웃 편집기를 이용합니다.

 

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

(실습)