美文网首页
Android Toolbar

Android Toolbar

作者: BigBigArvin | 来源:发表于2017-05-11 14:25 被阅读134次

    #######Android Toolbar 使用详解
    在Android APi版本21前设置导航栏都是使用ActionBar,但是为了推广Material Design 风格,谷歌在 Android版本21后推出ToolBar来替换它,在版本21后可以直接使用,21下可以导入android.support.v7.widget.Toolbar来兼容。相对于ActionBar ,ToolBar在功能上没有太多变化,但是比它可以在布局里放在任何位置可以更灵活的和其它控件配合实现对应的效果例如DrawerLayout等,这篇文章不做详细说明,接下来看下ToolBar的实际使用。
    Toolbar常用的功能根据API介绍有主要有如下几种:
    1. 设置导航栏图标;
    2. 设置App的logo;
    3. 设置标题
    4. 支持ActionMenu
    5. 可以添加自定义控件

    由于ActionBar和其功能重合,所以一般使用ToolBar都会将ActionBar去掉。而去掉Actionbar有两种方法:
    1.在activity的style中设置

          <style name="Theme.AppCompat.Light.NoActionBar">
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
           </style>
    

    这个来去掉
    2.在代码中设置如
    如果继承的是Activity就调用
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE) ;
    如果继承是AppCompatActivity
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
    接下来看下ToolBar常用的几个方法

      //设置导航栏图标   
       mToolbar.setNavigationIcon(R.drawable.tile);
       //设置app logo
       mToolbar.setLogo(R.drawable.ic_launcher);
       //设置主标题
       mToolbar.setTitle("Title");
       //设置子标题
      mToolbar.setSubtitle("Subtitle");
    //设置主标题颜色
      mToolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
      //设置title style,包括文字颜色,文字大小
     mToolbar.setTitleTextAppearance(this, R.style.toolbar);
     //设置Subtitle color
    mToolbar.setSubtitleTextColor(getResources().getColor(android.R.color.black));
    //设置Subtitle style
    mToolbar.setSubtitleTextAppearance(this, R.style.toolbar);
      //此方法是设置导航图标的点击事件  
      mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                }
           });
    

    效果如下:

    20170106163228679.png
    //设置右上角的填充菜单 此处menu直接显示在ToolBaritem数量有限制,一般不超过3个多余的都以popview方式显示
      mToolbar.inflateMenu(R.menu.main);
      //设置菜单的点击事件
      toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
    
                    return true;
                }
            });
    
     menu 文件
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
        >
        <item android:id="@+id/menu_scan"
              android:title="呵呵"
              android:icon="@drawable/ic_search"
              app:showAsAction="ifRoom"/>
        <item android:id="@+id/menu_stop"
              android:title="@string/menu_stop"
              app:showAsAction="ifRoom"/>
        <item android:id="@+id/menu_stop1"
              android:title="@string/menu_stop"
              app:showAsAction="ifRoom"/>
        <item android:id="@+id/menu_stop2"
              android:title="@string/menu_stop"
              app:showAsAction="ifRoom"/>
        <item android:id="@+id/menu_stop3"
              android:title="@string/menu_stop"
              app:showAsAction="never"/>
    </menu>
    
    20170106163102612.png

    以上就是toolbar的基本用法,但是实际开发中肯定会遇到各种布局要求,所以toolbar也是支持添加多个自定义控件的。但是自定义的View位于 Logo和 menu 之间,如果ToolBar的所有属性都调用了而有使用了menu此时自定义view控件位置就比较少。而添加自定义控件方法如下:

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:title=""
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="" />
        </android.support.v7.widget.Toolbar>
    

    就是和一般线性布局一样在里面添加控件就ok

    注:如果设置title,而添加的自定义控件过长,此时title会不显示,logo和menu等还是正常显示。
    而我们在实际开发中,导航栏样式会要很多变化,这个时候可以运用到 theme来去改变。
    ToolBar 有两个样式一个是popupTheme(这个是设置弹出菜单的样式) ,一个是theme设置toolbar本身
    样式的
    下面的一个图就是对应一些样式的值,其中大部分的属性更改在api 21后才有效

    20170106174530317.jpg

    popuptheme style如下
    //弹出菜单的样式

     <style name="AppBaseToolBaPoprTheme"> 
            <item name="android:textSize">10sp</item>//设置文字大小
            <item name="android:textColor">@color/font_blue</item>//设置字体色颜色
            <item name="android:background">@color/font_white</item>//设置背景颜色
       </style>
    

    效果如下

    20170106182835899.png

    ToolBar theme 可以如下设置:

    <item name="android:textColorPrimary">@color/font_red</item>//设置Toolbar的title颜色
    <item name="actionMenuTextColor">@color/font_blue</item> //设置显示在Toolbar上menu字体颜色
    <item name="android:background">@color/font_red</item>//设置Toolbar背景颜色
     <item name="android:textSize">30sp</item>//设置显示在Toolbar上menu字体大小
    
    
    20170106183638597.png

    另外如果是要更改默认菜单那个三个点的图标可以通过一下方式

    <style name="AppBaseToolBarTheme" parent="Theme.AppCompat.Light">
    
            <!-- customize the color palette -->
            <item name="colorPrimary">@color/font_red</item>//ActionBar的背景颜色
            <item name="colorPrimaryDark">@color/font_red</item>//状态栏的背景颜色 21上才行
            <item name="colorAccent">@color/font_blue</item>
            <item name="android:textColorPrimary">@color/font_red</item> //title的颜色
            <item name="actionMenuTextColor">@color/font_blue</item>
            <item name="android:background">@color/font_white</item>//toolbar背景颜色
            <item name="actionOverflowButtonStyle">@style/MenuButton.Overflow</item>//三个点按钮的样式
        </style>
    
       <style name="MenuButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
            <item name="android:src">@drawable/ic_search</item>
        </style>
    

    然后在Toolbar Theme中引入AppBaseToolBarTheme该样式就可以
    以上就是我了解Tolbar的基本用法,后面会写和其它控件搭配的用法
    另外说一个坑。
    Toolbar 如果在APi23引入的如果在xml使用的是v7包的化在引入对应的属性的时候必须引入命名空间

    xmlns:app="http://schemas.android.com/apk/res-auto"
    

    并且所有属性都要用这种,否则对应的属性无效,如果直接用的23以上APi可以不用这样

      app:title=""
      app:popupTheme="@style/AppBaseToolBaPoprTheme"
      app:theme="@style/AppBaseToolBarTheme"
    

    在使用menu文件一样存在,都必须引入以上的。

    相关文章

      网友评论

          本文标题:Android Toolbar

          本文链接:https://www.haomeiwen.com/subject/truotxtx.html