[모든 팔레트 정복] 1. Text Palette(텍스트 팔레트)

안녕하세요, 닉네임간편입니다.

팔레트는 안드로이드 스튜디오에서 드래그를 통해 바로바로 사용할 수 있는 요소들의 모임입니다.

사실 앱을 개발하면서 모든 팔레트를 활용하진 않을 수 있습니다. 그러나 모든 팔레트에 대한 지식이 조금이라도 있다면 원하는 기능을 구현하는 데 더 수월하며, 또한 특정 기능을 구현하는 데 더 효과적인 요소를 사용할 수 있습니다. 따라서 이번 시간부터는 안드로이드 스튜디오에 있는 모든 팔레트(Palette)들에 대해서 알아보고, 정리하겠습니다.

우선 이번 시간에는 Text 팔레트에 대해서 알아보겠습니다.

설명에 들어가기에 앞서 Text 팔레트에 처음 들어가면 굉장히 많은 요소들이 있는 걸 볼 수 있습니다.

그러나 모든 요소가 다 개별적인 요소는 아니며, Plain Text부터 Number(Decimal)은 EditText 요소에서 inputType을 다르게 선언한 것입니다. 따라서 그걸 감안하면서 설명을 시작하겠습니다.

1. TextView(텍스트뷰)

문자열을 표시하는 요소이며, 일반적으로 많이 사용됩니다.

문자열의 크기는 주로 sp 단위를 이용해 조절합니다. 이 단위를 이용하면 사용자 기기의 글꼴에 유연하게 대응할 수 있습니다.

또한 문자열의 높이(height)를 wrap_content로 설정하면 다양한 기기의 시스템 폰트 크기에 대응할 수 있습니다.

카카오 헤어샵의 TextView입니다.

이 그림의 파란색 박스 부분이 바로 TextView입니다.

2. EditText

문자열을 입력할 수 있는 요소입니다.

이때 inputType을 반드시 지정해야 합니다.

inputType은 화면에 나타나는 키보드 자판의 유형, 입력 가능한 문자, 입력된 문자가 보이는 형식으로 구성되어 있습니다. 다음은 다양한 inputType 속성들입니다.

1) text

문자열을 입력할 수 있는 요소입니다.

이때 inputType을 반드시 지정해야 합니다.

inputType은 화면에 나타나는 키보드 자판의 유형, 입력 가능한 문자, 입력된 문자가 보여지는 형식으로 구성되어 있습니다. 다음은 다양한 inputType 속성들입니다.

2) textPersonName

마찬가지로 문자와 숫자를 입력할 수 있는 일반적인 키보드 자판이 나옵니다.

3) textPassword

문자와 숫자를 입력할 수 있는 키보드 자판이 나오며, 이때 한 글자를 입력할 때마다 이전에 입력했던 글자는 점(dot) 표시가 되어 알 수 없게 됩니다. 따라서 비밀번호를 입력할 때 사용됩니다.

또한 사진에 보이는 것처럼 이모티콘 등의 기능이 제한됩니다.

4) numberPassword

위와 마찬가지로 비밀번호를 입력할 수 있도록 입력되었던 문자가 점(dot)표시가 됩니다. 그러나 오직 숫자만 입력할 수 있는 키보드 자판이 나옵니다.

5) textEmailAddress

문자와 숫자를 입력할 수 있는 키보드 자판이 나옵니다. 또한 이메일을 입력할 수 있도록 일반적인 키보드 자판에 @가 표시됩니다.

또한 이모티콘의 기능은 제한됩니다.

6) phone

전화통화 사용에 필요한 숫자 및 기호를 입력할 수 있는 키보드 자판이 나옵니다.

전화통화에 사용하지 않는 이모티콘 등의 기능이 제한됩니다.

7) textPostalAddress

우편번호 형식의 문자열을 입력할 수 있는 키보드 자판이 나옵니다.

일반적인 키보드 자판과 동일한 자판의 모습이며, 추가적으로 우편번호를 입력하는 데 사용되는 요소들이 자판에 추가됩니다.

8) textMultiLine

일반적인 문자열 속성에서의 키보드 자판과 동일합니다. 그러나 여러 줄에 걸쳐 문자열을 입력할 수 있도록 합니다.

따라서 일반적인 키보드 자판에서 '다음'이라는 버튼이 줄 바꿈 기호로 변경됩니다.

9) time

시간 형식을 입력할 수 있도록 숫자를 입력하는 자판에 필요한 기호들이 추가됩니다.

기호 ':'이 추가된 것을 확인할 수 있습니다.

10) date

