博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android实现Material Design风格的设置页面(滑动开关控件)
阅读量:6236 次
发布时间:2019-06-22

本文共 6215 字,大约阅读时间需要 20 分钟。

前言

本文链接 转载请注明出处

參考了这篇文章

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

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

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

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

blog.csdn.net/never_cxb

项目源码地址(欢迎star)

基础:使用PreferenceScreen和PreferenceCategory

新建res/xml/preferences.xml 文件

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

android:layout 实现 Material Design 布局

上面

...

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

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

>

<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布局。也就是勾选框(或者滑动开关的布局)

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); }}

这样就实现了原文里的效果图:

blog.csdn.net/never_cxb

把CheckBox换成开关控件SwitchCompat

改动原来xml的CheckBoxPreference

使用 android:widgetLayout 帮助我们改动CheckBoxPreference布局。

建立 layout/switch_layout.xml 文件

在原来的CheckBoxPreference加上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"

变成例如以下代码

这样点击开关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

本文链接 转载请注明出处

项目源码地址(欢迎star)

參考文章

你可能感兴趣的文章
Jetty错误:java.lang.IllegalStateException: Form too large 270468>200000的问题解决
查看>>
Linux多线程2-1---创造新线程
查看>>
菜鸟学Linux 第001天笔记 基础理论知识
查看>>
Python学习(25)--面向对象编程2
查看>>
BLE Hacking:使用Ubertooth one扫描嗅探低功耗蓝牙
查看>>
JAVA入门[3]—Spring依赖注入
查看>>
开黑吗?VRstudio推出八人系统的VR线下竞技场
查看>>
备份和导入Outlook 2016 电子邮件签名
查看>>
自建企业网盘异军突起,“私人定制”优势面面观
查看>>
HttpUrlConnection发送url请求(后台springmvc)
查看>>
Win8.1 远程桌面 凭据无法工作
查看>>
如何HACK无线家用警报器?
查看>>
云栖科技评论第24期:美国军方拟与IBM合作建专有云
查看>>
Hadoop2.7实战v1.0之JVM参数调优
查看>>
100多个经典常用的jQuery插件大全实例演示和下载
查看>>
linux中top命令详解
查看>>
cgi fastcgi php-cgi php-fpm
查看>>
memcache与memcached的区别与安装
查看>>
第三天 入口文件index.php 02
查看>>
tomcat 日志log4j,slf4j,logback冲突
查看>>