设置导航栏样式
导航栏通过用户熟悉和可预知的方式来操作和浏览程序,但是这并不意味着所有程序中的导航栏看起来都一个样.如果你想使导航栏的风格更好的匹配你的品牌,你可以通过使用Android样式和主题轻松的实现.
Android内建了"黑色"和"白色"两款导航栏样式.你也可以扩展这些主题,进一步定制你的导航栏的样式.
备注:如果你使用的是支持库来实现的导航栏,那么你必须使用(或覆盖)"Theme.AppCompatible"的样式.如果是这样,任何一个你声明的样式属性都必须在两个地方声明:一是
一.使用Android内建主题
Android内建了两个基本的活动主题,配置了不同的导航栏颜色.
* "Theme.Holo"为黑色主题
* "Theme.Holo.Light"为白色主题
你可以在"manifest"文件中的"<application>"元素或特定的"<activity>"元素中通过"android:theme"属性为你的整个程序或特定的活动页面设置主题.例如:
<application android:theme="@android:style/Theme.Holo.Light" ... />
你也可以通过声明"Theme.Holo.Light.DarkActionBarActivity"主题来设置导航栏为黑色,活动页面的其他部分为白色.
如果使用的是支持库,那么你必须使用"Theme.AppCompat"主题代替:
* "Theme.AppComPat"为黑色主题
* "Theme.AppCompat.Light"为白色主题
* "Theme.AppCompat.Light.DarkActionBar"为主体白色,导航栏黑色.
当设置导航栏图标时,确保你的图标和导航栏主题能够形成鲜明的对比."Action Bar Icon Pack"中提供了两种主题的一些基本导航栏图标.
二(1).自定义导航栏背景色
想要改变导航栏的背景颜色,首先为相应的activity自定义一个主题,然后复写"actionBarStyle"属性.这个属性指向另外一个样式,在这个样式中你可以复写"background"属性来设置导航栏背景的绘制资源.
如果你的程序使用的是导航选项卡或拆分操作栏,那么你可以使用"backgroundStacked"和"backgroundSplit"
属性类为它们设置背景颜色.
警示:最好为你自定义的主题声明一个父主题,否则你的导航栏将会缺少很多样式属性,除非你自己再明确的定义它们.
(1).从Android3.0开始
你可以通过如下方式定义导航栏背景颜色:
res/values/themes.xml
<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>
通过下面的方式将主题配置给整个程序或某些特定的活动页面.
<application android:theme="@style/CustomActionBarTheme" ... />
(2).从Android2.1开始
当使用的是支持库时,同上面一样的主题需要按照如下配置:
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.AppCompat.Light.DarkActionBar"> <item name="android:actionBarStyle">@style/MyActionBar</item> <!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item> </style> <!-- ActionBar styles --> <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="android:background">@drawable/actionbar_background</item> <!-- Support library compatibility --> <item name="background">@drawable/actionbar_background</item> </style> </resources>
通过下面的方式将主题配置给整个程序或某些特定的活动页面.
<application android:theme="@style/CustomActionBarTheme" ... />
二(2).自定义文本颜色
要修改导航栏中文本的颜色,你需要为每一个文本元素重写两个独立的属性:
* 导航栏标题:创建自定义样式文件"actionBarStyle",指定"testColor"属性和"TitleTextStyle"属性的样式.
备注:自定义的"titleTextStyle"样式的父样式应该为"TextAppearance.Holo.Widget.ActionBar.Title"
* 导航选项卡:在活动主题中重写"actionBarTabTextStyle"属性
* 导航栏按钮:在活动主题中重写"actionMenuTextColor"属性
(1).从Android3.0开始
你的XML样式文件看起来如下:
res/values/themes.xml
<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="@style/Widget.Holo.ActionBar"> <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> </style> <!-- ActionBar title text --> <style name="MyActionBarTitleText" parent="@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>
(2).从Android2.1开始
XML样式文件看起来为:
res/values/themes.xml
<resources> <!-- the theme applied to the application or activity --> <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat"> <item name="android:actionBarStyle">@style/MyActionBar</item> <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item> <item name="android:actionMenuTextColor">@color/actionbar_text</item> <!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item> <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item> <item name="actionMenuTextColor">@color/actionbar_text</item> </style> <!-- ActionBar styles --> <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar"> <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> <!-- Support library compatibility --> <item name="titleTextStyle">@style/MyActionBarTitleText</item> </style> <!-- ActionBar title text --> <style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">@color/actionbar_text</item> <!-- The textColor property is backward compatible with the Support Library --> </style> <!-- ActionBar tabs text --> <style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText"> <item name="android:textColor">@color/actionbar_text</item> <!-- The textColor property is backward compatible with the Support Library --> </style> </resources>
二(3).自定义选项卡指示器
创建一个活动主题,重写"actionBarTabStyle"属性就可以改变选项指示器.这个属性指向另一个样式资源,该资源
位于你重写"background"属性的文件中,在这个文件中你还应该定义一个可绘制的声明列表.
备注:定义一个可绘制的声明列表,这样当前被选中的选项的背景就会和其他选项的背景区分开来.
例如,下面是一个可绘制声明列表,为几种不同状态的导航栏选项卡定义了特定的背景图片.
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>
(1).从Android3.0开始
XML样式文件看起来为:
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>
(2).从Android2.1开始
XML样式文件为:
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.AppCompat"> <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> <!-- Support library compatibility --> <item name="actionBarTabStyle">@style/MyActionBarTabs</item> </style> <!-- ActionBar tabs styles --> <style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView"> <!-- tab indicator --> <item name="android:background">@drawable/actionbar_tab_indicator</item> <!-- Support library compatibility --> <item name="background">@drawable/actionbar_tab_indicator</item> </style> </resources>