Data Binding - 1

s2jjlove·2021년 5월 16일
0

안드로이드 A to Z

목록 보기
4/5
post-thumbnail

오늘은 Data Binding을 이용하여 앱을 만들어볼게요.
1편에서는 Data Binding 없이 앱을 만들고,
2편에서는 Data Binding을 활용해볼게요.

[2021.05.17] 현재 본문에 영어 센터가 포함 시 글이 자동으로 비공개 전환되는 이슈가 있어 부득이하게 센터로 입력하겠습니다 ㅠㅠ

0. 앱 미리 보기


1. 레이아웃 꾸미기

위의 Component Tree와 같은 구조로 레이아웃을 구성해줄게요.

1.1 LinearLayout으로 변경

기본적으로 ConstraintLayout으로 되어있는 레이아웃을 LinearLayout으로 변경해줄게요.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingStart="@dimen/layout_padding"
    android:paddingEnd="@dimen/layout_padding"
    tools:context=".MainActivity">
    
    ...

</LinearLayout>

1.2 TextView 추가

String 파일에 저장된 이름을 출력하는 TextView를 추가해줄게요.

<TextView
        android:id="@+id/name_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/layout_margin"
        android:fontFamily="@font/roboto"
        android:gravity="센터_horizontal"
        android:paddingTop="@dimen/text_size"
        android:text="@string/name"
        android:textAlignment="센터"
        android:textColor="@color/black"
        android:textSize="@dimen/text_size" />

android:gravity="센터_horizontal"
android:textAlignment="센터"
속성을 사용하여 가운데 정렬해줄게요.

1.3 String 리소스 추가

string.xml 리소스 파일에 사용할 String을 저장해줘요.

<resources>
    <string name="app_name">About Me</string>
    <string name="name">Losey</string>
    <string name="yellow_star">Yellow star</string>
    <string name="bio">Hi, my name is Losey.
        \n\nI love fish.
        \n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
        \nFun fact is that I have several aquariums and also a river.
        \n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
        \nAnd sometimes I even go fishing.
        \nAnd even less sometimes, I actually catch something.
        \n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
        \n\nI\'ll be happy to teach you how to make your own aquarium.
        \nYou should ask someone else about fishing, though.\n\n</string>
    <string name="what_is_your_nickname">What is your Nickname?</string>
    <string name="done">done</string>
</resources>

1.4 Dimension 리소스 추가

dimens.xml 파일에 dimension을 저장해줘요.

1.4.1 dimens.xml 파일 생성

values 폴더 우클릭 후 New, Values Resource File을 클릭해줘요.
File namedimens 입력 후 OK 버튼을 눌러 파일 생성을 완료해줘요.

1.4.2 dimens 리소스 저장

<resources>
    <dimen name="text_size">20sp</dimen>
    <dimen name="small_padding">8dp</dimen>
    <dimen name="layout_margin">16dp</dimen>
    <dimen name="layout_padding">16dp</dimen>
</resources>

<dimen> </dimen>태그를 사용하여 dimen 값들을 저장해줘요.

1.5 Font 추가

TextView 선택 후 Design 탭으로 이동 후 fontFamily 검색 후 오른쪽 사각형 부분을 클릭해요.
열린 창에서 좌측 상단의 + 버튼을 눌러줘요.
원하는 폰트를 검색 후 Add font to project 선택 후 OK 버튼을 눌러줘요.
저는 이미 추가한 후라 경고가 나오네요.
성공적으로 추가되면 위의 사진처럼 폰트가 추가된 것을 확인할 수 있어요.

1.6 Style 생성하기

공통으로 반복되게 사용하는 요소들은 Style로 지정해서 사용하면 편해요.
우선 name_text의 속성으로 Style을 생성해볼게요.

Component Tree에서 name_text 우클릭 > Refactor > Extract Style...
Style name에 스타일 이름을 지정 style에 저장할 요소들을 체크 후 OK를 눌러 저장해줘요.

이제 style="@style/NameStyle" 코드 한 줄로 대체할 수 있어요~

