Toolbar 細節不少,如果要自定義 style 的話,有好幾個 attribute 需要熟悉。

Ref

AppCompat

先從最簡單的應用開始:

這張圖很實用


<!-- Define: res/layout/my_toolbar.xml -->

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/MyToolbarTheme"
    app:popupTheme="@style/MyToolbarPopupTheme"
    />

android:theme

請注意 theme 是會套用到整個元件的。講一個差別,如果你在 theme 裡面定義 android:background 的話,則 bar 本身還有 popup 都會改到,而如果直接在 toolbar 元件這邊指定 android:background 的話,就只會改到 bar 本身。

Material适配2 - 高级篇 文中提到 android:themeapp:theme 的不同。簡單來說,

  • 兼容 API 11 以上,推荐使用 android:theme
  • 如果兼容更老的版本,推荐继续使用 app:theme

app:popupTheme

如果想要對 toolbar 彈出的 menu 做更多調整,就另外再指定 app:popupTheme,不然 menu 就是 follow android:theme 的樣式。


<!-- Use: res/layout/activity_main.xml -->

<LinearLayout 
        ...
    >
    
    <include layout="@layout/my_toolbar" />
</LinearLayout>


<!-- Styles: res/values/styles.xml -->

<style name="MyToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Light.ActionBar">
    <item name="android:textColor">@android:color/black</item>
</style>

<style name="MyToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColor">@android:color/white</item>
</style>

Toolbar 常用的 ThemeOverlay

  • ThemeOverlay.AppCompat.Light.ActionBar: (Light)白底黑字
  • ThemeOverlay.AppCompat.Dark.ActionBar: (Dark)黑底白字

沒有要用 ActionBar 的話,就不用理 Theme.AppCompat 了 (除了 Theme.AppCompat.NoActionBar)

parent

所以 parent 裡的 style 在 Android 5.0 (API 21) 之後,通常就是繼承/直接使用上述的兩個 ThemeOverlay。當然你也可以不繼承,不繼承的話就是要自己 overwrite 新的值(比如說 backgroud, textcolor 之類的)

attributes

那麼有哪些 attribute 可以調整呢? 如果有繼承的話,建議是追蹤回去 Android 原生的 code, 看看他是用哪些 attribute 來設定,然後你再指定自己的值,蓋過他。可以參考 Android: Changing the Toolbar’s text color and overflow icon color,其中用的是繼承 Theme.AppCompat.NoActionBar

Comments

comments powered by Disqus
Copyright © 2013 Andro Chen
Powered by Logdown and Greyshade
Favicon from The Noun Project