`

添加导航栏----(3)设置导航栏样式

 
阅读更多

                                                                    设置导航栏样式

    导航栏通过用户熟悉和可预知的方式来操作和浏览程序,但是这并不意味着所有程序中的导航栏看起来都一个样.如果你想使导航栏的风格更好的匹配你的品牌,你可以通过使用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>

 

  • 大小: 10.3 KB
  • 大小: 9.8 KB
  • 大小: 12.8 KB
  • 大小: 12.4 KB
  • 大小: 12.3 KB
分享到：
| 添加导航栏----(2)添加导航按钮
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics