Android學習系列(40)--Android主題和樣式之系統篇（下）

謙虛的天下發表於2014-09-29
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目錄下：
Android學習系列(40)--Android主題和樣式之系統篇（下）
同時在工程的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個不同的狀態的效果圖如下，

Android學習系列(40)--Android主題和樣式之系統篇（下）

8、小結

本文純從主題和樣式對系統樣式，特別是控制元件樣式籠統的描述了一遍。

如果結合系統原始碼和主題樣式一起學習，可以更深入的瞭解android主題機制。

相關文章