Design Palette 훑어보기 - Text편 - 2

AutoCompleteTextView, MultiAutoCompleteTextView

 이 요소는 텍스트의 자동완성 기능을 지원하는데 사용됩니다.

 

<!-- AutoCompleteTextView Code -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:completionThreshold="1"
        android:hint="AutoCompleteTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 위 코드는 기본적인 AutoCompleteTextView의 xml 코드입니다. android:completionThreshold 는 자동검색을 시작할 최소 글자수를 정의합니다. 위 코드에서는 1로 되어있으므로 1자리 부터 자동검색을 지원합니다.

 

자동 검색을 지원하려면 자동검색을 도는 풀이 있어야할 것입니다.

 

// AutoCompleteTextView 임시 리스트만들고 연결
package com.professionalandroid.apps.android_practice1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import kotlinx.android.synthetic.main.autocompletetextview.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.autocompletetextview)
		
        // 자동완성을 제공할 리스트
        val list = mutableListOf<String>("Android", "Google", "Java", "Kotlin", "Text View", "Alphabet", "Apple", "Recycler View", "Adapter")
        // 어댑터 설정
        autoCompleteTextView.setAdapter(ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, list))
    }
}

 

 사실상 adapter의 개념만 알고 있다면 매우 간단합니다. 위 코드에서는 임시로 리스트를 만들어주고 apdater를 연결해 주었습니다. 다음은 실행화면 입니다.  설정해 놓은 것처럼 1자리 부터 자동완성 기능이 실행되는 것을 볼 수 있습니다.

 

 

AutoCompleteTextView

 

 MultiAutoCompleteTextView의 경우에는 기존 AutoCompleteTextView와 유사하나 ','를 기준으로 문자열로 검색하 수 있다는 차이가 있습니다. ex) android, alph...

 

CheckedTextView

 이 뷰는 체크리스트를 만들고 싶을 때 이용할 수 있습니다. 

 

<!-- CheckedTextView Code -->
<androidx.constraintlayout.widget.ConstraintLayout 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">


    <CheckedTextView
        android:id="@+id/checkedTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkMark="?android:attr/listChoiceIndicatorMultiple"
        android:text="CheckedTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 android:checkMark로 따로 체크 박스를 넣어주셔야 체크박스가 화면에 나타납니다. 하지만 이대로 실행시키면 마우스를 아무리 눌러도 체크는 되지 않습니다. 당연히 다음과 같이 setOnClickListener를 따로 적용해 주셔야 합니다. 

 

// CheckBox setOnClickListener 설정
package com.professionalandroid.apps.android_practice1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.checkedtextview.*

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

		//setOnClickListener 설정
        checkedTextView.setOnClickListener{
            checkedTextView.isChecked = !checkedTextView.isChecked
        }
    }
}

 

 

TextinputLayout

 TextinputLayout은 조금 더 유연한 View를 만들기 위해 고안되었습니다. 대표적으로 4가지 기능을 사용할 수 있습니다. Hint animation, Error message 출력, Text counter, Password on/off 기능입니다.

 

먼저 의존성을 위해서 build.gradle(Module: app)에 다음 코드를 추가해줍니다.

 

implementation 'com.google.android.material:material:1.2.1'

 

 

기능에 대해서는 주석을 포함한 코드와 사진으로 대체 하겠습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textinputlayout"
        android:layout_width="409dp"
        android:layout_height="wrap_content"
        android:hint="TextInputLayout"
        // 텍스트 카운터 기능 사용
        app:counterEnabled="true"
        app:counterMaxLength="10"
        // 에러메세지 기능 사용
        app:errorEnabled="true"
        // 힌트 애니메이션 기능 사용
        app:hintAnimationEnabled="true"
        app:hintEnabled="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        // Password on/off 사용
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/textinputedittext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

package com.professionalandroid.apps.android_practice1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import kotlinx.android.synthetic.main.textinputlayout.*

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

        textinputedittext.addTextChangedListener(object: TextWatcher{
            override fun afterTextChanged(p0: Editable?) {
            	// 에러 발생 기준과 메세지 설정
                if(textinputedittext.text!!.isEmpty()){
                    textinputedittext.error = "텍스트를 입력하세요"
                }
                // 에러 상황 해결시 설정
                else{
                    textinputedittext.error = null
                }
            }

            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            }

        })

    }
}