`

添加导航栏----(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)添加导航按钮
评论
发表评论

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

相关推荐

    jquery 悬浮 导航栏

    4. **动画效果**：为了让导航栏的转换更加平滑，我们可以结合 CSS3 的 `transition` 属性和 jQuery 的 `.toggleClass()` 方法，根据需求添加过渡效果。 5. **兼容性考虑**：虽然大部分现代浏览器都支持 jQuery 和 ...

    swift-一行代码设置状态栏样式和导航栏背景颜色

    本教程将深入讲解如何使用一行代码来设置状态栏样式、导航栏背景颜色，以及调整导航栏内的标题、按钮和透明度，并启用全屏pop手势支持。 首先，状态栏样式可以通过`UIApplication`的`statusBarStyle`属性来设置。...

    ios-灵活自定义导航栏-多个页面显示在同一个页面里面.zip

    我们可以重写其 appearance proxy 来全局设置导航栏的样式，包括背景颜色、文字颜色、按钮样式等。对于特定页面，我们可以通过设置 UINavigationItem 的 title 和左右BarButtonItem 来定制导航栏的内容。 在 ...

    导航栏控件---asp。net

    3. 使用导航栏控件： - TreeView控件：在设计视图中，可以直接从工具箱拖放TreeView控件到页面上，然后通过XML数据源或代码-behind来添加节点。每个节点可以有子节点，表示子菜单。 - Menu控件：同样，可以在设计...

    swift-runtime实现导航栏封装无需继承动态提供属性控制导航栏样式

    在iOS应用开发中，导航栏（NavigationBar）是用户界面中的重要组成部分，用于展示当前页面的标题和...在实际项目中，可以根据需要进一步扩展这个工具类，添加更多自定义的导航栏样式属性，以满足各种复杂的界面需求。

    微信小程序----导航栏透明渐变一

    为了实现透明渐变，我们需要自定义导航栏样式。 接下来，我们将详细讲解如何利用CSS3的`opacity`属性来实现这个效果。`opacity`属性允许我们设置元素的不透明度，其值范围是0（完全透明）到1（完全不透明）。在微信...

    各种导航栏集合------

    3. 易用性：确保导航栏的位置直观，通常位于页面顶部或侧边，便于用户触及。 4. 适量性：不要放置过多的导航选项，避免用户感到困扰或迷失方向。 5. 反馈：当用户点击导航项时，提供视觉反馈，让用户知道他们已选择...

    导航栏下拉样式

    确保CSS代码正确地链接到你的页面，以便下拉导航栏样式生效。 总结来说，通过div+css实现导航栏下拉样式，主要涉及HTML结构的构建和CSS样式的定义。在Jeecms中，可以将这些样式集成到系统模板中，为用户提供更直观...

    bootstrap3 侧边导航栏

    这里，`navbar-inverse`类用于设置导航栏为深色背景，`sidebar`类则是Bootstrap3中用于侧边栏的样式。`role="navigation"`是一个辅助性属性，有助于无障碍访问。 然后，为了让侧边导航栏在小屏幕设备上折叠，我们...

    Qt 自定义导航栏

    在本文中，我们将深入探讨如何在Qt环境中自定义一个功能丰富、样式美观的树形导航栏。Qt是一个跨平台的应用程序开发框架，广泛用于创建GUI应用程序。自定义导航栏是提高用户界面（UI）吸引力和易用性的重要手段，...

    CSS网页导航栏样式制作软件

    【CSS网页导航栏样式制作软件】是一款专为不熟悉CSS编码的用户设计的工具，它可以帮助用户轻松创建和设计网页的导航栏样式。这款软件提供了一个直观的界面，让用户可以通过图形化的方式设置导航栏的各种元素，如字体...

    参考某东商城的导航栏-基于jqurey.zip

    首先，导航栏是网站的重要组成部分，它能够帮助用户快速找到所需的信息和商品。...自定义样式：根据您的品牌或网站风格，自定义导航栏的样式和外观。 另外，如果您想使用jQuery来实现一些额外的功能，例如动态

    一行代码底部导航--Tab切换栏-demo.rar

    然后，在布局文件中添加底部导航栏视图，并在对应的Activity或Fragment中初始化并设置Tab。通过调用提供的方法，如`addTab()`，可以为每个Tab指定图标和文字。最后，调用一个启动方法，例如`start()`，即可启动导航...

    ios-自定义导航栏.zip

    通常，会有一个专门的类别（Category）文件来扩展UINavigationBar，以及一些配置和设置自定义导航栏样式的代码文件。 5. **注意事项**： - 在自定义导航栏时，需确保兼容不同设备的屏幕尺寸和方向。 - 考虑状态栏...

    Qt - 导航栏的实现

    在Qt框架中，导航栏（通常称为工具栏或QToolBar）是用户界面设计中的一个重要元素，它提供了一种直观的方式，使用户能够快速访问常用的功能或进行导航操作。本篇文章将详细探讨如何在Qt中实现一个功能完备的导航栏。...

    html+css侧边伸缩导航栏

    我们需要定义导航栏的基本样式，如宽度、颜色、字体等，并为展开和关闭状态添加不同的样式。我们可以使用媒体查询（media queries）来实现响应式设计，确保导航栏在不同屏幕尺寸下都能正常工作。以下是一个基本的 ...

    3D导航栏效果

    在IT行业中，3D导航栏效果是一种常见的网页设计技术，旨在为用户提供更加生动、互动的浏览体验。这种效果通常应用于网站头部，使导航菜单在滚动或交互时展现出三维立体感，增强视觉冲击力，同时也提升了用户对网站...

    侧滑栏-侧边导航栏的实现

    在移动应用设计中，侧滑栏（Sidebar）或侧边导航栏是一种常见的界面元素，它为用户提供了一种方便的方式来访问应用程序的主要功能或导航层级。这种设计模式尤其在智能手机和平板电脑上广泛使用，因为它能够在有限的...

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