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

最新推荐文章于 2024-08-25 03:27:19 发布
置顶 最新推荐文章于 2024-08-25 03:27:19 发布
阅读量1.6w 收藏 36
点赞数 4
分类专栏： android 项目实战 文章标签： android 设计 switch 设置 Preference
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/never_cxb/article/details/50763271
版权

前言

本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处

参考了这篇文章 Material Design 风格的设置页面

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

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

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

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

blog.csdn.net/never_cxb

项目源代码地址（欢迎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);
    }
}

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

blog.csdn.net/never_cxb

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

这样点击开关按钮，按钮开或者关，也能把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滑动组件,Android滑动屏幕的控件(很实用)
weixin_39539764的博客
05-25 1453
看效果图:手指可以滑动图片切换到一个图片，这种放到App的帮助页面是很合适的，然后也适合图片轮播图等等场合我们来看一下Activity中怎么调用这个控件:publicclassSnapToScreenActivityextendsActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCr...
Android 使用Material Design实现滑动菜单
大山喵写博客的地方
08-20 1244
DrawerLayout布局 　　DrawerLayout是Design库中实现滑动菜单效果的支撑性布局，它允许放入两个直接子控件，第一个子控件是主屏幕中的内容，第二个子控件是滑动菜单中显示的内容。我们在activity_main.xml文件中使用DrawerLayout布局如下： <?xml version="1.0" encoding="utf-8"?> <android...
安卓滑动控件集
12-28
不知道说什么，就简单说一下吧，里面就是一些滑动的控件，在安卓当中很实用，也有滑动的TAB标签，就是最近找了一些资料的总结吧，也拿来分享一下。大家可以下载下来看一下学习也不错的。
android安卓可滑动控件
05-30
android安卓可滑动控件
android实现设置界面
最新发布
weixin_35021193的博客
08-25 96
我整理的一些关于【XML】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/Hpqqk2Android实现设置界面 在现代应用程序中，设置界面是一个不可缺少的组件。无论是在社交应用、游戏还是其他类型的应用，设置界面都为用户提供了自定义体验的机会。在这篇文章中，我们将探讨如何在 ...
Android开发中Material Design风格设置页面的实践
Eafrey的博客
08-29 720
创建步骤为： 1. 新建res/xml/preferences.xml 文件<?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" android:layout="@layout/preference_item"
Android 自定义滑动控件
cxmfzu的博客
03-03 1062
简介
android-material-design
11-21
在Android应用中采用Material Design，可以使用一系列自定义控件来实现这一设计风格。这些控件通常包括但不限于： 1. **FloatingActionButton**：悬浮操作按钮，一个圆形的按钮，常位于屏幕边缘，用于触发主要的或...
android UI控件MaterialDesign
02-01
在这个"android UI控件MaterialDesign"的主题中，我们将深入探讨如何在Android应用中使用Material Design组件来提升UI的质量。 1. **Material Design组件库** Google为开发者提供了`Material Components for ...
MaterialDesign:Android UI 控件库
06-01
MaterialDesign 是一个基于 Google 的 Material Design 设计规范的 Android 用户界面控件库，它为开发者提供了丰富的组件，以便创建遵循现代设计风格的应用程序。Material Design 是一套系统性的设计语言，旨在提供...
Android-一个MaterialDesign风格的Preference
08-13
"Android-一个MaterialDesign风格的Preference"指的是将标准的Android `Preference`组件与Material Design规范相结合，以创建更现代化、美观的设置界面。在Android开发中，`Preference`类用于构建用户设置屏幕，它...
android左右滑动的选择控件
07-15
android实现的可左右滑动的选择控件
安卓开发-Android滑动选择控件WheelView，双级联动，有图有真相.zip
11-17
安卓开发-Android滑动选择控件WheelView，双级联动，有图有真相
android开发之设置界面的设计
12-02
我自己做android开发找来的实例，有很不错的效果，拿来与大家分享。
materialdesign Floatingactionbutton 上下联动
04-13
另有专门博客进行介绍Floatingactionbutton上下联动http://blog.csdn.net/Applicaton/article/details/51144604
Android UI开发——Material Design界面设计【详细】
arraiy的专栏
07-03 1968
转自：http://colachan.com/post/3416 找了很多Material Design的资料，终于的到一篇比较靠谱的、能看懂的，我认为非常有用的学习资料，就像他们说的，只要你按Material Design的标准来设计，你的APP就不难看，希望你能看完本文，图文展示，通俗易懂，相信是所有Android开发者的宝贵设计干货！ 自从material design发布以来，可乐橙就在一直收集相关素材与资源，研究别人的作品。这套设计风格非常鲜明，带有浓郁的Google式严谨和理性哲学，深得
推荐：Material Animated Switch —— 超炫的安卓开关组件
gitblog_00071的博客
05-14 368
推荐：Material Animated Switch —— 超炫的安卓开关组件 项目地址:https://gitcode.com/glomadrian/material-animated-switch 1、项目介绍 Material Animated Switch 是一个基于Android的开源项目，它提供了一个极具创意的开关组件，灵感来源于Google的Material Design风格，并带...
Android 左右滑动 控件
精益求精
08-17 801
main.xml:  Java代码          android:orientation="vertical" android:layout_width="fill_parent"       android:layout_height="fill_parent
Android（滑动控件RecyclerView）
只想离想象更近一点
06-25 557
1、在build.gradle中添相应的依赖库（如图）： compile 'com.android.support:recyclerview-v7:23.4.0' 2、Fruit.java(实类)//定义了一个水果的实类 public class Fruit { private int imageView; private String textView; publi
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值