ToolBar

最新推荐文章于 2025-04-27 17:31:29 发布

94me

最新推荐文章于 2025-04-27 17:31:29 发布

阅读量367

点赞数

分类专栏： UI笔记文章标签： android toolbar

本文链接：https://blog.csdn.net/JustBeauty/article/details/75508249

版权

UI笔记专栏收录该内容

2 篇文章

订阅专栏

一、ToolBar样式使用一览

1、include

<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:elevation="0dp">

<android.support.v7.widget.Toolbar
    android:id="@+id/tb_toolbar"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:minHeight="?attr/actionBarSize"
    app:maxButtonHeight="20dp"<!-- 控制右上三点和actionView的最大高度-->
    app:titleMargin="2dp"<!--titleMargin-->
    app:titleTextAppearance="@style/TitleTextStyle"
    app:subtitleTextAppearance="@style/mySubTitleTextStyle"
    app:popupTheme="@style/Toolbar_Popup"
    app:theme="@style/ToolbarStyle">
   <TextView   <!--自定义view-->
        android:id="@+id/tv_toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/app_name"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:background="@drawable/shadow"/>
</android.support.design.widget.AppBarLayout>

2、样式
@drawable/shadow

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#40000000"
        android:angle="90" />
</shape>

ToolbarStyle

<!--toolbar-->
<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:actionOverflowButtonStyle"><!--修改三点样式-->
    @style/actionOverflowButtonStyle</item>
    <item name="android:actionMenuTextColor"><!--actionMenu上的文字颜色-->
    @color/actionMenuTextColor</item>
    <item name="android:actionMenuTextAppearance"><!--actionMenu上的文字大小-->
    @style/actionMenuStyle</item>
</style>
<style name="actionMenuStyle">
    <item name="android:textSize">10sp</item>
</style>
<style name="actionOverflowButtonStyle" >
    <item name="android:src">@mipmap/ic_launcher</item>
</style>

ToolBarTitle

    <!--toolbarTitle-->
    <style name="TitleTextStyle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/titleTextColor</item>
    </style>

SubToolBarTitle

<!--toolbarSubTitle-->
<style name="mySubTitleTextStyle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
    <item name="android:textSize">15sp</item>
    <item name="android:textColor">@color/subTitleTextColor</item>
</style>

PopTheme

 <!--toolbarPopMenu-->
<style name="Toolbar_Popup" parent="AppTheme">
    <item name="android:itemBackground">@color/popItemBackGround</item><!--popMenu背景-->
    <item name="android:background">@color/popBackGround</item><!--item背景色-->
    <item name="overlapAnchor">false</item><!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
    <item name="android:textColor">@color/popTextColor</item><!-- 设置弹出菜单文字颜色 -->
    <item name="android:textSize">10sp</item>

二、ToolBar使用相关
1、searchView搭配使用

   <item android:id="@+id/action_search"
    android:title="搜索"
    app:showAsAction="ifRoom|collapseActionView"
    app:actionViewClass="android.support.v7.widget.SearchView" />
    <--注：使用其他view亦可-->

2、Translucent System Bar