Android学习系列(40)--Android主题和样式之系统篇（下）

11）Widget样式（Widget Style）

特别说明，此处定义大量的系统内置控件的样式，对于重写原生控件的样式具有很大的参考价值。

        <!-- Widget styles -->
        <item name="absListViewStyle">@android:style/Widget.AbsListView</item>
        <item name="autoCompleteTextViewStyle">@android:style/Widget.AutoCompleteTextView</item>
        <item name="checkboxStyle">@android:style/Widget.CompoundButton.CheckBox</item>
        <item name="checkedTextViewStyle">@android:style/Widget.CheckedTextView</item>
        <item name="dropDownListViewStyle">@android:style/Widget.ListView.DropDown</item>
        <item name="editTextStyle">@android:style/Widget.EditText</item>
        <item name="expandableListViewStyle">@android:style/Widget.ExpandableListView</item>
        <item name="expandableListViewWhiteStyle">@android:style/Widget.ExpandableListView.White</item>
        <item name="galleryStyle">@android:style/Widget.Gallery</item>
        <item name="gestureOverlayViewStyle">@android:style/Widget.GestureOverlayView</item>
        <item name="gridViewStyle">@android:style/Widget.GridView</item>
        <item name="imageButtonStyle">@android:style/Widget.ImageButton</item>
        <item name="imageWellStyle">@android:style/Widget.ImageWell</item>
        <item name="listViewStyle">@android:style/Widget.ListView</item>
        <item name="listViewWhiteStyle">@android:style/Widget.ListView.White</item>
        <item name="popupWindowStyle">@android:style/Widget.PopupWindow</item>
        <item name="progressBarStyle">@android:style/Widget.ProgressBar</item>
        <item name="progressBarStyleHorizontal">@android:style/Widget.ProgressBar.Horizontal</item>
        <item name="progressBarStyleSmall">@android:style/Widget.ProgressBar.Small</item>
        <item name="progressBarStyleSmallTitle">@android:style/Widget.ProgressBar.Small.Title</item>
        <item name="progressBarStyleLarge">@android:style/Widget.ProgressBar.Large</item>
        <item name="progressBarStyleInverse">@android:style/Widget.ProgressBar.Inverse</item>
        <item name="progressBarStyleSmallInverse">@android:style/Widget.ProgressBar.Small.Inverse</item>
        <item name="progressBarStyleLargeInverse">@android:style/Widget.ProgressBar.Large.Inverse</item>
        <item name="seekBarStyle">@android:style/Widget.SeekBar</item>
        <item name="ratingBarStyle">@android:style/Widget.RatingBar</item>
        <item name="ratingBarStyleIndicator">@android:style/Widget.RatingBar.Indicator</item>
        <item name="ratingBarStyleSmall">@android:style/Widget.RatingBar.Small</item>
        <item name="radioButtonStyle">@android:style/Widget.CompoundButton.RadioButton</item>
        <item name="scrollViewStyle">@android:style/Widget.ScrollView</item>
        <item name="horizontalScrollViewStyle">@android:style/Widget.HorizontalScrollView</item>
        <item name="spinnerStyle">@android:style/Widget.Spinner</item>
        <item name="dropDownSpinnerStyle">@android:style/Widget.Spinner.DropDown</item>
        <item name="starStyle">@android:style/Widget.CompoundButton.Star</item>
        <item name="tabWidgetStyle">@android:style/Widget.TabWidget</item>
        <item name="textViewStyle">@android:style/Widget.TextView</item>
        <item name="errorMessageBackground">@android:drawable/popup_inline_error</item>
        <item name="errorMessageAboveBackground">@android:drawable/popup_inline_error_above</item>
        <item name="webTextViewStyle">@android:style/Widget.WebTextView</item>
        <item name="webViewStyle">@android:style/Widget.WebView</item>
        <item name="dropDownItemStyle">@android:style/Widget.DropDownItem</item>
        <item name="spinnerDropDownItemStyle">@android:style/Widget.DropDownItem.Spinner</item>
        <item name="spinnerItemStyle">@android:style/Widget.TextView.SpinnerItem</item>
        <item name="dropDownHintAppearance">@android:style/TextAppearance.Widget.DropDownHint</item>
        <item name="keyboardViewStyle">@android:style/Widget.KeyboardView</item>
        <item name="quickContactBadgeOverlay">@android:drawable/quickcontact_badge_overlay_dark</item>
        <item name="quickContactBadgeStyleWindowSmall">@android:style/Widget.QuickContactBadge.WindowSmall</item>
        <item name="quickContactBadgeStyleWindowMedium">@android:style/Widget.QuickContactBadge.WindowMedium</item>
        <item name="quickContactBadgeStyleWindowLarge">@android:style/Widget.QuickContactBadge.WindowLarge</item>
        <item name="quickContactBadgeStyleSmallWindowSmall">@android:style/Widget.QuickContactBadgeSmall.WindowSmall</item>
        <item name="quickContactBadgeStyleSmallWindowMedium">@android:style/Widget.QuickContactBadgeSmall.WindowMedium</item>
        <item name="quickContactBadgeStyleSmallWindowLarge">@android:style/Widget.QuickContactBadgeSmall.WindowLarge</item>
        <item name="listPopupWindowStyle">@android:style/Widget.ListPopupWindow</item>
        <item name="popupMenuStyle">@android:style/Widget.PopupMenu</item>
        <item name="activityChooserViewStyle">@android:style/Widget.ActivityChooserView</item>

        <item name="mediaRouteButtonStyle">@android:style/Widget.DeviceDefault.MediaRouteButton</item>

