android关机风格,Android实现Material Design风格的设置页面（滑动开关控件）

前言

笔者对原文章做了3个改进：

把勾选框 改成了 Switch 的滑动开关，Material 更彻底

替换后的 SwitchCompat 与整个 Preference 点击事件联动，保存到SharedPreferences

在页面上方添加了 ToolBar，更贴近真实项目场景

基础：使用PreferenceScreen和PreferenceCategory

新建res/xml/preferences.xml 文件

note: 一定是 xml 目录。不是layout目录

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout="@layout/preference_item"

android:title="@string/title_activity_setting">

android:title="基本设置">

android:layout="@layout/preference_item"

android:summary="仅在Wi-Fi环境下才自己主动载入图片"

android:title="省流量模式"/>

android:summary="删除已缓存的文章内容及图片"

android:title="清空缓存" />

android:title="其它说明">

android:summary="V 1.0"

android:title="当前版本号" />

android:summary="博客：http://blog.csdn.net/never_cxb"

android:title="TomChen" />

android:layout 实现 Material Design 布局

上面

android:layout="@layout/preference_category_widget"

android:title="基本设置">

...

使用android:layout=”@layout/preference_category_widget”改变 PreferenceCategory布局。

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

>

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@color/white"

android:orientation="vertical">

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" />

preference_item.xml 定制CheckBoxPreference布局。也就是勾选框(或者滑动开关的布局)

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:minHeight="?

android:listPreferredItemHeight"

android:orientation="horizontal"

android:padding="16dp">

android:layout_height="wrap_content"

android:layout_weight="1">

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" />

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" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right|center_vertical"

android:orientation="vertical"/>

在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 文件

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textOff="OFF"

android:textOn="ON" />

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

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: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"?

>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:minHeight="?attr/actionBarSize" />

android:layout_width="match_parent"

android:layout_height="match_parent" />

标题

使用 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

參考文章