머터리얼 디자인 - 텍스트필드 공부하기(1)

Material Design에 대해서 공부를 좀 해보려고한다.

일단 오늘은 텍스트필드에 대해서 공부를 해보겠다.

텍스트필드는 우리가 흔히 쓰는 EditText와 같다.

그런데 비주얼적인 효과를 더 낼수가 있어서 프로젝트를 수행할 때 매우 큰 도움이 될 것 같다.

https://material.io/components/text-fields/android#using-text-fields

오늘 기술할 내용은 위 링크에 있는 내용들을 번역한 내용이니 참고하기 바란다.

우선 머터리얼 디자인에서 EditText를 구현할 때는 TextInputLayout과 TextInputEditText를 같이 사용해야한다.

app:startIconDrawable을 통해서 텍스트필드 왼쪽에 아이콘을 넣을 수 있다.

오른쪽에 아이콘을 넣으려면 app:endIconMode="password_toggle"를 사용한다.

그리고 요즘에 비밀번호창에 입력한 내용을 가리게하는 앱들이 많은데 머터리얼 디자인을 활용하면 쉽게 구현이 가능하다.

한 번에 지울 수 있는 기능도 지원한다.

아이콘을 커스텀하고 싶을 때는 위 화면처럼 설정을 바꿔줘야한다.

코드로 커스텀을 할 시에는 위 리스너를 활용하면된다.

추후에 이 리스너들을 활용해서 아이디, 비밀번호 유효성 검사를 해보도록 하겠다.

드랍다운 메뉴도 텍스트필드로 구현이 가능하다.

이건 공식페이지에 오류가 좀 있어서 내 코드로 예시를 보여주겠다.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
    app:layout_constraintTop_toBottomOf="@+id/no1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">
    <AutoCompleteTextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
        />
</com.google.android.material.textfield.TextInputLayout>

위 코드는 드롭다운 메뉴를 표현한 xml 코드다.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAppearance="?attr/textAppearanceSubtitle1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

그리고 간단하게 위 코드처럼 list_item.xml 파일을 만들어준다.

드롭다운 메뉴의 각각의 메뉴에 해당하는 xml이다.

class MainActivity : AppCompatActivity() {


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

        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this,
            R.layout.activity_main)

        val viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        binding.lifecycleOwner = this
        binding.viewModel = viewModel

        val items = listOf("Material", "Design", "Components", "Android")
        val adapter = ArrayAdapter(this, R.layout.list_item, R.id.textView ,items)
        (binding.textField?.editText as? AutoCompleteTextView)?.setAdapter(adapter)

        }

}

그리고 메인액티비티의 코드다.

items라는 리스트를 만들어준다. (드롭다운 메뉴의 각각에 해당하는 글자들이다.)

ArrayAdpater를 생성해준다.

공식홈페이지에서는 ArrayAdapter(this, R.layout.list_item, items) 로 만들어주면 된다고하는데 그렇게하면 에러가 난다.

꼭! list_item.xml에 텍스트뷰의 id를 ArrayAdapter 만들어줄 때 넣어주어야한다.

그다음에 setAdapter(adapter)를 해주면 된다.

결과는 위 화면과 같다.

Share: