ToolBar的使用详解及配合TabLayout
一、概述
自ToolBar的推出后，深受广大程序猿的青睐，这里根据自己的使用做一个简单的总结，以及在使用过程中所遇到的坑，作为以后一个知识点的查阅：
先看看效果图，仅仅是展示一下ToolBar和Tablayout的Demo，并未添加其他功能
二 、ToolBar的使用
设置stytle
在设置ToolBar的stytle之前，先熟悉一下，安卓界面的ActionBar中各属性所对应的位置：
这里为了详细讲解，改变系统自带的ActionBar的stytle，
这里讲我开始遇到的一个小坑，最初开始按照ToolBar的要求设置是
<style name="AppTheme.Base" parent="Theme.AppCompat">结果竟然报错：
AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, Android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false 找了一会的方法，经过多次尝试，将stytle改变成：
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">竟然解决了，看来网上的使用教程，也会有BUG，真是纸上得来终觉浅。。。。。
xml布局
为了代码简洁及复用，可以使用和将ToolBar单独分理出来;
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
android.support.v7.widget.Toolbar>
merge>- axtivity_main中导入ToolBar
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.example.alex.toolbar.MainActivity">
<include
android:id="@+id/toolBar_main"
layout="@layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
include>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabBackground="@color/yello"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/colorAccent">
android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_a"
android:layout_width="match_parent"
android:layout_height="match_parent">
android.support.v4.view.ViewPager>
LinearLayout>
<RelativeLayout
android:layout_width="220dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff">
<ImageView
android:id="@+id/imageView"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:src="@drawable/arrive_now_icon" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/imageView">ListView>
RelativeLayout>
android.support.v4.widget.DrawerLayout>
LinearLayout>细心的同学可以看到上面用到了TabLayout（艹，打个TabLayout竟然打出了“玉蒲团”，这搜狗。。。。），具体的TabLayout的使用后面再详解；
- Java中代码的调用
toolbar.setLogo(R.drawable.arrive_now_icon);
toolbar.setTitle("ToolBar");
setSupportActionBar(toolbar);
toolbar.setOnMenuItemClickListener(onMenuItemClickListener);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
setTitle("OPEN");
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
setTitle("ToolBar");
}
};
actionBarDrawerToggle.setDrawerIndicatorEnabled(true);
drawerLayout.setDrawerListener(actionBarDrawerToggle);到这里有碰到了一个坑，耽误了好久，不知道使用过ToolBar的人有没有碰到过，就是左上角的图片是个箭头，而且不会随着侧滑而旋转，最后发现有两个方法没有重写：
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
if (actionBarDrawerToggle != null) {
actionBarDrawerToggle.syncState();
}
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
if (actionBarDrawerToggle != null) {
actionBarDrawerToggle.onConfigurationChanged(newConfig);
}
}
}- Menu菜单设置
xml中代码
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item android:id="@+id/action_edit"
android:title="AA"
android:orderInCategory="80"
android:icon="@drawable/arrive_now_icon"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_share"
android:title="BB"
android:orderInCategory="90"
android:icon="@drawable/arrive_now_icon"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
android:title="CC"
android:orderInCategory="100"
app:showAsAction="never"/>
menu>在Activity中导入xml界面
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}ToolBar使用：
private Toolbar.OnMenuItemClickListener onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_edit:
break;
case R.id.action_share:
break;
case R.id.action_settings:
break;
}
return true;
}
};将OnMenuItemClickListener设置给ToolBar：
toolbar.setOnMenuItemClickListener(onMenuItemClickListener);注：如果想点击事件，手动关闭侧滑栏：
drawerLayout.closeDrawer(Gravity.LEFT);前人填上的坑成就以后的平坦大道，到此ToolBar的使用介绍完毕，希望对大家有所帮助，
TabLayout的使用
- 导入第三方开源库
compile 'com.android.support:design:24.2.1'- 代码中的使用
tabLayout.setupWithViewPager(viewPager);注：设置的viewPager，在重写Adapter时需要重写getPageTitle(int position)：
@Override
public CharSequence getPageTitle(int position) {
return Content.string[position];
}这里只是简单的使用，具体TabLayout的用法及属性请参考：Design库-TabLayout属性详解
本文源码地址