돌아오신 것을 환영합니다
이번 동영상에서는 정렬에 대하여 알아보고
우리의 애플리케이션을 적용하여 보겠습니다
초보자가 만든 것이 아닌 제대로 된 Android 애플리케이션처럼 보이도록
애플리케이션 내부의 UI 요소들을 정렬하는 것입니다
즉 애플리케이션을 커스터마이징, 정렬하고
요소들의 alignment(정렬)을 커스터마이징 할 것입니다
요소의 커스터마이징과 정렬은 앱의 사용자 인터페이스(UI)를 만드는 데 있어 필수적입니다
UI를 요소들을 섬세하게 만들고 위치시켜
심미적으로 아름답고 기능성 있는 디자인을 만들 수 있는 일종의 캔버스처럼 생각하십시오
Android Studio의 커스터마이징은 UI 요소들의 색상, 폰트, 모양 등등을
여러분의 앱의 테마에 맞추어 변경할 수 있도록 하여 줍니다
모든 Compose 요소는 modifier(수정자)라는 parameter(매개변수)가 있으며
우리는 modifier를 pass(전달)하고 사용한 적은 있지만, 이런 방식으로 사용하여 본 적은 없었습니다
modifier는 추가적인 property(속성)를 더하는 데 사용할 수 있습니다
그것을 통하여 UI 요소의 padding, 크기, 그리고 위치와 같은 property를 제어할 수 있습니다
이제 정렬에 대하여 알아봅시다
부모 container(컨테이너) 내부에서의 요소의 위치를 가리키는
정렬(alignment)라는 것이 있습니다
부모 container는 무엇일까요?
애플리케이션을 보면 Button(버튼)은 Box 안에 있습니다
Box가 Button의 부모인 것입니다
그리고 Box의 부모는 Row(로우)입니다
또한 Row의 부모는 이 Column(칼럼)입니다
이것들이 부모 container(컨테이너)인 것입니다
Compose는 기본 레이아웃으로 어느 방향이 정해져 있는지에 따라
다양한 정렬 설정을 제공합니다
예를 들어 세로 정렬이나 container의 시작, 중간, 끝으로 정렬 등이 있습니다
즉 화면의 왼쪽, 중간 아니면 오른쪽으로 정렬할 수 있습니다
위, 중간, 아래도 가능합니다
그런 것들로 설정이 가능합니다
그리고 설정은 이 Column(칼럼) 내부에서 직접 변경할 수 있습니다
코딩은 하지 않고 이야기만 너무 많이 한 것 같습니다
이제 코드를 작성하여 봅시다
Column 안에는 modifier(수정자)라는 property(속성)이 있습니다
그것은 중괄호{}가 아닌 중괄호 앞에 오는 소괄호()에 들어가야 합니다
이곳에서 Column의 생김새를 modifier를 이용하여 수정할 수 있습니다
이 Modifier로 예를 들어 .fillMaxSize를 실행할 수 있겠습니다
이것은 전에 본 적이 있습니다
기억나실 수도 있는데, 이 위에서 사용하였습니다
이러면 surface(표면)은 영역 전체를 채우게 됩니다
그리고 이제 Column도 그렇게 될 것입니다
Modifier.fillMaxSize()라 입력합니다
좋습니다
이제 재실행을 합시다
Preview(프리뷰)는 편리하지만
가끔씩 UI 요소를 보기가 불편합니다
조금 다르게 생긴 것이 보입니다
그 이유는 이 property(속성)로 인하여 요소의 영역이
화면의 모든 영역을 채우도록 확대되었기 때문입니다
다른 방법도 있습니다
모든 방향으로 확대하는 fillMaxSize 대신 가로로만 확대하는 fillMaxWidth
또는 세로로만 확대하는 fillMaxVertical 또한 사용할 수 있습니다
즉 가로와 세로를 개별적으로 조절할 수 있습니다
그 다음 정렬과 배열을 정할 것입니다
verticalArrangement(수직 배열)라는 것이 있습니다
이 아래에 verticalArrangement라고 추가하겠습니다
이렇게 하면 배열이 가능합니다
그리고 Column의 배열 방식을 변경할 수 있습니다
중앙으로 배열되어야 하는지
아니면 아래로 배열되어야 하는지
원하시는 것을 선택하시면 됩니다
저는 중앙 배열을 선택하겠습니다
이제 Preview를 보겠습니다 화면 크기에 맞추어 줌아웃 하겠습니다
이제 UnitConverter Column은 화면의 중간으로 왔다는 것이 보입니다
배열되었습니다
좋습니다
다음으로 정렬을 하겠습니다
horizontalAlignment(수평 정렬)라는 것이 있어, 수평 방향에서의 정렬을 할 수 있습니다
Alignment.CenterHorizontally를 사용할 것입니다
이것은 기본값으로 주어지는 것 중 하나입니다
가장 흔히 사용되는 것이기도 합니다
현재는 기본 설정인 Alignment.Start로 되어 있어 왼쪽으로 정렬되고 있습니다
이것을 선택하면 아무것도 변하지 않습니다
Start 대신 End를 입력하면 맨 오른쪽으로 정렬되는 것을 보실 수 있습니다
제 Column 전체가 맨 오른쪽으로 이동되었습니다
이것 말고는 CenterHorizontally(가로 중앙)가 있었습니다
맨 위에 제안되었던 것입니다
저는 이것을 사용할 것입니다
이렇게 수평 중앙으로 정렬하면 사용자 인터페이스(UI)는 화면 중앙으로 가게 됩니다
이것이 가장 제대로 된 애플리케이션 같은 모습입니다
여러분께서 최종적으로 만드셔야 할 모습이기도 합니다
좋습니다
horizontalAlignment과 verticalArrangement의 역할에 대하여 알아보았습니다
요소를 부모의 내부에서 이동시키는 것입니다
이 경우에는 Column(칼럼)이 Column Composable인 UnitConverter의 내부에 있으며
UnitConverter는 UnitConverterTheme 내부에 있는 것입니다
정확히는 화면 전체와 같은 Surface(표면) 내부에 있는 것입니다
즉 UnitConverter는 화면 전체인 Surface를 부모를 두고
자신을 Surface의 세로 길이에서 중앙에 위치시키고
가로로도 중앙에 위치하는 것입니다
좋습니다
배열과 정렬에 대한 내용이었습니다
modifier(수정자)는 fillMaxSize라고 되어 있습니다
이 modifier에 의하여 화면 전체를 채우는 것이 아닌, 자신에게 필요한 만큼 확대됩니다
이번 동영상은 여기까지 하면 될 것 같습니다
다음 동영상에서는 padding(패딩)과 spacer(스페이서)에 대하여 알아보겠습니다
다음 영상에서 뵙겠습니다