날짜 형식을 입력할 수 있도록 숫자를 입력하는 자판이 나옵니다.

기존 숫자 자판과 동일한 모습입니다.

11) number

숫자만 입력하는 키보드 자판이 나옵니다. 일반적인 숫자 키보드 자판이며, 숫자 이외에는 입력되지 않습니다.

12) numberSigned

숫자만 입력하는 키보드 자판이 나옵니다. 일반적인 숫자 키보드 자판이며, 숫자 이외에는 입력되지 않습니다.

13) numberDecimal

소수점이 있는 숫자를 입력할 수 있도록 숫자 입력 키보드 자판에 '.'이 추가된 자판이 나옵니다.

 

3. AutoCompleteTextView(오토 컴플리트 텍스트뷰)

EditText를 상속한 TextView이며, 텍스트를 입력할 때 자동완성 기능을 제공합니다.

 

4. MultiAutoCompleteTextView(멀티 오토 컴플리트 텍스트뷰)

마찬가지로 텍스트를 입력할 때 자동완성 기능을 제공하며, 여러 줄에 걸쳐 텍스트를 입력할 수 있습니다.

 

5. CheckedTextView(체크드 텍스트뷰)

TextView를 상속한 요소이며, 요소에 체크 박스, 혹은 라디오 버튼을 넣어서 선택이 가능하도록 설정할 수 있습니다.

아래 예시를 보면 텍스트뷰(TextView) 옆에 체크박스, 혹은 라디오 버튼 기능을 넣을 수 있는 것을 볼 수 있습니다.

'사과'를 예시로 들면 다음 코드처럼 입력하면 됩니다.

<CheckedTextView
        android:id="@+id/checkedTextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="사과"
        android:textSize="20sp"
        android:layout_margin="20dp"
        android:clickable="true"
        android:checked="true"
        android:checkMark="?android:attr/listChoiceIndicatorMultiple"
        />

먼저 클릭될 때 이벤트가 발생해야 하므로 clickable을 true로 설정합니다.

이후 checkMark를 설정해야 하는데, 이때 android:attr로 listChoiceIndicatorMultiple를 설정하면 체크 박스가 되고, listChoiceIndicatorSingle을 설정하면 라디오 버튼이 됩니다.

이것만으로는 클릭 이벤트가 발생하지 않습니다. 따라서 MainActivity에서 코드를 작성해주어야 합니다.

val checkedTextView1: CheckedTextView = findViewById(R.id.checkedTextView1)
        checkedTextView1.setOnClickListener(View.OnClickListener {
            if(checkedTextView1.isChecked==true) {
                checkedTextView1.setChecked(false)
            }
            else {
                checkedTextView1.setChecked(true)
            }
        })

이를 설정하면 정상적으로 작동하는 걸 볼 수 있습니다.

6. TextInputLayout(텍스트 인풋 레이아웃)

TextInputEditText, EditText를 자식으로 감싸는 레이아웃이며, hint가 사라진 상황에서 사용자가 텍스트를 입력할 때 유동적인 라벨을 보여줍니다.

아래 예시를 보면 hint가 텍스트를 입력할 때 위로 올라간 것을 볼 수 있습니다. 단지 hint 속성을 설정하면 됩니다.

또한 글자 수를 세는 기능도 있습니다. setCounterEnabled() 메서드를 이용해 카운터를 사용하거나 하지 않을 수 있습니다.

비밀번호로 설정해서 보이지 않게 하는 토글 버튼도 설정할 수 있습니다. 물론 이 경우 inputType이 textPassword로 설정되어야 제대로 작동합니다. 이때는 setEndIconMode()에서 END_ICON_PASSWORD_TOGGLE을 설정함으로써 사용할 수 있습니다.

[activity_main.xml]

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

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="input"
            android:textSize="30sp"
            android:inputType="textPassword"/>

    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

[MainActivity.kt]

package com.ssacproject.manytrial

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.textfield.TextInputLayout
import com.google.android.material.textfield.TextInputLayout.END_ICON_PASSWORD_TOGGLE

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

        val textinput: TextInputLayout = findViewById(R.id.textinput)
        textinput.isCounterEnabled = true
        textinput.endIconMode = END_ICON_PASSWORD_TOGGLE

    }
}

7. 마무리

이번 시간에는 Text 팔레트에 있는 모든 요소들에 대해서 알아보았습니다.

한 번 정리해두면 나중에 앱을 직접 개발할 때 유용할 것이기 때문에, 이번 기회에 한 번씩 정리하면 좋을 것 같습니다.

긴 글 읽어주셔서 감사합니다.