[Android/Kotlin] 안드로이드 학습 2.1 - Layout Editor을 이용한 LinearLayout

 

과정2 :  Android Kotlin Fundamentals:LinearLayout using the Layout Editor

 

이번 시간에 알아볼 내용은 선형 레이아웃이다. 또한, 레이아웃 편집기를 사용해 UI 요소를 다루는 방법도 살펴볼 계획이다.

 

 

View groups

 뷰그룹은 자식뷰(다른 뷰나 뷰 그룹)를 가지는 뷰이다. 레이아웃을 구성하는 뷰는 뷰 그룹이 루트인 뷰의 계층 구조로 구성된다.

LinearLayout 뷰 그룹에서, UI 요소는 수평이나 수직으로 배치될 수 있다. -> xml에서 설정해주기 나름 

Vertical(수직) & Horizontal(수평)

 

디자인에서 위젯 추가하기 - Layout Editor

Layout Editor로 UI 빌드 - Android Developer

 

Layout Editor은 Android Studio 내부의 시각적인 디자인 도구이다.  XML 코드를 직접 작성하는 대신 레이아웃 편집기를 사용하여 UI 요소를 디자인 편집기로 드래그할 수 있다.

Layout Editor

1. Palette: 레이아웃으로 드래그할 수 있는 다양한 뷰 및 뷰 그룹을 포함
2. Component Tree: 레이아웃에서 구성요소의 계층 구조를 표시
3. Toolbar: 편집기에서 레이아웃 모양을 구성하고 레이아웃 속성을 변경하려면 이 버튼을 클릭
4. Design Editor: 디자인 뷰나 청사진 뷰 또는 두 뷰 모두에서 레이아웃을 수정
5. Attributes: 선택한 뷰의 속성을 제어할 수 있는 영역
6. View Mode: 레이아웃을 

 이 세 모드로 볼 수 있음.

  7. 확대/축소 및 화면 이동 컨트롤: 편집기 내에서 미리보기의 크기와 위치를 제어

 

 

UI 요소 추가하기

뷰 모드를 Design으로 전환해 화면에 TextView를 끌어온다. Component Tree에 TextView 하나가 추가된 걸 확인할 수 있다. Attribute의 속성을 아래와 같이 설정해준다.

Attribute 설정 모습

텍스트가 Hardcoded string이라고 경고 뜨는 부분을 클릭하면 팝업창이 뜨면서 리소스에 바로 추가할 수 있다.

res>value>strings 파일로 가면

<string name="name">Cocoa</string>

이 코드가 생겨 있을 거임.

 

dimen 설정도 해줄 수 있다. 뷰 모드를 코드로 바꾸고, textSize를 20sp로 지정해준 부분에서 option + enter를 눌러 리소스에 정의

<dimen name="text_size">20sp</dimen>

 

MainActivity.kt 코드 살펴보기

setContentView(R.layout.activity_main)

setContentView()는 레이아웃 파일을 액티비티랑 연결해주는 역할을 한다.

• R은 리소스에 대한 참조이다. 이것은 앱의 모든 리소스 파일에 대한 정의가 있는 자동 생성 클래스이다.
• layout.activity_main은 레이아웃의 이름이 activity_main 임을 나타낸다.

 

 

"Padding" vs "Margin"

[Padding]

Padding은 뷰/요소의 경계 안의 공간이다. 뷰의 가장자리와 뷰 내용에 대한 공간이라고 보면 된다.

ex) 이미지를 터치할 때, 일부러 사이즈를  크게 하고 padding을 주어 실제 보이는 크기는 똑같이 만들고 터치 영역을 넓힌다.

뷰의 사이즈는 padding까지 포함한다는 게 특징이다.

padding의 속성으로는 전체 padding, Top, Bottom, Start, End, Left, Right가 있다. 

<사용 예시> 

• android:padding: 뷰의 네 모서리 모두에 패딩을 지정
• android:paddingTop: 상단 가장자리의 패딩을 지정

 

[Margin]

Margin은 뷰의 경계 외부의 공간이다. 위 그림과 같이 뷰의 가장자리에서 부모까지의 공간이다.

margin의 속성으로는 마찬가지로 전체 margin, Top, Bottom, Start, End, Left, Right가 있다.

<사용 예시>

• android:layout_margin: 뷰의 네 면 모두에 대한 여백을 지정
• android:layout_marginTop: 이 보기의 상단에 추가 공간을 지정

 

 

폰트 설정하기

디자인 편집기의 attribute에서 margin과 padding도 줄 수 있다. textSize를 설정한 것과 크게 다를 부분이 없으니 넘어가겠다.

 

1. 폰트를 설정하려면 attribute 창에서 "fontFamily"를 검색한다.

2. 창을 내려서 More Font... 클릭

3. rob 검색 후 속성을 체크하고 OK 버튼 누르기

폰트를 적용하니 res 폴더 안에 roboto.ttf를 포함하는 폰트 파일이 생기고, fontFamily 속성도 @font/roboto로 바뀜

android:fontFamily="@font/roboto"

 

 

위젯에 Style 적용하기

 

 스타일은 뷰의 특정한 모양과 형식을 지정하는 속성 모음이다. 스타일은 폰트 색, 사이즈, 배경색, padding, margin 및 기타 공동 속성들이 포함될 수 있다.

 텍스트의 뷰 형식을 스타일로 추출해서 다른 것들에게도 해당 스타일을 재사용할 수 있다. style 재사용은 보기가 여러개일 때 앱에 일관적인 뷰를 제공한다. 스타일을 사용하면 공통 속성을 하나의 위치에 유지할 수도 있다.

1. Component Tree에서 name_text 우클릭 > Refactor > Extract Style

2. style.xml 파일이 생성된 걸 확인할 수 있음

3. Code로 보면, activity_main.xml에서도 style이 적용됨

 

ImageView 사용하기

 

contentDescription: 화면 판독기가 사용자에게 이미지를 설명할 때 사용. attribute에서 검색 후 추가해줄 수 있다. Yellow star로 contentDescription을 추가하고, hardcorded 경고 때문에 string 리소스 파일에 yellow_star로 설정해줬다.

 

 

 

ScrollView

 ScrollView는 안에 배치된 뷰 계층을 스크롤할 수 있는 뷰 그룹이다. 스크롤뷰는 하나의 다른 뷰 또는 뷰 그룹만 자식으로 포함할 수 있다. 자식 뷰는 일반적으로 아래 이미지와 같은 LinearLayout이다. LinearLayout에서 여러 뷰를 포함할 수 있기 때문디ㅏ.

 

 다음 이미지는 여러 다른 뷰가 ScrollView포함된 의 예를 보여준다.

1. 디자인 탭에서 ScrollView 추가

 

Learn more

Udacity course:

• Developing Android Apps with Kotlin

Android developer documentation:

• Layouts
• ViewGroup
• View
• LinearLayout
• ScrollView
• Support different pixel densities (dp)
• Build a UI with Layout Editor
• Android Studio documentation
• Styles and Themes