android 设计工具栏

时间：2022-05-15 15:20:39

设计工具栏Action Bar(订制工具栏类型）

　　工具栏给用户提供了一种熟悉和可预测的方式来执行某种动作和操纵应用程序，但是这并不意味着它就需要和其他的应用程序看起来一样的。如果想设计工具栏以使得它能更适合产品的商标，使用android的style和theme资源可以很容易做到点。

　　android包含一些内置的活动主题（build-in activity themes）例如 ”dark"或者"light"工具栏风格。用户也可以扩展这些主题来进一步订制用户自己工具栏的外观。

注意： 如果你使用支持库APIs来设计工具栏,必须要重载Theme.AppCompat函数族，而不是Theme.Holo函数族。这样做的过程中，每一个用户声明的风格特性都必须声明两次：一次使用平台的风格特性（ the android：properties），一次使用风格特性包含在支持库( Support Library) 中，例如 the appcompat.R.attr 属性- 这些属性的内容才是真正的应用程序。

使用Android主题

Android包含两种基本的主题，用来指定工具栏的颜色：

Theme.Holo指定一个”dark“主题

Theme.Holo.Light指定一个”light“主题

用户通过声明这些主题到程序的 menifest file中，可以应用这些主题到整个应用程序或者某个单独的活动（individual activity), 声明方式为 android：theme 并将它放到<application>元素中或者<activity>元素中。例如：

<application android:theme="@android:style/Theme.Holo.Light" ... />

用户也可以声明Theme.Holo.Light.DarkActionBar来使用一个黑色的工具栏而其他的活动则使用浅色（light color）

当使用支持库的时候，必须使用 Theme.AppCompat主题

Theme.AppCompat 黑色主题

Theme.AppCompat.Light 浅色主题

Theme.AppCompat.Light.DarkActionBar 带有黑色工具栏的浅色主题

确保工具栏图标能够与工具栏颜色合适的匹配。 此外，Action Bar Icon Pack 包含标准的动作图标可以使用，既有全浅色的 也有全黑色的工具栏。

订制背景

若想改变工具栏背景，需要给用户的活动activity创建一个用户主题，重载actionBarStyle属性。这个属性指向另一个风格，在这个风格里用户可以重载背景属性以便为工具栏背景明确一个drawable资源。

如果程序使用 navigation tabs或者split action bar，那么可以使用backgroundStacked和backgroundSplit属性分别为这些栏bars明确背景。

注意：为你的用户主题声明一个合适的父主题是很重要的。如果没有父主题，你的工具栏可能会丢失很多风格属性除非你显式的声明它们。

对于Android3.0或者更高的版本

你可以按如下方式 定义工具栏背景

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>

<!-- the theme applied to the application or activity -->

<style name="CustomActionBarTheme"   parent="@android:style/Theme.Holo.Light.DarkActionBar">        
<item name="android:actionBarStyle">@style/MyActionBar</item>

</style>

<!-- ActionBar styles -->

<style name="MyActionBar"  parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">

<item name="android:background">@drawable/actionbar_background</item>

</style>

</resources>

订制文本颜色

在工具栏中改变文本的颜色，需要为每个文本元素重载不同的属性。

  • 工具栏标题：创建用户风格来明确 textColor属性和明确 titleTextStyle属性，在程序actionBarStyle来进行

　　注意：运用到titleTextStyle上的用户风格应该使用TextAppearance.Holo.Widget.ActionBar.Title作为父风格（parent style)

  • 工具栏制表符： 在用户的活动主题中重载actionBarTabTextStyle
  • 动作按钮：在用户的活动主题（activity theme）中重载actionMenuTextColor函数
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>

<!-- the theme applied to the application or activity -->

<style name="CustomActionBarTheme"           parent="@style/Theme.Holo">

<item name="android:actionBarStyle">@style/MyActionBar</item>        
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="android:actionMenuTextColor">@color/actionbar_text</item>

</style>

<!-- ActionBar styles -->

<style name="MyActionBar"           parent="@android:style/Widget.Holo.ActionBar">

<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

</style>

<!-- ActionBar title text -->

<style name="MyActionBarTitleText"           parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">        
<item name="android:textColor">@color/actionbar_text</item>    
</style>

<!-- ActionBar tabs text styles -->

<style name="MyActionBarTabText"           parent="@style/Widget.Holo.ActionBar.TabText">

<item name="android:textColor">@color/actionbar_text</item>    
</style>

</resources>

订制制表指示器（ tabs indicator）

要想改变导航标签navigation tabs的指示器indicator，需要创建一个活动主题重载 actionBarStyle 属性。 这个属性指向另一个style资源，在这个style资源里面用户需要重载background属性， 且这个属性必须明确为state-list drawable。

注意：state-list drawable是重要的，使得这个当前被选择的标签标明它的背景状态与其他标签是不同的。 想更加进一步了解如何创建一个能够处理多种按钮状态的drawable资源，请查阅 State List 文档。

例如，下面是一个state-list drawable声明了一个明确的背景图片，具有几个不同状态的工具栏标签，

res/drawable/actionbar_tab_indicator.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->    <!-- Non focused states -->    
<item android:state_focused="false" android:state_selected="false"          android:state_pressed="false"          android:drawable="@drawable/tab_unselected" />    
<item android:state_focused="false" android:state_selected="true"          android:state_pressed="false"          android:drawable="@drawable/tab_selected" />    
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->    
<item android:state_focused="true" android:state_selected="false"          android:state_pressed="false"          android:drawable="@drawable/tab_unselected_focused" />    
<item android:state_focused="true" android:state_selected="true"          android:state_pressed="false"          android:drawable="@drawable/tab_selected_focused" />
<!-- STATES WHEN BUTTON IS PRESSED -->    
<!-- Non focused states -->    
<item android:state_focused="false" android:state_selected="false"          android:state_pressed="true"          android:drawable="@drawable/tab_unselected_pressed" />    
<item android:state_focused="false" android:state_selected="true"        android:state_pressed="true"        android:drawable="@drawable/tab_selected_pressed" />   
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->    
<item android:state_focused="true" android:state_selected="false"          android:state_pressed="true"          android:drawable="@drawable/tab_unselected_pressed" />    
<item android:state_focused="true" android:state_selected="true"          android:state_pressed="true"          android:drawable="@drawable/tab_selected_pressed" />
</selector>
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>

<!-- the theme applied to the application or activity -->

<style name="CustomActionBarTheme"           parent="@style/Theme.Holo">

<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

</style>

<!-- ActionBar tabs styles -->

<style name="MyActionBarTabs"           parent="@style/Widget.Holo.ActionBar.TabView">

<!-- tab indicator -->

<item name="android:background">@drawable/actionbar_tab_indicator</item>

</style>

</resources>

　　

相关文章