AndroidUI系列(1)-ToolBar之基础使用篇

 

先看一下toolbar的基本区域划分

按照这个划分，从左到右的区域依次为：导航区、logo区、自带标题区、自定义标题区以及菜单区。

接下来就按照这个顺序先简单介绍一下各个区域常用属性配置及事件，然后写一个小demo来复盘一下。

导航区：导航区我这里配置的是back返回按钮，用作返回上一页。也可以配置成其他的图标，目的都是用来导航。

                常用的属性有 app:navigationIcon="@drawable/icon_back"，用这个属性来配置左侧导航控件的图标.

                事件 setNavigationOnClickListener，在事件里配置其他操作，比如返回上一页。

logo区：顾名思义，主要用来显示logo，主要的属性有app:logo、app:logoDescription。不过个人觉得意义不大，

                所以不做过多的赘述。

自带标题区：这个区域是toolbar自带的默认标题区域，用于显示大小标题。主要属性有title、titleTextColor、subtltle、

                        subtitleTextColor

自定义标题区：toolbar自带的title属性，但是这个title属性也是有局限性的：不能在布局中设置字体大小和位置。

                           自定义标题区    可以很好的解决这个问题，使用的方法就是在toolbar标签之间添加一层子控件或者子布局，

                           比如  TextView或者LinearLayout，这    个时候就可以不使用title和subtitle字段了。代码如下：

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#2a5caa"
        app:navigationIcon="@drawable/icon_back"
        app:logo="@mipmap/ic_launcher"
         <!--app:title="标题"-->
        <!--app:subtitle="副标题"-->
        app:logoDescription=""
        app:subtitleTextColor="#000000"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="18sp"
            android:text="自定义"/>
    </android.support.v7.widget.Toolbar>

最后就是最右边的菜单区了，

右侧菜单区：这个区域主要靠调用toolbar的inflateMenu方法来实现，这个方法需要传递一个菜单文件的索引，比如：

toolbar.inflateMenu(R.menu.toolbar_menu);

                       接下来要创建一个菜单文件 R.menu.toolbar_menu，res右键--创建资源文件--创建资源类型为menu的菜单文件。

<item android:id="@+id/icon_search"
        android:icon="@drawable/icon_search"
        android:title="搜索"
        app:showAsAction="ifRoom"/>
<item android:id="@+id/icon_menu"
        android:icon="@drawable/icon_menu"
        android:title="设置"
        app:showAsAction="ifRoom"/>

                    然后调用toolbar.inflateMenu(R.menu.toolbar_menu);程序跑起来之后就会看到右侧的菜单区了。基本布局和使用介绍   完了，接下来就是用一个demo来复盘一下了。