[Android Study Jam] Unit 3: Layout, Data binding

이번 유닛에서는 레이아웃에 대해 다룹니다. data를 더 편하게 호출하기 위한 data binding도 배웁니다.

기초적인 레이아웃은 대표적으로 LinearLayout, ConstraintLayout이 있습니다.

나를 소개하는 앱으로 실습을 진행했습니다.

LinearLayout

먼저, LinearLayout은 직역하면 선형적인 레이아웃입니다.

상하 또는 좌우로 배치를 할 수 있습니다.

ViewGroup

뷰 그룹은 자식 뷰를 포함한 뷰를 말합니다.

LinearLayout에서는 Vertical LinearLayout, Horizontal LinearLayout으로 나눌 수 있습니다.

Resource

물론 이론이 중요하지만 Android Studio 툴의 활용 역시 중요합니다.

디자인 에디터에서 손쉽게 레이아웃을 전환할 수 있습니다.

 

레이아웃을 변경하고 나에 대해 소개하는 텍스트뷰를 추가합니다.

텍스트뷰의 스타일 역시 여러 속성을 갖고 있습니다.

• padding을 추가해 안쪽 여백 넣을 수 있습니다.
• margin을 추가해 바깥쪽 여백을 넣을 수 있습니다.
• font를 변경할 수 있습니다.
• 스타일을 추출할 수 있습니다.

이 모든것은 디자인 에디터에서 Attribute 메뉴에 들어있습니다.

위 세개는 간단하게 할 수 있는데, 스타일을 추출하는건 뭘까요?

android:textSize="@dimen/text_size

android:textSize="@dimen/text_size

작성한 스타일을 추출해서 재사용할 수 있습니다.

위 예시에서는 dimens.xml이라는 파일에 텍스트 스타일을 추출합니다.

<?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="text_size">20sp</dimen> <dimen name="small_padding">8dp</dimen> <dimen name="layout_margin">16dp</dimen> </resources>

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
	<dimen name="text_size">20sp</dimen> 
    <dimen name="small_padding">8dp</dimen> 
    <dimen name="layout_margin">16dp</dimen> 
</resources>

 

Component Tree

설정을 추출하는 법을 익혔습니다.

속성들을 묶어서 저장하려면 어떻게 할까요?

Component tree에서 묶어서 저장할 수 있습니다.

저는 여기서 xml파일을 자꾸 오가고, 디자인 에디터를 활용하려니 생산성이 떨어지는 느낌을 받았습니다.

shift + shift 단축키를 사용하면 파일을 검색해서 이동할 수 있습니다.

저는 vscode의 키맵을 가져와서 shift + P 단축키로 이동하고 있습니다.

EditText

심심하게 Text만 넣으면 재미가 없겠죠?

TextView의 자식으로 EditText를 추가할 수 있습니다.

• View를 추가 → id를 입력 → string.xml에 정보를 미리 저장 → text에 @string/edit_text 를 지정
• 잡다한 padding, margin, gravity, style 등을 지정

Activity함수를 수정해서 상호작용을 할 수 있습니다.

private fun addNickname(view: View){ val editText = findViewById<EditText>(R.id.nickname_edit) val nicknameTextView = findViewById<TextView>(R.id.nickname_text) }

private fun addNickname(view: View){
	val editText = findViewById<EditText>(R.id.nickname_edit) 
    val nicknameTextView = findViewById<TextView>(R.id.nickname_text) 
} 

// Hide the keyboard. val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

// Hide the keyboard. 
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager 
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

튀어나온 키보드를 숨길 수도 있습니다!

ConstraintLayout

리니어 레이아웃을 배웠으니 ConstraintLayout도 배워봅시다!

직역하면 제약조건이 있는 레이아웃입니다.

뷰 사이에 제약을 걸어서 A가 왼쪽으로 움직이면 B, C가 따라서 왼쪽으로 움직입니다.

Attributes 또는 Design Editor에서 연결선을 이을 수 있습니다.

이렇게 제약이 걸려있으면 가지각색으로 나오는 스마트폰 해상도에 대응하기 좋겠죠?

Chain

제약을 걸 때도 속성이 있습니다.

• Spread : default 스타일이며 View끼리 간격을 두고, 여백과도 같은 간격을 둔다.
• Spread Inside : View끼리만 간격을 둔다.
• Packed : View들 끼리 뭉친다.

 

baseline을 보는 설정을 키면 텍스트의 기준선도 볼 수 있습니다.

 

이 베이스라인을 기준으로 제약을 줄 수도 있습니다.

Data binding

액티비티 함수에서 작업할 때

Button에 기능을 넣거나, EditText 기능을 넣을 때 레이아웃에서 참조했습니다.

이럴 때마다 findViewById()라는 함수를 사용했습니다.

프로젝트 규모가 커진다면 이 긴 코드로 여러번 호출하면 코드가 난잡해집니다.

이를 보완한 것이 Data Binding 기법입니다.

Data Binding은 Binding Object를 매개로 xml파일에 Data를 연결해 사용하는 것을 의미합니다.

장점으로는 코드가 간결해지고 → 가독성, 유지관리에 이점이 있습니다.

사용자가 앱과 상호작용할 때 런타임이 아닌 앱을 시작하는 동안 즉, 컴파일 타임에 실행됩니다.

먼저 build.gradle의 android{}에 코드를 추가합니다.

buildFeatures { dataBinding true }

buildFeatures { dataBinding true }

Data binding 연습

• 첫 번째로 data class를 만든다.

data class MyName(var name: String = "", var nickname: String = "")

• 두 번째로 data layout을 만든다.

android:text="@={myName.name}"

• 세 번째로 data를 채운다.

binding.myName = myName

• data를 사용할 수 있다.

binding.apply { 
	myName?.nickname = nicknameEdit.text.toString() 
    invalidateAll() 
    ... 
}

 

참고

developer.android.com/courses/study-jams

Android Study Jams  |  Android 개발자  |  Android Developers