Kotlin Android Fundamentals: Design for everyone

RTL(Right to Left) 지원

나는 잘 모르는데 다국적 서비스에서 각 나라마다 언어가 다르니 특정 언어들은 오른쪽에서 왼쪽으로 읽는 언어가 존재하는 것 같다. 이에 맞춰서 앱에서도 언어 설정을 해주면 필요로 한 기능인 것 같다. 

 

1. manifest 설정

manifest application에서 supportsRtl을 True로 바꾸어준다. 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android.marsrealestate">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

 

2. layout xml파일로 가서 

지구 모형을 눌러주면 

 

preview Right to Left를 미리 볼 수 있다. 

 

3. left Right가 아닌 start end로 변경

Left, RIght는 글자의 순서가 바뀌었어도 화면이 크게 바뀌지 않았다.

이를 고치기 위해서는 Start와 End를 사용해야한다. 

 

Left and Right를 Start and End로 바꾸어 주었다. 

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

 

ImageView's의 layout_marginLeft를 layout_marginStart로 변경가능하다. 이 움직임은 마진을 위치에 맞게 정확한 곳에 움직일 수 있다. 

 

해당 설정을 통해서 Left에서 Right로 변경되게 manifest를 설정해줄 수 있다. 

 

layout을 눌러서 exclude를 눌러준다.

4. 각 나라에 맞추어서 strings.xml을 설정 파일을 만들 수 있다.

 

위의 DesignView에서 특정 나라를 선택해서 볼 수 있다. 

 

 

2. Scan for Accessibility

Accessibility Scanner는 앱에 접근하기 가장 좋게 만드는 방법 중 하나이다. 당신의 타겟 디바이스의 보이는 화면을 스캔할 수 있고 개선을 제안할 수 있다. 

 

가상머신을 사용한 후 PlayStore에 가보면 Accessibility Scanner를 확인할 수 있다. 

 

해당 앱의 설정에 가서 Use Service를 켜주어야 한다. 

모든 권한을 승인해준 후 

 

우리의 앱을 실행시켜주면 됩니다. 

 

앱을 실행 후 기록을 눌러주면 해당 앱에 대한 정보를 확인할 수 있습니다. 

 

3. 야간 모드

style.xml의 AppTheme에가서 Light를 DayNight로 변경하면 

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

 

onCraete에 아래와 같은 함수를 통해 전체적으로 변경할 수 있다. 

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

 

4. Talkback

Talkback은 시각장애인을 위해 스마트폰 화면 상황을 읽어주는 기능이다. 이를 사용하기 위해서는 아래와 같은 앱이 설치되어 있어야 한다. 

play.google.com/store/apps/details?id=com.google.android.marvin.talkback

Android 접근성 도구 모음 - Google Play 앱

아래의 옵션을 설정해주고 앱을 실행 시키면 이미지에 대한 짧은 설명을 들을 수 있다. 

android:contentDescription="이미지들 이다"

 

edit Text field에 hint를 추가할 수 있다. 

 

 

chip

Chip은 ChipDrawble 주위의 thin View wrapper이다. 레이아웃과 draw의 로직이 포함된다. 

 

Add Chips

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

여러 개의 칩 중 하나를 선택하여 제출하기 위해서는 singleSelection을 true로 설정해준다. 

 

region.xml을 만들어주어서 각 chip에 대한 설정도 해주었다. 

<com.google.android.material.chip.Chip 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"
    style="@style/Widget.MaterialComponents.Chip.Choice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:checkedIconVisible="true"
    app:chipBackgroundColor="@color/selected_highlight"
    tools:checked="true" />

또한 추가로 선택되었을 때의 색도 설정에 넣어주어야한다. 

 

kotlin 코드에서 사용하기

당연히 칩들의 pick이 바뀔때마다 밑에 있는 정보들도 바껴야 해서 예제에서는 Observer 패턴을 사용하고 있다. 

 

 viewModel.regionList.observe(viewLifecycleOwner, object : Observer<List<String>> {
            override fun onChanged(data: List<String>?) {
                data ?: return
                val chipGroup = binding.regionList
                val inflator = LayoutInflater.from(chipGroup.context)
                val children = data.map { regionName ->
                    val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
                    chip.text = regionName
                    chip.tag = regionName
                    chip.setOnCheckedChangeListener { button, isChecked ->
                        viewModel.onFilterChanged(button.tag as String, isChecked)
                    }
                    chip
                }
                chipGroup.removeAllViews()

                for (chip in children) {
                    chipGroup.addView(chip)
                }
            }
        })

 

코드를 보면 우선 regionList가 변경될 때마다를 인식하기 위해 observe를 사용하고있다. observer안에 익명 함수에서는 변경된 정보로 값을 바꾸어주고 클릭되었을 때의 리스너를 만들어주고 있습니다. 

 

map 함수를 통해 반복을 진행하고 있습니다. 그리고 람다함수를 사용해서 코드를 작성하고 있습니다.