［Android］AndroidX Preference Library で作れる設定一覧

# はじめに

AndroidX Preference Library でどのような設定画面が実装できるのかまとめが欲しかったので作成しました。基本的な使い方は[こちら](https://qiita.com/kaleidot725/items/f9ce2fbbf479d2a9f2bb)にまとめていますので参考にしてみてください。

| 要素                      | 説明                                                 | 見た目                                                       |
| ------------------------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| Preference                | Fragmentへの遷移や Intent を発行するときに利用する。 | ![navigate child preference.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/84183504-6930-7d6b-2eca-0fd373ae1d5d.gif)|
| CheckBoxPreference        | チェックボックスで値を設定する。                     | ![chekcbox.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/807647e9-4dcb-5bb6-daf3-11321541f4d5.gif) |
| DropDownPreference        | ドロップダウンリストから選択する。                   | ![dropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/5492fc3c-eae6-3dcc-f7db-e476511cdc93.gif)|
| ListPreference           | 指定したリストをダイアログで選択する                 | ![list.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/8887442d-c01b-0e00-9750-aac6531d8ceb.gif)  |
| MultiSelectListPreference | 設定したリストをダイアログで複数選択する。           | ![multlist.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/7d036e0f-7821-2b5a-3003-40c23873ba7c.gif)      |
| SeekBarPreference         | シークバーにて値を指定する                           | ![seekbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/fbd4e6f4-23e3-4089-5cad-9b3a242e781a.gif)                  |
| SwitchPreferenceCompat    | スイッチで値を設定する。                             |![switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/1305e5a9-757e-bcf4-7465-8f49c73fc7c2.gif)           |
| EditTextPreference        | 文字入力ダイアログにて文字列を設定する。             |![edittext.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/595a3d4e-3529-3ba3-c900-2c3944c7d488.gif)  |
# Preference

Preference は設定画面にて他の Fragment への遷移、 Intent の発行する時に使える。

### Fragment に遷移する

Preference をクリックしたときに他の Fragment に遷移することができます。
遷移するにはまず`app:Fragment`に Fragment を指定する必要があります。

```xml
    <Preference
        app:fragment="jp.kaleidot725.sample.setting.ChildPreferenceFragment"
        app:icon="@mipmap/ic_launcher_round"
        app:key="childPreferenceFragment"
        app:title="Navigate Child Preference" />
```

`app:fragment` を指定すると`PreferenceFragmentCompat.OnPreferenceStartFragmentCallback` を通して指定した Fragment のクラス情報が渡されるようになります。なので渡された情報から Fragment を生成して遷移してやります。

```kotlin
class MainActivity : AppCompatActivity(R.layout.activity_main), PreferenceFragmentCompat.OnPreferenceStartFragmentCallback{
    override fun onPreferenceStartFragment(caller: PreferenceFragmentCompat, pref: Preference): Boolean {
        val fragment = supportFragmentManager.fragmentFactory.instantiate(classLoader, pref.fragment).apply {
            arguments = pref.extras
            setTargetFragment(caller, 0)
        }
        supportFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment).addToBackStack(null).commit()
        return true
    }
}
```

そうすると次のように Fragment に遷移できるようになります。遷移する Fragment は特に制約などありませんので Preference を使った Fragment を実装して遷移すれば設定画面の階層を定義できます。

![navigate child preference.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/2b6a3813-6525-caa7-79d2-08494a7d757a.gif)

### Intent を発行する

Preference をクリックしたときに Intent を発行することもできます。
次のように Intent を指定すれば、特定の Web ページを開くことができます。

```xml
    <Preference
        app:icon="@mipmap/ic_launcher_round"
        app:key="intent"
        app:title="Google Web Search">
        <intent
            android:action="android.intent.action.VIEW"
            android:data="http://www.google.com" />

    </Preference>
```

![navigate web search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/d02b69a1-e299-850b-f7f3-763492ce87cd.gif)

## CheckBoxPreference

CheckBoxPreference を使えば CheckBox を表示できます。
CheckBox なので true と false の ブール値を設定できます。

```xml
    <CheckBoxPreference
        app:icon="@mipmap/ic_launcher"
        app:key="checkBoxPreference"
        app:title="CheckBox" />
```

![chekcbox.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/b45feca2-913a-8469-f9bb-2a650ea93f76.gif)

## SwitchPreferenceCompat

CheckBoxPreference を使えば Switch を表示できます。
Switch なので true と false の ブール値を設定できます。

```xml
    <SwitchPreferenceCompat
        app:icon="@mipmap/ic_launcher_round"
        app:key="switchPreference"
        app:summary="Enable XXXX-XXXX-XXXX"
        app:title="Switch" />
```

![switch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/8142a7d3-52a3-d442-85ce-936f7603f66b.gif)

## DropDownPreference

DropDownPrefrence を使えば、次のようなリストのダイアログを表示できます。
リストに表示する項目の名称は `entries` 項目の値は `entryValues` にセットします。

```xml
    <DropDownPreference
        app:entries="@array/entries"
        app:entryValues="@array/entryValues"
        app:icon="@mipmap/ic_launcher"
        app:key="dropDownPreference"
        app:title="DropDownPreference"
        app:useSimpleSummaryProvider="true" />
```

`entries` や `entryValues` にセットする値は `values/array.xml` にあらかじめ定義しておく必要があります。

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="entries">
        <item>a</item>
        <item>b</item>
        <item>c</item>
        <item>d</item>
        <item>e</item>
        <item>f</item>
        <item>g</item>
        <item>h</item>
    </string-array>

    <string-array name="entryValues">
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
        <item>6</item>
        <item>7</item>
        <item>8</item>
    </string-array>
</resources>
```

![dropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/710d9f9f-182e-8005-303d-01d4d7bde2a5.gif)

## ListPreference

ListPreference を使えば、次のようなリストのダイアログを表示できます。
リストに表示する項目の名称は `entries` 項目の値は `entryValues` にセットします。

```xml
    <ListPreference
        app:entries="@array/entries"
        app:entryValues="@array/entryValues"
        app:icon="@mipmap/ic_launcher"
        app:key="listPreference"
        app:title="ListPreference"
        app:useSimpleSummaryProvider="true" />
```

`entries` や `entryValues` にセットする値は `values/array.xml` にあらかじめ定義しておく必要があります。

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="entries">
        <item>a</item>
        <item>b</item>
        <item>c</item>
        <item>d</item>
        <item>e</item>
        <item>f</item>
        <item>g</item>
        <item>h</item>
    </string-array>

    <string-array name="entryValues">
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
        <item>6</item>
        <item>7</item>
        <item>8</item>
    </string-array>
</resources>
```

![list.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/878b5a69-9aae-9662-1511-31b0589f7691.gif)

## MultiSelectListPreference

MultiSelectListPreference を使えば、次のような複数選択できるリストのダイアログを表示できます。
リストに表示する項目の名称は `entries` 項目の値は `entryValues` にセットします。

```xml
    <MultiSelectListPreference
        app:entries="@array/entries"
        app:entryValues="@array/entryValues"
        app:icon="@mipmap/ic_launcher"
        app:key="multiSelectListPreference"
        app:title="MultiSelectListPreference" />
```

`entries` や `entryValues` にセットする値は `values/array.xml` にあらかじめ定義しておく必要があります。

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="entries">
        <item>a</item>
        <item>b</item>
        <item>c</item>
        <item>d</item>
        <item>e</item>
        <item>f</item>
        <item>g</item>
        <item>h</item>
    </string-array>

    <string-array name="entryValues">
        <item>1</item>
        <item>2</item>
        <item>3</item>
        <item>4</item>
        <item>5</item>
        <item>6</item>
        <item>7</item>
        <item>8</item>
    </string-array>
</resources>
```

![multlist.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/2ef0e978-fce1-46b3-d017-70962c76e40e.gif)

## SeekBarPreference

SeekBarPrefrence を使えば次のような SeekBar を表示できます。
SeekBar の最大値は `android:max` 最小値は `app:min` でセットします。

```xml
    <SeekBarPreference
        app:icon="@mipmap/ic_launcher"
        app:key="seekBarPreference"
        android:max="99"
        app:min="1"
        app:title="SeekBarPReference" />
```

![seekbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/d851e41d-1744-94fa-0ec3-666658ff6510.gif)


## EditTextPreference

EditTextPreference を使えば次のような文字を入力するダイアログを表示できます。

```xml
    <EditTextPreference
        app:icon="@mipmap/ic_launcher"
        app:key="editTextPreference"
        app:title="EditText"
        app:useSimpleSummaryProvider="true" />
```

![edittext.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/2918ba59-2129-437a-3821-d32ea1ae7940.gif)

# おわりに

というように基本的な設定画面を作るためのものは用意されていて、もし独自の設定画面が必要であれば Fragment を実装できるような仕組みになっています。なので AndroidX Preference Library を使えば設定画面の作成で困ることはなさそうです。