ToolBar的使用
曾经我们都是使用自己写的布局来做标题栏,但是现在开始使用ToolBar来做标题栏了。
使用了ToolBar 可以关联侧滑栏,让布局变得更好看。
ToolBar(标题栏) + DrawerLayout(整体布局容器) + NavigationView(抽屉布局)
<DrawerLayout>
<LinearLayout>
<ToolBar></ToolBar>
<整体布局>
</LinearLayout>
<NavigationView></NavigationView>
</DrawerLayout>
这只是以上简单的介绍,现在可以详细的介绍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 的整体使用就完成了。