[Android/Kotlin/Tip] EditText TextView Sync - 입력에 따라 텍스트 변경

 

 

1. 설명

결과

 

이번 글에서는 EditText 입력에 따라 TextView의 Text를 변경해주는 방법에 관하여 기술한다.

 

이를 위해서 TextWatcher 리스너를 재정의하며, EditText서 입력을 변경함에 따라 TextView의 Text를 변경하도록 만든다.

 

 

 

 

 

● activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:id="@+id/linearLayout">

    <EditText
        android:id="@+id/editText01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:hint="Input Text" />

    <TextView
        android:id="@+id/textView01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="[Empty]"
        android:textSize="24sp"
        android:gravity="center" />

</LinearLayout>

레이아웃은 EditText 1개, TextViwe 1개로 구성하였다.

 

---

 

● MainActivity.kt

package com.example.tipexample

import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import androidx.appcompat.app.AppCompatActivity
import com.example.tipexample.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private val binding: ActivityMainBinding by lazy { ActivityMainBinding.inflate(layoutInflater) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        binding.editText01.addTextChangedListener(object: TextWatcher {
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                // 입력 하기 전 동작
            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                // 입력 중 동작
                binding.textView01.text = binding.editText01.text
            }

            override fun afterTextChanged(p0: Editable?) {
                // 입력 후 동작
            }
        })

    }
}

 

beforeTextChanged, onTextChanged, afterTextChanged 3개의 함수를 오버라이드 하며 각각 입력하기 전, 도중, 후의 동작을 정의할 수 있다.

 

 

여기서는 입력 중 동작으로 editText의 text를 TextView의 text로 설정해줌으로써 EditText의 입력함에 따라서 TextView의 text가 변경되도록 하였다.