Android开发中Material Design风格设置页面的实践

原创 2016年08月29日 20:20:53

效果图为如下
创建步骤为:
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:title="设置"
    >

    <PreferenceCategory
        android:layout="@layout/preference_category_widget"
        android:title="预留设置分级标题">
        <CheckBoxPreference
            android:title="CheckBox标题"
            android:summary="CheckBox设置具体内容"
            android:layout="@layout/preference_item"/>

        <CheckBoxPreference
            android:title="标题"
            android:summary="设置具体内容"
            android:layout="@layout/preference_item"
            android:widgetLayout="@layout/switch_layout"/>

        <Preference
            android:layout="@layout/preference_item"
            android:title="预留设置项标题"
            android:summary="预留设置具体内容要比标题长点"/>
    </PreferenceCategory>


    <PreferenceCategory
        android:layout="@layout/preference_category_widget"
        android:title="更多">
        <Preference
            android:title="版本"
            android:summary="V1.0"
            android:layout="@layout/preference_item"/>

        <Preference
            android:layout="@layout/preference_item"
            android:title="关于"
            android:summary="About the appliacation"/>
    </PreferenceCategory>

</PreferenceScreen>

其中android:layout属性指明每个属性块所用的布局,以及指明Material Design风格

2.新建res/layout/preferences_category_widget.xml 文件
内容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <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/colorPrimary"
        android:text="indroduce"
        android:textSize="14sp" />

</LinearLayout>

新建res/layout/preference_item.xml 文件
内容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    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="13sp" />

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

注意 一定要使用系统的id,
android:id=”@android:id/title”,android:id=”@android:id/summary”等等

新建res/layout/switch_layout.xml 文件
可以将复选框换成switch开关
内容如下:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:clickable="false"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:id="@android:id/checkbox">

</android.support.v7.widget.SwitchCompat>

3.至此已完成设置页面的内容,在此基础上我们应该在布局中加入toolbar以使页面更加完整。
整体布局为如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_setting_more"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"/>

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

4.为了让toolbar和我们设置的界面组合在一起,我们还应该设置一个自定义的Fragment,定义为SettingFragment,内容为如下:

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

5.最后我们的SettingActivity可定义为如下:

public class SettingActivity extends BaseActivity {
        Toolbar mToolbar;

        @Override
        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_settings_more);
            //ButterKnife.inject(this);
            initToolbar();
            getFragmentManager().beginTransaction().replace(R.id.content_frame, new SettingFragment()).commit();
        }


        /**
         * 初始化Toolbar
         */
        private void initToolbar() {
            mToolbar = (Toolbar) findViewById(R.id.toolbar_setting_more);
            mToolbar.setTitle("设置");
            mToolbar.setTitleTextColor(Color.WHITE);
            setSupportActionBar(mToolbar);
            ActionBar actionBar = getSupportActionBar();
            if (actionBar != null) {

//此处的activity_back为自己定义的返回的一个小图标
//可在http://www.iconfont.cn/查找合适的图标         
                                 actionBar.setHomeAsUpIndicator(R.drawable.activity_back);
                actionBar.setDisplayHomeAsUpEnabled(true);
            }
        }

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

至此则完成了整个设置界面的设计。

另外,我们需要把控件是否选中保存到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;
    }
});
版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 5.0 Material Design酷炫风格的开源项目集合

前言 Android 5.0上线有一个段时间了,估计小伙伴们都看到了Android5.0界面上相比前面几个版本有了很大的突破,给人一种非常酷炫,平滑的跳转,生动的界面切换,全新的感觉,Andro...
  • chy6575
  • chy6575
  • 2016年10月24日 10:25
  • 811

12个Material Design风格控件的使用

项目在GitHub上的地址:https://github.com/Hebin320/MaterialDesignUseCSDN上的下载地址http://download.csdn.net/detail...
  • Hebin320320
  • Hebin320320
  • 2016年05月20日 14:50
  • 35761

手把手教你打造一个Material Design风格的App(一)

你应该听说过Android的Material Design,它是在Android 5.0(Lollipop)版本引入的。在Material Design中还引入了很多新东西,比如Material Th...
  • u014738140
  • u014738140
  • 2015年05月26日 23:33
  • 5756

手把手教你打造一个Material Design风格的App(一)

你应该听说过Android的Material Design,它是在Android 5.0(Lollipop)版本引入的。在Material Design中还引入了很多新东西,比如Material Th...
  • dongfeng9ge
  • dongfeng9ge
  • 2015年07月21日 11:42
  • 3752

自定义Material Design风格炫酷加载进度条

首先要感谢Ricky大神的分享,对于那些想入门自定义view的同学来说,这个例子还是不错的,先看一张效果图: 效果是不是很炫呢,下面咱们就解析下这个动画,这个动画一共分为四部分: 1、小圆旋转...
  • malong8888
  • malong8888
  • 2015年08月07日 10:34
  • 1791

手把手教你打造一个Material Design风格的App(四)

——接上文。 3.3实现导航抽屉菜单项的选择 尽管导航抽屉已经实现了,但是你会发现选择抽屉列表项并没有反应,这是因为我们还没有实现RecycleView items的点击监听。 因为我们在导航抽屉里...
  • u014738140
  • u014738140
  • 2015年05月27日 00:04
  • 2262

打造极致Material Design动画风格Button

曾经有两篇关于Material Design风格的按钮实现。在第一章中只是简单的实现了动画的波纹效果,而在第二篇中实现可以自动移动到中心位置的动画;虽然两者都可用,但是在我的使用中却发现了一定的问题,...
  • qiujuer
  • qiujuer
  • 2015年01月07日 09:15
  • 8915

手把手教你打造一个Material Design风格的App(二)

——接上文。 3.1添加ToolBar(ActionBar) 添加ToolBar非常简单,你需要做的仅仅是为toolbar创建一个单独的layout布局,如果你想在哪里展示toolbar,只要...
  • u014738140
  • u014738140
  • 2015年05月26日 23:45
  • 2603

Material Design新控件的使用介绍

今天来学习总结一下,Android 后添加的一些新的组件和UI效果,Material Dialog,SwipeRefreshLayout,ListPopupWindow,PopupMenu等。 Ma...
  • Lucky_bo
  • Lucky_bo
  • 2016年08月24日 15:30
  • 1409

自定义 Material Design风格的提示框

其实在14年谷歌就推出了全新的设计语言Material Design,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。简单来说,就是一种扁平化的设置语言,我们...
  • u013320868
  • u013320868
  • 2016年04月24日 10:55
  • 1579
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android开发中Material Design风格设置页面的实践
举报原因:
原因补充:

(最多只允许输入30个字)