Android實現Material Design風格的設置頁面（滑動開關控件）

前言

本文連接 http://blog.csdn.net/never_cxb/article/details/50763271 轉載請註明出處

參考了這篇文章 Material Design 風格的設置頁面

筆者對原文章作了3個改進：

• 把勾選框 改爲了 Switch 的滑動開關，Material 更完全

• 替換後的 SwitchCompat 與整個 Preference 點擊事件聯動，保存到SharedPreferences

• 在頁面上方添加了 ToolBar，更貼近真實項目場景

項目源碼地址（歡迎star） https://github.com/studychen/SeeNewsV2

基礎：使用PreferenceScreen和PreferenceCategory

新建res/xml/preferences.xml 文件

note: 必定是 xml 目錄。不是layout目錄

<?xml version="1.0" encoding="utf-8"?><!--最新欄目的新聞-->
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout="@layout/preference_item" android:title="@string/title_activity_setting">

    <PreferenceCategory  android:layout="@layout/preference_category_widget" android:title="基本設置">
        <CheckBoxPreference  android:key="@string/save_net_mode" android:layout="@layout/preference_item" android:summary="僅在Wi-Fi環境下才本身主動載入圖片" android:title="省流量模式"/>
        <Preference  android:layout="@layout/preference_item" android:summary="刪除已緩存的文章內容及圖片" android:title="清空緩存" />
    </PreferenceCategory>

    <PreferenceCategory  android:layout="@layout/preference_category_widget" android:title="其它說明">
        <Preference  android:layout="@layout/preference_item" android:summary="V 1.0" android:title="當前版本號" />
        <Preference  android:layout="@layout/preference_item" android:summary="博客：http://blog.csdn.net/never_cxb" android:title="TomChen" />
    </PreferenceCategory>

</PreferenceScreen>

android:layout 實現 Material Design 佈局

上面

<PreferenceCategory
    android:layout="@layout/preference_category_widget"
    android:title="基本設置">
...
</PreferenceCategory>

使用android:layout=」@layout/preference_category_widget」改變 PreferenceCategory佈局。

注意 必定要使用系統的id android:id="@android:id/title" `

<?xml version="1.0" encoding="UTF-8"?
> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical"> <TextView  android:id="@android:id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="8dp" android:paddingTop="16dp" android:textColor="@color/primary" android:text="indroduce" android:textSize="14sp" /> </LinearLayout>

preference_item.xml 定製CheckBoxPreference佈局。也就是勾選框（或者滑動開關的佈局）

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:minHeight="?
android:listPreferredItemHeight" android:orientation="horizontal" android:padding="16dp"> <RelativeLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"> <TextView  android:id="@android:id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:fadingEdge="horizontal" android:singleLine="true" android:text="title" android:textSize="16sp" /> <TextView  android:id="@android:id/summary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@android:id/title" android:text="summary" android:textColor="#AAAAAA" android:textSize="14sp" /> </RelativeLayout> <LinearLayout  android:id="@android:id/widget_frame" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:orientation="vertical"/> </LinearLayout>

在PreferenceFragment載入設置佈局文件

public class SettingFragment extends PreferenceFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        addPreferencesFromResource(R.xml.preferences);
    }
}

這樣就實現了原文裏的效果圖：

把CheckBox換成開關控件SwitchCompat

改動原來xml的CheckBoxPreference

使用 android:widgetLayout 幫助咱們改動CheckBoxPreference佈局。
創建 layout/switch_layout.xml 文件

<!--此處代碼有bug，如下會說明怎樣修正-->
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOff="OFF" android:textOn="ON" />

在原來的CheckBoxPreference加上android:widgetLayout="@layout/switch_layout"

<CheckBoxPreference
    android:key="@string/save_net_mode"
    android:layout="@layout/preference_item"
    android:summary="僅在Wi-Fi環境下才本身主動載入圖片"
    android:title="省流量模式"
    android:widgetLayout="@layout/switch_layout" />

把控件是否選中保存到SharedPreferences中

設置 android:key="@string/save_net_mode"屬性

Java代碼中用getPreferenceManager().findPreference(「key的名稱」)來獲取

final CheckBoxPreference checkboxPref = (CheckBoxPreference) getPreferenceManager()
        .findPreference(getString(R.string.save_net_mode));

checkboxPref.setOnPreferenceChangeListener(new Preference.OnPreferenceChangeListener() {

    /** * @param preference The changed Preference. * @param newValue The new value of the Preference. * @return True to update the state of the Preference with the new value. */
    @Override
    public boolean onPreferenceChange(Preference preference, Object newValue) {
        boolean checked = Boolean.valueOf(newValue.toString());
        //保存到SharedPreferences中
        PrefUtils.setSaveNetMode(checked);
        Logger.d("Pref " + preference.getKey() + " changed to " + newValue.toString());
        return true;
    }
});

onPreferenceChange 沒有調用

在代碼加上了Log輸出，但是點擊開關控件，卻沒有反應。

筆者把android:widgetLayout="@layout/switch_layout"去掉
使用剛纔的CheckBox，點擊勾選或者取消勾選。發現可以保存到SharedPreferences

D/LoggerTag﹕ ║ Pref save_net_mode changed to false
 D/LoggerTag﹕ ║ Pref save_net_mode changed to true

改動xml的SwitchCompat佈局

添加 android:id="@android:id/checkbox"

添加

android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"

變成例如如下代碼

<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="false"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:textOff="OFF"
    android:textOn="ON" />

這樣點擊開關button，button開或者關，也能把true或false保存到SharedPreferences中

添加ToolBar

新增 layout/setting.xml

在res/xml/preferences.xml中添加ToolBar是不可能的
因爲它的父節點是PreferenceScreen

咱們新建一個 layout/setting.xml
在這個裏面使用Toolbar，如下的FrameLayout展現剛纔的設置界面

<?
xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical"> <!--Toolbar--> <android.support.v7.widget.Toolbar  android:id="@+id/toolbar_preference" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" /> <FrameLayout  android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

標題

使用 getFragmentManager().beginTransaction().replace(,).commit();

把上面的 FrameLayout替換爲SettingFragment extends PreferenceFragment

public class SettingActivity extends BaseActivity {

    @InjectView(R.id.toolbar_preference)
    Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_setting);
        ButterKnife.inject(this);
        initToolbar();
        getFragmentManager().beginTransaction().replace(R.id.content_frame, new SettingFragment()).commit();
    }


    /** * 初始化Toolbar */
    private void initToolbar() {
        mToolbar.setTitle(getResources().getString(R.string.title_activity_setting));
        mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
        setSupportActionBar(mToolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setHomeAsUpIndicator(R.drawable.ic_left_back);
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
    }

    /** * 選項菜單 */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }
        return false;
    }
}

經過 actionBar.setHomeAsUpIndicator(R.drawable.ic_left_back);
添加了一個返回的白色箭頭

經過 android.R.id.home獲取白色箭頭的點擊事件，返回上一個Activity

本文連接 http://blog.csdn.net/never_cxb/article/details/50763271 轉載請註明出處

項目源碼地址（歡迎star） https://github.com/studychen/SeeNewsV2

參考文章

• Value from CheckBoxPreference is not retained
• Material Design 風格的設置頁面
  
• Customizing CheckBoxPreference via android:widgetLayout
• Creating a Preference Screen with support (v21) Toolbar