【Android Developers Training】 8. 定义Actio

系统 2166 0

注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好。

原文链接: http://developer.android.com/training/basics/actionbar/styling.html


Action Bar能够向你的用户提供易掌握的操作方法,同时也能帮助用户导航,但这不代表所有应用的Action都长一个模样。如果你希望将你的Action Bar风格进行自定义来使它符合你应用的整体风格,你可以通过使用安卓的风格和主题资源( style and theme )来实现这一设想。

Android包含一些内置的Activity主题,包括“暗(dark)”和“亮(light)”的Action Bar风格。你也可以将这些主题做进一步地定制化。

Note:

如果你使用的是“ Support Library ” APIs所提供的Action Bar,那么你必须使用(或者说覆写) Theme.AppCompat 这一系列中的风格(而不是在API Level 11或以上中的 Theme.Holo 系列)。因此,每个你声明的风格属性必须被声明两次:一次用于平台风格的声明(“ android: ”属性)还有一次用来声明“ Support Library ”所包含的风格的属性( appcompat.R.attr ”属性,这些属性的Context一般就是你的App )。可以接下去看例子来理解。

 

 一). 使用一个Android主题

Android包括两个基本的activity主题,它们决定了Action Bar的颜色:

你既可以通过在清单文件的 <application> 标签中对 android:theme 属性标签进行声明,来 将这些主题应用到你的整个应用当中,也可以在清单文件的单个 <activity> 标签中对 android:theme 属性标签进行声明,来将主题 应用到单个activity中。例如:

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

你也可以仅让Action Bar为暗色,并把activity的剩余部分设置为亮色主题,这可以通过声明 Theme.Holo.Light.DarkActionBar 这一主题来实现。

当你使用的是 Support Library 时,你必须使用 Theme.AppCompat 系列的主题:

请务必记得,你使用的action bar上的图标要和你的action bar的背景色拥有反差。在 Action Bar Icon Pack 包含了适配于“ Holo light ”和“ Holo dark ”这两个系列主题的Action Bar的配套图标。

 

二). 自定义背景

为了改变Action Bar的背景色,你可以为你的activity创建一个自定义的主题,这可以通过覆写 actionBarStyle 这一属性。这一属性指向另一个style文件,在其中你可以覆写 background 属性,来为 action bar 特定一个图像资源作为其背景。如果你的应用使用 navigation tabs 或者 split action bar ,之后你也可以分别通过使用 backgroundStacked backgroundSplit 这两个属性字段为这些 action bar 指定背景。

Caution:

注意,你最好是为你自定义的主题和风格声明一个父主题,使得你的自定义的主题可以继承父主题的风格。如果没有一个父主题的风格,那么你自定义的Action Bar会缺少很多风格属性,除非你显示地声明了他们。

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本,你可以这样声明你的Action Bar背景:

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.Light.DarkActionBar"
      
      
        >
      
      
        <
      
      
        item 
      
      
        name
      
      
        ="android:actionBarStyle"
      
      
        >
      
      @style/MyActionBar
      
        </
      
      
        item
      
      
        >
      
      
        </
      
      
        style
      
      
        >
      
      
        <!--
      
      
         ActionBar styles 
      
      
        -->
      
      
        <
      
      
        style 
      
      
        name
      
      
        ="MyActionBar"
      
      
        

           parent
      
      
        ="@style/Widget.Holo.Light.ActionBar.Solid.Inverse"
      
      
        >
      
      
        <
      
      
        item 
      
      
        name
      
      
        ="android:background"
      
      
        >
      
      @drawable/actionbar_background
      
        </
      
      
        item
      
      
        >
      
      
        </
      
      
        style
      
      
        >
      
      
        </
      
      
        resources
      
      
        >
      
    

之后将你的主题应用到你的整个系统或单个activity中

      
        <
      
      
        application 
      
      
        android:theme
      
      
        ="@style/CustomActionBarTheme"
      
      
         ... 
      
      
        />
      
    

对于Android 2.1或更高版本的系统

如果使用“ Support Library ”,像上述中的那个主题应该这样声明:

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
      
      
        >
      
    

之后将你的主题应用到你的整个系统或单个activity中

      
        <
      
      
        application 
      
      
        android:theme
      
      
        ="@style/CustomActionBarTheme"
      
      
         ... 
      
      
        />
      
    

 

三). 自定义字体颜色

要修改Action Bar中的字体颜色,你需要分别为每个文本标签覆写响应的属性:

Note:

应用在 titleTextStyle 上的自定义风格必须使用 TextAppearance.Holo.Widget.ActionBar.Title 作为父风格( parent style )。

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本,你的风格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
      
      
        ="@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
      
      
        >
      
    

对于Android 2.1或更高版本的系统

如果使用了“ Support Library ”,你的风格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: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
      
      
        >
      
    

 

四). 自定义标签栏

为了改变 navigation tabs 上使用的指引,创建一个覆写 actionBarTabStyle 属性的activity主题。这个属性指向另一个风格资源,在其中你覆写 background 属性,在这里指定一个图像文件的状态列表。

Note:

一个 图像文件的状态列表是很重要的,因为通过背景的不同可以表示出当前那个标签指引是被选中的。可以通过阅读 State List 来学习更多的关于如何创建图像资源来多按钮状态的问题。

例如:这里是一个 图像文件的状态列表,它为一个Action Bar标签的每一个不同状态声明一个特定的背景图片:

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
      
      
        >
      
    

对于Android 3.0或更高版本的系统

当只支持Android 3.0或更高系统版本,你的风格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
      
      
        >
      
    

对于Android 2.1或更高版本的系统

如果使用了“ Support Library ”,你的风格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
      
      
        >
      
    

 

更多资源:

更多Action Bar的风格属性: Action Bar

更多主题方面的知识: Styles and Themes

*更多完整的Action Bar风格: Android Action Bar Style Generator

【Android Developers Training】 8. 定义Action Bar风格


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论