築基篇:設置界面的開發利器Preference Library,瞭解一下~

語言: CN / TW / HK

highlight: vs theme: devui-blue


持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第13天,點擊查看活動詳情

接下來會對Preference Library官方庫進行一個系列講解,本篇文章是Preference Library系列的第二篇,主要是介紹Preference Library進階使用:如何動態操作Preference組件,自定義一些設置等。

歷史文章

練氣篇:設置界面的開發利器Preference Library,瞭解一下~

設置項分組

這個比較簡單,在日常開發中,很多設置項都是分組的,某幾個設置項屬於這個分類,另幾個設置項屬於那個分類,這個直接通過在xml中配置PreferenceCategory即可:

```xml

<PreferenceCategory
    app:key="fenlei1"
    app:title="分類1">
    <SwitchPreferenceCompat
        app:icon="@drawable/ic_launcher_background"
        app:key="display"
        app:summary="顯示一些內容"
        app:title="顯示" />

</PreferenceCategory>

<PreferenceCategory
    android:layout_width="match_parent"
    app:key="fenlei2"
    app:title="分類2">
    <CheckBoxPreference
        app:key="select"
        app:summary="請選擇一些內容"
        app:title="選擇" />

    <ListPreference
        app:entries="@array/list"
        app:entryValues="@array/list"
        app:key="list"
        app:summary="下面是一個列表"
        app:title="列表" />
</PreferenceCategory>

```

我們看下顯示效果:

image.png

動態控制Preference設置項顯隱

設置界面中很容易碰到這樣一個場景:某個設置項滿足一定條件再進行顯示,默認隱藏該設置項,接下來看下如何實現。

在xml中通過app:isPreferenceVisible屬性設置顯,我們就設置該屬性為 false,默認隱藏設置項:

```xml

<SwitchPreferenceCompat
    app:icon="@drawable/ic_launcher_background"
    app:key="display"
    app:isPreferenceVisible="false"
    app:summary="顯示一些內容"
    app:title="顯示" />

```

然後在代碼中根據app:key的屬性值動態拿到SwitchPreferenceCompat這個設置項:

kotlin override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) { setPreferencesFromResource(R.xml.settings, rootKey) findPreference<SwitchPreferenceCompat>("display")?.let { //根條件動態判斷是否顯示該設置項 it.isVisible = true/false } }

核心是調用findPreference()方法拿到設置項,然後調用isVisible屬性動態控制顯隱。


動態更新摘要summary

這個摘要指的就是:

image.png

普通摘要更新

直接調用Preferenc.setSummary()更新即可,比如我們常用的一個設置項,顯示當前應用的版本號:

xml <Preference app:key="version" app:title="版本" /> kotlin findPreference<Preference>("version")?.let { it.summary = "5.0.122.004" }

看下顯示效果:

1665759649128.png

SimpleSummaryProvider更新摘要

上面更新的方式很簡單,如果是EditTextPreferenceListPreference這種點擊會彈出彈窗呢。比如我想使用EditTextPreference保存的文本顯示在摘要中,並在保存的文本發生改變時,動態更新摘要的顯示。

這個直接使用EditTextPreference自帶的SimpleSummaryProvider即可,默認開關時關閉的,我們可以通過xml中配置屬性app:useSimpleSummaryProvider="true"即可:

xml <EditTextPreference app:key="version" app:summary="Not Set" app:title="版本" app:useSimpleSummaryProvider="true" />

我們看下顯示效果:

  • 當前默認顯示的文本為明天更好

image.png

  • 點擊設置項彈出彈窗,編輯文本

image.png

  • 點擊確認後,摘要文本會被動態更新

image.png

同理ListPreference也提供了SimpleSummaryProvider,也需要手動開啟,當點擊設置項,觸發顯示彈窗列表並點擊某條數據時,就會更新設置項的摘要

image.png

image.png

自定義SummaryProvider

有這樣一個場景,比如我們想要EditTextPreference摘要動態顯示保存的文本的長度,而不是默認的文本內容,這個該怎麼實現呢?很簡單,自定義一個SummaryProvider即可。

xml <EditTextPreference app:key="version" app:summary="Not Set" app:title="版本" />

自定義SummaryProvider對象,每當點擊設置項從彈窗中編輯文本時,點擊確認dismiss彈窗後,都會觸發該對象的執行,進而將該對象方法返回的文本內顯示到摘要上。

kotlin findPreference<EditTextPreference>("version")?.let { it.summaryProvider = Preference.SummaryProvider<EditTextPreference> { etp -> return@SummaryProvider "文本內容長度為:" + etp.text?.length } }

我們看下顯示效果:

image.png

image.png

一條非常非常非常重要的警告

切記,千萬不要在自定義的SummaryProvider中調用getSummary()方法,否則就會造成棧溢出的異常,因為getSummary()又會觸發自定義的SummaryProvider的調用。

自定義EditTextPreference編輯彈窗

從前面已經知道,當點擊EditTextPreference對應的設置項,就會彈出一個編輯文本的彈窗:

image.png

那如果我們想要對這個輸入編輯框進行一個定製化操作:限制只能輸入數字、文本內容為空時顯示默認hint、限制可輸入的字符數量等等,就可以通過setOnBindEditTextListener{}實現:

kotlin findPreference<EditTextPreference>("version")?.let { it.setOnBindEditTextListener { et: EditText -> //設置默認hint et.setHint("請輸入一些數字") } }
通過setOnBindEditTextListener{}我們就拿到這個輸入編輯框的實例對象EditText,拿到這個我們豈不是想幹啥就能該幹啥哈哈。

我們看下上面例子的顯示效果:

image.png

顯示了默認設置的Hint提示。

總結

文本主要是從以下四個方法對Preference Library進行了進一步的講解:

  • 設置項分組:使得不同設置項間界限分明,相同設置項之間更加"親密";

  • 動態控制Preference設置項:核心就是調用findPreference()通過app:key拿到xml中配置的設置項的引用,然後就可以進行任何動態操作;

  • 動態更新摘要:通過更新摘要的三種方式,更好的定製化摘要的顯示,提高開發者的效率;

  • 自定義EditTextPreference編輯彈窗:更好的根據業務需求定製化輸入編輯框,滿足你方方面面的需求;

希望本篇能對你有所幫助,如果感覺還不錯,可以點個贊支持下。