2016-04-11 67 views
8

我花了很多時間試圖弄清楚如何將一些簡單的樣式應用於工具欄,但完全陷入了困境。具體而言,我想更改標題和副標題以及溢出菜單圖標(三個點)的顏色。我可以在佈局中成功設置文本顏色,但不能在主題中設置,我不知道爲什麼。如何將主題應用於Android工具欄?

<android.support.v7.widget.Toolbar 
    theme="@style/Toolbar" 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:background="@color/orange" 
    app:popupTheme="@style/AppTheme.PopupOverlay" 
    /> 

styles.xml:

<style name="Toolbar" parent="Widget.AppCompat.Toolbar"> 
    <item name="titleTextStyle">@style/ToolbarTitle</item> 
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item> 
    <item name="popupTheme">@style/AppTheme.PopupOverlay</item> 
</style> 

<style name="ToolbarTitle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Title"> 
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item> 
    <item name="android:textColor">#FF0000</item> 
</style> 

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"> 
</style> 

的PopupOverlay主題應用到溢出菜單彈出,所以工具欄主題顯然是被應用,但TextAppearance不起作用,文本保持黑色。我嘗試了很多種替代形式,但沒有喜悅。當我嘗試一些,但它不起作用時,我不知道該從哪裏開始尋找理解原因。調試像這樣的主題問題的提示是值得歡迎的!對於什麼應該是非常簡單的UI樣式更改而言,這會讓人深感沮喪,但是佈局,樣式,主題的多個方面& AppCompat讓我完全迷惑和猜測。

回答

13

以下應爲你工作:

styles.xml

<style name="Base_ToolbarStyle"> 
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item> 
    <item name="android:background">?colorPrimary</item> 
    <item name="android:theme">@style/Base_ToolbarTheme</item> 
    <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item> 
    <item name="subtitleTextAppearance">@style/CustomSubTitleTextAppearance</item> 
</style> 

<style name="Base_ToolbarTheme"> 
    <!-- Color used for the title of the Toolbar - as long as not overridden --> 
    <item name="android:textColorPrimary">@color/pink_500_primary</item> 
    <!-- Used to color back button and three dots --> 
    <item name="android:textColorSecondary">@color/yellow_500_primary</item> 
</style> 

<style name="CustomTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> 
    <item name="android:fontFamily">@string/ff_roboto_condensed</item> 
    <item name="android:textSize">16sp</item> 
    <item name="android:textColor">@color/amber_500_primary</item> 
    <item name="android:textStyle">bold</item> 
</style> 

<style name="CustomSubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle"> 
    <item name="android:fontFamily">@string/ff_roboto_condensed</item> 
    <item name="android:textSize">14sp</item> 
    <item name="android:textColor">@color/pink_500_primary</item> 
    <item name="android:textStyle">italic</item> 
</style> 

layout.xml

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    style="@style/Base_ToolbarStyle" 
    android:layout_width="match_parent" 
    android:layout_height="?actionBarSize" 
    android:elevation="4dp" /> 

結果:

toolbar with custom style

注:我是故意醜如可能的風格。 :<

那麼你如何解釋這一點。那麼在textAppearances的情況下,你只要看看父類,例如TextAppearance.Widget.AppCompat.Toolbar.Title。在那裏,你會發現這樣的事情最終:

<style name="TextAppearance.Material.Widget.ActionBar.Title" 
     parent="TextAppearance.Material.Title"> 
    <item name="textSize">@dimen/text_size_title_material_toolbar</item> 
    <item name="textColor">?attr/textColorPrimary</item> 
</style> 

點擊父再一次揭示了以下內容:

<style name="TextAppearance.Material"> 
    <item name="textColor">?attr/textColorPrimary</item> 
    <item name="textColorHint">?attr/textColorHint</item> 
    <item name="textColorHighlight">?attr/textColorHighlight</item> 
    <item name="textColorLink">?attr/textColorLink</item> 
    <item name="textSize">@dimen/text_size_body_1_material</item> 
    <item name="fontFamily">@string/font_family_body_1_material</item> 
</style> 

因此,在總結我們都知道,我們現在可以調整的屬性。雖然將樣式應用於Toolbar而不是主題,但這或多或少是一些試驗和錯誤過程的結果。 ;)

相關問題