前言

本文链接 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

參考文章

Android实现Material Design风格的设置页面(滑动开关控件)的更多相关文章

  1. Android开发实战之拥有Material Design风格的侧滑布局

    在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也 ...

  2. 创建Material Design风格的Android应用--应用主题

    本人全部文章首先公布于个人博客,欢迎关注,地址:http://blog.isming.me 昨天正式公布了android 5,同一时候android developer站点也更新了,添加了创建Mate ...

  3. Material Design风格登录注册

    本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...

  4. 自定义 Material Design风格的提示框

    关闭 自定义 Material Design风格的提示框 2016-04-24 10:55 152人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 其实在14年谷歌 ...

  5. Material Design风格的水波涟漪效果(Ripple Effect)的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...

  6. [原创]自定义view之:快速开发一款Material Design风格的dialog的开源项目MDDialog

    随着google开始主导Material Design风格的设计,越来越多的app开始使用Material Design风格来设计自己的UI.虽然在Android Studio中集成了多种快速开发框架 ...

  7. ANDROID L——Material Design详解(UI控件)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  8. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  9. [转]ANDROID L——Material Design详解(动画篇)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

随机推荐

  1. Python学习笔记(一):Python基础学习

    总结的内容: 1.变量的命名 2.脚本的注释 3.运算符 4.用户输入语句 一.变量的命名 1.变量用于引用在程序中可能会变化的值.它们被称为变量是因为它们可能引用存储在内存中的不同的值. 2.变量的 ...

  2. Spring Batch 批处理框架介绍

    前言 在大型的企业应用中,或多或少都会存在大量的任务需要处理,如邮件批量通知所有将要过期的会员,日终更新订单信息等.而在批量处理任务的过程中,又需要注意很多细节,如任务异常.性能瓶颈等等.那么,使用一 ...

  3. IO流-递归删除带内容的目录

    /* * 需求:递归删除带内容的目录 * * 目录:demo * ------------------------------------------------------------------- ...

  4. cocos2d-x项目101次相遇:使用触摸事件移动 精灵

    cocos2d-x 101次相遇 / 文件夹  1   安装和环境搭建 -xcode  2   Scenes , Director, Layers, Sprites 3   建立图片菜单  4   在 ...

  5. 四种DCOM错误的区别,0x80080005 0x800706be 0x80010105 0x

    四种DCOM错误的区别Differences between the following DCOM error 0x800800050x800706be0x800101050x800706ba     ...

  6. matlab进行地图仪的绘制

    % 绘制地球仪,并标出我们的位置 cla reset; load topo; [x,y,z] = sphere();%45是画出来的球面的经纬分面数 s = surface(x,y,z,'FaceCo ...

  7. 安装arcgis10.5不能启动服务的解决方案转

    柚子的二分口粮地 来自:http://www.cnblogs.com/youzi-xuchongyou/p/7218422.html 安装arcgis10.5不能启动服务的解决方案 最近由于公司需要, ...

  8. python测试开发django-6.模板中include使用

    前言 当我们打开一个网站的时候,在打开不同的页面时候,会发现每个页面的顶部.底部内容都差不多,这样就可以把这些公共的部分,单独抽出来. 类似于python里面的函数,把公共部分写成函数,然后调用就行了 ...

  9. 使用addChildViewController手动控制UIViewController的切换

    addChildViewController If the new child view controller is already the child of a container view con ...

  10. 如何优化JAVA代码

    通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化.一般有两种方案:即优化代码或更改设计方法.我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能 ...