1.7 작성한 코드와 생성된 레이아웃

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingStart="@dimen/layout_padding"
    android:paddingEnd="@dimen/layout_padding"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/name_text"
        style="@style/NameStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="센터_horizontal"
        android:text="@string/name"
        android:textAlignment="센터" />

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/nickname_edit"
        style="@style/NameStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="센터_horizontal"
        android:hint="@string/what_is_your_nickname"
        android:inputType="textPersonName"
        android:textAlignment="센터" />

    <Button
        android:id="@+id/done_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="센터_horizontal"
        android:layout_marginTop="@dimen/layout_margin"
        android:fontFamily="@font/roboto"
        android:text="@string/done" />

    <TextView
        android:id="@+id/nickname_text"
        style="@style/NameStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_200"
        android:gravity="센터_horizontal"
        android:paddingBottom="@dimen/small_padding"
        android:textAlignment="센터"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/star_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/layout_margin"
        android:contentDescription="@string/yellow_star"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.2"
            android:text="@string/bio" />
    </ScrollView>
</LinearLayout>

2. Activity에서 기능 추가

2.1 DONE 버튼 클릭 리스너 추가

DONE 버튼에 클릭 리스너를 달아 기능을 추가해줄게요.

2.1.1 addNickName 함수 추가

onCreate()함수 바깥에, addNickName(view: View) 함수를 생성해줄게요.

private fun addNickName(view: View) {
        nickname_text.text = nickname_edit.text
        nickname_edit.visibility = View.GONE
        view.visibility = View.GONE
        nickname_text.visibility = View.VISIBLE

        val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
    }

nickname_text.text = nickname_edit.text EditText에 입력된 값을 TextView에 출력해요.
xxx.visibility = View.VISIBLE 요소를 보이게 만들어요.
xxx.visibility = View.GONE 요소를 보이지 않게 만들어요.
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0) 코드를 통해 DONE버튼 클릭 시 자동으로 키보드가 내려가게 해줘요.

2.1.2 addNickName 함수 호출

함수 생성 후 onCreate함수 내에서 클릭리스너를 달아 함수를 호출해줘요.

done_button.setOnClickListener {
            addNickName(it)
        }

2.2 TextView 클릭 리스너 추가

TextView에 클릭 리스너를 달아 기능을 추가해줄게요.

2.2.1 updateNickName 함수 추가

private fun updateNickName(view: View) {
        nickname_edit.visibility = View.VISIBLE
        done_button.visibility = View.VISIBLE
        view.visibility = View.GONE

        nickname_edit.requestFocus()
        val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.showSoftInput(nickname_edit, 0)
    }

.requestFocus()를 통해 EditText에 포커스를 맞춰줘요.
imm.showSoftInput(nickname_edit, 0) 자동으로 키보드가 올라오게 해줘요.

2.2.2 updateNickName 함수 호출

nickname_text.setOnClickListener {
            updateNickName(it)
        }

2.3 전체 코드

MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        done_button.setOnClickListener {
            addNickName(it)
        }

        nickname_text.setOnClickListener {
            updateNickName(it)
        }
    }

    private fun addNickName(view: View) {
        nickname_text.text = nickname_edit.text
        nickname_edit.visibility = View.GONE
        view.visibility = View.GONE
        nickname_text.visibility = View.VISIBLE

        val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
    }

    private fun updateNickName(view: View) {
        nickname_edit.visibility = View.VISIBLE
        done_button.visibility = View.VISIBLE
        view.visibility = View.GONE

        nickname_edit.requestFocus()
        val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.showSoftInput(nickname_edit, 0)
    }
}

3. 앱 실행하기

코드 작성을 완료했어요! 이제 빌드해볼게요.
EditText에 입력 후 DONE 클릭 시 TextView로 뷰가 바뀌고, ScrollView가 잘 작동하는 것을 볼 수 있어요!


참고자료 : https://developer.android.com/codelabs/kotlin-android-training-welcome?index=..%2F..android-kotlin-fundamentals#1

profile
Android to Zest

0개의 댓글