偏好设置如何更改Preference的样式

在上一篇Android设置界面5分钟搞定–Preferences的使用里讲到了如何运用PreferenceActivity快速的新建出偏好设置页面。如果是内部应用,这样丢过去是完全没有问题的,但我们日常用是达不到产品要求的。本篇我们就来看一下如何更改Preference的样式。

如何更改Preferences的样式

在android ui的开发中,要更改一个控件的样式,我们往往从这几个方面来做

  • 通过控件属性,如background,textSize
  • 通过指定控件的样式 style
  • 设置主题theme
    本来so easy的事情,但我惊奇的发现居然无法设置之前那些常用控件属性及样式来搞,只有主题控件能搞定。我们常用的三板斧只有Theme一招有效了。
    通过度娘大多讲的都是通过自定义来实现的,自定义除了每种子控件都要重写,感觉与自己写个布局差别不大了。
通过Theme来设置样式
  1. 在styles.xml里定义样式
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="CustomWindowTitleText" >
        <item name="android:textSize">20dip</item>
        <item name="android:textColor">#FFffffff</item>
        <item name="android:paddingLeft">10dp</item>
    </style>

    <style name="customCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/selector_checkbox</item>
    </style>


    <style name="Default.NoTitleBar" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:textColorPrimaryInverse">@android:color/black</item>
        <!--<item name="android:windowBackground">@color/window_bg</item>-->
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowTitleSize">42.0dip</item>
        <item name="android:windowTitleStyle">@style/CustomWindowTitleText</item>
        <item name="android:checkboxStyle">@style/customCheckBox</item>
    </style>

    <style name="CustomWindowTitleBackground">
        <item name="android:background">#222222</item>
    </style>

    <!--这里是指定给PreferenceActivity的样式-->
    <style name="setStyle" parent="@style/Default.NoTitleBar">
        <item name="android:windowBackground">@drawable/wbg</item>                      <!-- 窗体背景   -->
        <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>           <!-- 窗体标题背景风格-->
        <item name="android:windowTitleSize">36dp</item>                        <!--窗体标题栏高度-->
        <!-- item name="android:listViewStyle"                          preference是一个LISTVIEW,这里设置该风格-->
        <item name="android:textColorPrimary">#ff0000</item>                        <!-- preference一级文本颜色-->
        <item name="android:textColorSecondary">#00ff00</item>                      <!--preference二级文本颜色-->
    </style>

</resources>

其中用到的setStyle是继承了Default.NoTitleBar,主要是为了在其它地方也可以使用,当然你也可以把属性都在写一起。

  1. 在AndroidManifest.xml里指定样式android:theme
<activity android:name=".MainActivity"
            android:theme="@style/setStyle">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

看下效果 (请原谅我的配色)

《偏好设置如何更改Preference的样式》 默认的效果
《偏好设置如何更改Preference的样式》 设置主题后的效果

各位,是不是很容易呢。

那下面放大招了
除了上面这种方式,其实我们可以通过指定布局来达到这个效果

通过布局实现样式的更改

通过设置android:layout ,android:widgetLayout
这2个属性通过布局文件来定义视图。
下面看一个CheckBoxReference的实现

  1. 新建两个布局文件
    preference_item.xml ,自由指定样式及布局吧,但请保持id与系统保持一致(CheckBoxReference对应的路径为frameworks/base/core/res/res/layout/preference_widget_checkbox.xml ,其它的自己找相应的就可以了)。
<?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:background="@drawable/selector_item"
    android:gravity="center_vertical"
    android:minHeight="?android:listPreferredItemHeight"
    android:orientation="horizontal" >

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="3dp"
        android:scaleType="fitStart"
        android:src="@drawable/appstore" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="4dp" >

        <TextView
            android:id="@android:id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:ellipsize="marquee"
            android:fadingEdge="horizontal"
            android:singleLine="true"
            android:text="title"
            android:textColor="#4d4d4d"
            android:textSize="18.0sp" />

        <TextView
            android:id="@android:id/summary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@android:id/title"
            android:layout_toLeftOf="@android:id/widget_frame"
            android:maxLines="2"
            android:text="summary"
            android:textColor="#AAAAAA"
            android:textSize="14sp" />

        <LinearLayout
            android:id="@android:id/widget_frame"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="4dp"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:orientation="vertical" >
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

checkbox_preference_widget.xml 用于设置checkbox

<?xml version="1.0" encoding="UTF-8"?>
<!-- 这里放上系统的id -->
<CheckBox 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:layout_gravity="center_vertical"
    android:button="@drawable/selector_checkbox"
    android:clickable="false"
    android:focusable="false"/>
  1. 给CheckBoxReference指定这两个属性,layout是布局文件(通用的),widgetLayout就是用于指定CheckBox的
<CheckBoxPreference
            android:layout="@layout/preference_item"
            android:icon="@mipmap/ic_launcher"
            android:key="parent_checkbox_preference"
            android:summary="选定后子控件可操作"
            android:title="父选择控件"android:widgetLayout="@layout/checkbox_preference_widget" />

就这两步,样式妥妥的了。

网上常用的自定义这里就不讲了,需要的可以谷哥。

本篇示例源码请移步github

    原文作者:waiwaaa
    原文地址: https://www.jianshu.com/p/02d2839606aa
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