12）Preference样式（Preference Style）

说明，设置类界面样式

        <!-- Preference styles -->
        <item name="preferenceScreenStyle">@android:style/Preference.PreferenceScreen</item>
        <item name="preferenceFragmentStyle">@style/PreferenceFragment</item>
        <item name="preferenceCategoryStyle">@android:style/Preference.Category</item>
        <item name="preferenceStyle">@android:style/Preference</item>
        <item name="preferenceInformationStyle">@android:style/Preference.Information</item>
        <item name="checkBoxPreferenceStyle">@android:style/Preference.CheckBoxPreference</item>
        <item name="switchPreferenceStyle">@android:style/Preference.SwitchPreference</item>
        <item name="yesNoPreferenceStyle">@android:style/Preference.DialogPreference.YesNoPreference</item>
        <item name="dialogPreferenceStyle">@android:style/Preference.DialogPreference</item>
        <item name="editTextPreferenceStyle">@android:style/Preference.DialogPreference.EditTextPreference</item>
        <item name="ringtonePreferenceStyle">@android:style/Preference.RingtonePreference</item>
        <item name="preferenceLayoutChild">@android:layout/preference_child</item>
        <item name="preferencePanelStyle">@style/PreferencePanel</item>
        <item name="preferenceHeaderPanelStyle">@style/PreferenceHeaderPanel</item>
        <item name="preferenceListStyle">@style/PreferenceHeaderList</item>
        <item name="preferenceFragmentListStyle">@style/PreferenceFragmentList</item>
        <item name="preferenceFragmentPaddingSide">@dimen/preference_fragment_padding_side</item>
        <item name="detailsElementBackground">@android:drawable/panel_bg_holo_dark</item>

13）Search控件样式（ Search Style）

<!-- Search widget styles -->
<item name="searchWidgetCorpusItemBackground">@android:color/search_widget_corpus_item_background</item>
<!-- SearchView attributes -->
<item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
<item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item><item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
<item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
<item name="searchViewSearchIcon">@android:drawable/ic_search</item>
<item name="searchViewGoIcon">@android:drawable/ic_go</item>
<item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
<item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
<item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>

<item name="searchDialogTheme">@style/Theme.SearchBar</item>

14）ActionBar样式（ Action bar Style）

        <!-- Action bar styles -->
        <item name="actionDropDownStyle">@android:style/Widget.Spinner.DropDown</item>
        <item name="actionButtonStyle">@android:style/Widget.ActionButton</item>
        <item name="actionOverflowButtonStyle">@android:style/Widget.ActionButton.Overflow</item>
        <item name="actionModeBackground">@android:drawable/cab_background_top_holo_dark</item>
        <item name="actionModeSplitBackground">@null</item>
        <item name="actionModeCloseDrawable">@android:drawable/ic_menu_close_clear_cancel</item>
        <item name="actionModeCutDrawable">@android:drawable/ic_menu_cut_holo_dark</item>
        <item name="actionModeCopyDrawable">@android:drawable/ic_menu_copy_holo_dark</item>
        <item name="actionModePasteDrawable">@android:drawable/ic_menu_paste_holo_dark</item>
        <item name="actionModeSelectAllDrawable">@android:drawable/ic_menu_selectall_holo_dark</item>
        <item name="actionModeShareDrawable">@android:drawable/ic_menu_share_holo_dark</item>
        <item name="actionModeFindDrawable">@android:drawable/ic_menu_find_holo_dark</item>
        <item name="actionModeWebSearchDrawable">@android:drawable/ic_menu_search</item>
        <item name="actionBarTabStyle">@style/Widget.ActionBar.TabView</item>
        <item name="actionBarTabBarStyle">@style/Widget.ActionBar.TabBar</item>
        <item name="actionBarTabTextStyle">@style/Widget.ActionBar.TabText</item>
        <item name="actionModeStyle">@style/Widget.ActionMode</item>
        <item name="actionModeCloseButtonStyle">@style/Widget.ActionButton.CloseMode</item>
        <item name="actionBarStyle">@android:style/Widget.ActionBar</item>
        <item name="actionBarSplitStyle">?android:attr/actionBarStyle</item>
        <item name="actionBarSize">@dimen/action_bar_default_height</item>
        <item name="actionModePopupWindowStyle">?android:attr/popupWindowStyle</item>
        <item name="actionMenuTextAppearance">@android:style/TextAppearance.Holo.Widget.ActionBar.Menu</item>
        <item name="actionMenuTextColor">?android:attr/textColorPrimary</item>
        <item name="actionBarWidgetTheme">@null</item>
        <item name="actionBarDivider">?android:attr/dividerVertical</item>
        <item name="actionBarItemBackground">?android:attr/selectableItemBackground</item>

        <item name="dividerVertical">@drawable/divider_vertical_dark</item>
        <item name="dividerHorizontal">@drawable/divider_vertical_dark</item>
        <item name="buttonBarStyle">@android:style/ButtonBar</item>
        <item name="buttonBarButtonStyle">?android:attr/buttonStyle</item>
        <item name="segmentedButtonStyle">@android:style/SegmentedButton</item>

