這些Android系統樣式中的顏色屬性你知道嗎?

  • 2019 年 12 月 26 日
  • 筆記

Android 系統樣式中的顏色屬性

推薦閱讀看完後徹底搞清楚Android中的 Attr 、 Style 、Theme

幾個常用的顏色屬性

先放上一張經典的圖片,圖片來自網路。

這張圖在網上很是流傳,也不知道當初是哪位大神標註的,很好的說明了 Android 系統中的幾個常用的顏色屬性的作用範圍。

在開發者官網 R.attr 中給我們列出了所有的系統屬性,我們可以在這裡面找到對應的顏色屬性所代表的意思。

通常我們新建一個項目的時候在 res/values/styles.xml 中會有下面的定義 Application 的主題樣式。

<resource>          <!-- Base application theme. -->      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">          <!-- Customize your theme here. -->          <item name="colorPrimary">@color/colorPrimary</item>          <item name="colorPrimaryDark">@color/colorPrimaryDark</item>          <item name="colorAccent">@color/colorAccent</item>      </style>  </resource>  

其實樣式遠遠不止如此,在 Android 5.0 開始 Android 系統引入了 Material Design 風格,各個控制項在這樣主題下面,風格有很大的變化。為了在不同版本的系統中統一 UI 樣式,設置自定義的 Theme 繼承自 Theme.AppCompat 系列就可以了。

關於 AppCompat 相關主題提供的系統屬性,可以參考源碼:https://android.googlesource.com/platform/frameworks/support/+/400d2df7dfb0f72117b84854035829b6eaaf3150/v7/appcompat/res/values-v21/themes_base.xml

同時由於部分屬性的版本兼容問題,為了避免添加多個版本的 styles 文件,可以省略 android: 命名空間

colorPrimary

App Bar 的背景顏色,也是一個 APP 的主色調。不過 ActionBar 已經不鼓勵使用了,由 Toolbar 來代替,需要給 Toolbar 來設置背景顏色。

<android.support.v7.widget.Toolbar    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="?attr/colorPrimary" />  

colorPrimaryDark

status bar(狀態欄)的背景色,僅適用於 Android 5.0及其以上版本。也就是在這個版本你直接可以通過修改這個屬性來修改狀態欄的顏色。

colorAccent

許多控制項在選中狀態或者獲取到焦點的時候會使用這個顏色,比如:

  • CheckBox:checked 狀態
  • RadioButton:checked 狀態
  • SwitchCompat:checked 狀態
  • EditText:獲取焦點的時候的下劃線和游標顏色
  • TextInputLayout:懸浮 label 字體顏色
  • 等等

android:navigationBarColor

navigation bar 的背景色,僅用於 Android 5.0及其以上

colorControlNormal

某些 View 處於普通狀態下的顏色。

比如:

  • 沒有被選中的 CheckBox 或者沒有被選中的 RadioButton
  • 失去焦點時的 EditText ,Toolbar 溢出按鈕顏色
  • 等等

colorControlActivated

在某些時候 colorControlActivatedcolorAccent 的替代品。這種情況下 colorControlActivate 的顏色是會覆蓋 colorAccent 的顏色的。也就是說,如果你沒有設置的話默認的顏色就是 colorAccent 的顏色

比如:

  • CheckBox 和 RadioButton 的 checked 狀態

colorControlHightlight

所有可點擊 View 觸摸狀態下的 Ripple 效果。僅對 Android 5.0 及其以上有效

colorButtonNormal

Button normal 狀態下的背景色。

這種設置和 Button 的 android:background 所不同的是,在 Android5.0 或者更高的版本上使用 colorButtonNormal 的時候會依然保持陰影和 Ripple 觸摸效果

android:windowBackground

窗口背景色,諸如此類還有 android:background android:colorBackground

android:textColorPrimary

APP 的主要文字顏色,比如 actionbar

文本的顏色,比如 Button 中的文本顏色,EditText 中的文本顏色,AlertDialog 中的文本顏色。但是不包括 TextView 中的文字顏色,TextView 中的文字顏色還需要 TextColor 來控制。

當然在設置了 TextColor 的話,TextColor 優先。

editTextColor:

默認 EditView 輸入框字體顏色

TextColor

TextView 的文字顏色

更多查看這裡

樣式介紹

從 Android 5.0 開始,Android 系統引入了 Material Design風格。

md 的主題有:

  • @android:style/Theme.Material(暗主題)
  • @android:style/Theme.Material.Light(亮主題)
  • @android:style/Theme.Material.Light.DarkActionBar

當然了為了兼容性,我們一般使用j兼容包裡面的 Them.AppCompat 主題

與之對應的樣式主要有 Them.AppCompatThemeOverlay.AppCompat ,當然他們兩個又有各自的子類。

這兩種樣式也有不同的使用方法

Theme.AppCompat 一般用於設置整個應用程式的全局主題

ThemeOverlay.AppCompat 用於覆蓋特定視圖的主題,覆蓋相關的屬性使他們成為亮或者暗 尤其是在 Toolbar 中運用。

這樣說可以不太容易明白,下面通過一個例子來說明。

比如說先我的整個 APP 的主題是這樣的

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">          <!-- Customize your theme here. -->          <item name="colorPrimary">@color/colorPrimary</item>          <item name="colorPrimaryDark">@color/colorPrimaryDark</item>          <item name="colorAccent">@color/colorAccent</item>      </style>  

默認的文字的顏色是黑的的,那麼顯示效果就會是這樣的

這裡使用了一個 Titlbar 這樣效果和整體很不搭配,我們需要的是 Titlbar 的背景使用我們的 colorPrimary 字體的顏色使用 淺色文本樣式 的顏色,那麼這樣我們就可以自己定義一個樣式

    <style name="sencond" parent="ThemeOverlay.AppCompat.Dark.ActionBar">          <item name="android:background">@color/colorPrimary</item>      </style>  
    <androidx.appcompat.widget.Toolbar          android:theme="@style/sencond"          app:title="@string/app_name"          android:layout_width="match_parent"          android:layout_height="wrap_content"/>  

然後把這個樣式給 Titlbar設置上,這樣效果就合適了。

當然你自己完全可以用屬性來自己完成。

這是 ThemOverlay 樣式的全部樣式了,每個樣式裡面的內容都很簡單。就是修改一些最基本的屬性,不像 Theme 一樣裡面有那麼多的內容。

參考:https://juejin.im/post/58f8b651b123db006238dd8d