ToolBar的使用

曾经我们都是使用自己写的布局来做标题栏,但是现在开始使用ToolBar来做标题栏了。

使用了ToolBar 可以关联侧滑栏,让布局变得更好看。

ToolBar(标题栏) + DrawerLayout(整体布局容器) + NavigationView(抽屉布局)

<DrawerLayout>

   <LinearLayout> 

  <ToolBar></ToolBar>

        <整体布局>

  </LinearLayout>

  <NavigationView></NavigationView>

</DrawerLayout>

这只是以上简单的介绍,现在可以详细的介绍ToolBar了。首先最重要的是一个图:

ToolBar的使用

所以当我们使用ToolBar的时候,需要知道每个地方是怎样设置的?

toolbar.setNavigationIcon(R.drawable.main_menu);
toolbarTitle.setText("上海"); 
toolbar.setTitle(""); //如果不设置的话,会展示app名称
setSupportActionBar(toolbar); //将toolbar添加到activity布局中

现在这样ToolBar就设置完成了,但是这是andriod的设计方式,你不知道ui那边怎么玩,比如标题是在正中间的,而不是在侧面的。所以对toolbar进行改造下。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:background="@color/transparent"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways|snap">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textAppearance="@style/ToolBar.Text" />
</android.support.v7.widget.Toolbar>

这样Toolbar的第二步你又完成了。

接下来,当我们点击右边图标的时候,需要打开侧滑布局,该怎么处理呢?这就需要配合Activity的回调了,如下:

/**
 * toolbar 点击
 * @param item
 * @return
 */
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        if (viewDrawerLayout.isDrawerOpen(GravityCompat.START)) {
            viewDrawerLayout.closeDrawer(GravityCompat.START);
        } else {
            viewDrawerLayout.openDrawer(GravityCompat.START);
        }
        return true;
    }
    return super.onOptionsItemSelected(item);
}

最后,我们给侧滑布局NavigationView添加内容了。

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:fitsSystemWindows="true"  //沉浸式
    app:headerLayout="@layout/header_layout" //头部布局
    app:menu="@menu/main">  //列表布局
</android.support.design.widget.NavigationView>

其实我在开发的时候,都使用的是头部布局,而没有使用列表布局,是因为列表布局太单一,又回到之前了,你不知道UI是怎么去设置。而使用头部布局的话,你就可以随意的写布局了。

怎么给头部布局,添加点击事件呢?

View drawerView = viewNavigationView.inflateHeaderView(R.layout.layout_main_header);
TextView viewChangePsw = (TextView) drawerView.findViewById(R.id.viewChangePsw);
viewChangePsw.setOnClickListener(this);

去掉xml布局中的app:headerLayout。

现在,ToolBar+NavigationView+DrawerLayout 的整体使用就完成了。