15）其它样式

        <!-- PreferenceFrameLayout attributes -->
        <item name="preferenceFrameLayoutStyle">@android:style/Widget.PreferenceFrameLayout</item>

        <!-- NumberPicker style-->
        <item name="numberPickerStyle">@style/Widget.NumberPicker</item>

        <!-- CalendarView style-->
        <item name="calendarViewStyle">@style/Widget.CalendarView</item>

        <!-- TimePicker style -->
        <item name="timePickerStyle">@style/Widget.TimePicker</item>

        <!-- DatePicker style -->
        <item name="datePickerStyle">@style/Widget.DatePicker</item>

        <item name="fastScrollThumbDrawable">@android:drawable/scrollbar_handle_accelerated_anim2</item>
        <item name="fastScrollTrackDrawable">@null</item>
        <item name="fastScrollPreviewBackgroundRight">@android:drawable/menu_submenu_background</item>
        <item name="fastScrollPreviewBackgroundLeft">@android:drawable/menu_submenu_background</item>
        <item name="fastScrollOverlayPosition">floating</item>
        <item name="fastScrollTextColor">@android:color/primary_text_dark</item>

        <!-- Pointer style -->
        <item name="pointerStyle">@android:style/Pointer</item>

        <!-- Accessibility focused drawable. -->
        <item name="accessibilityFocusedDrawable">@android:drawable/view_accessibility_focused</item>

5、一些细化的style（特别是大量的控件的样式）定义在了styles.xml

themes.xml偏全局，styles.xml偏细化。

我直接贴出链接地址，大家查看：

https://github.com/CyanogenMod/android_frameworks_base/blob/cm-11.0/core/res/res/values/styles.xml

6、我们能做什么

两点说明：

• 我们可以根据这些样式改变系统控件的样式
• 但不是所有的样式我们都可以修改，比如AlertDialog，布局和一些属性都是写在硬编码中了，我们是无法修改的。

通过学习这些主题和样式，我们能准确的把握我们能定制哪些样式，哪些我们不能定制，是否需要重新写一套替代的UI控件。

这个在项目决策和进度评估上是非常重要的。

7、简单例子

以CheckBox为例，CheckBox使用的样式我们猜测使用checkboxStyle（实际上从CheckBox源码分析看，它确实使用的是checkboxStyle）：

<item name="checkboxStyle">@android:style/Widget.CompoundButton.CheckBox</item>

查看styles.xml中的Widget.CompoundButton.CheckBox的定义：

<style name="Widget.CompoundButton.CheckBox">
    <item name="android:button">?android:attr/listChoiceIndicatorMultiple</item>
</style>

继续在themes.xml中查看listChoiceIndicatorMultiple的定义，不同的主题可能定义会有不同，我们选取最基本的那个：

    <item name="listChoiceIndicatorMultiple">@android:drawable/btn_check</item>

CheckBox的样式就是这个btn_check：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Enabled states -->

    <item android:state_checked="true" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />

    <item android:state_checked="true" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_pressed" />
    <item android:state_checked="false" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_pressed" />

    <item android:state_checked="true" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_selected" />
    <item android:state_checked="false" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_selected" />
    <item android:state_checked="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />

    <!-- Disabled states -->

    <item android:state_checked="true" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_on_disable" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_off_disable" />

    <!-- 这两张图片暂时没有,后面自定义的例子我把这两个注释掉
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/btn_check_on_disable_focused" />
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/btn_check_off_disable_focused" />
    -->

    <item android:state_checked="false" android:drawable="@drawable/btn_check_off_disable" />
    <item android:state_checked="true" android:drawable="@drawable/btn_check_on_disable" />

</selector>

我把这个btn_check.xml拷贝到Android工程的drawable目录下，同时把一些新的checkbox的图片也准备好，拷贝到drawable-hdpi目录下：



同时在工程的styles.xml覆盖checkBox style：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:checkboxStyle">@style/CustomeCheckBox</item>
    </style>

    <style name="CustomeCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/btn_check</item>
    </style>
</resources>

我截取2个不同的状态的效果图如下，

8、小结

本文纯从主题和样式对系统样式，特别是控件样式笼统的描述了一遍。

如果结合系统源码和主题样式一起学习，可以更深入的了解android主题机制。