Android中DrawerLayout+Toolbar实现侧滑效果[DrawerLayout+ToolBar+NavigationView]

工作内容：

1.DrawerLayout+Toolbar实现侧滑效果

2.DrawerLayout+ToolBar+NavigationView实现侧滑效果

涉及类：

v4包中DrawerLayout

v7包中Toolbar

v7包中ActionBarDrawerToggle

实现步骤：按代码提示（代码中有明确标注）

侧滑栏内子控件点击事件：自己去实践哈

layout_drawer.xml（含DrawerLayout的布局文件）

DrawerLayout中的两个LinearLayout,上面一个放置的是主布局，下面一个放置的是侧滑布局（系统默认）

侧滑布局的宽度尽量低于手机屏幕宽度（常见的手机宽度320dp）

<?xml version="1.0" encoding="utf-8"?>
<!--
DrawerLayout最好是做成跟布局之后include引入Activity布局文件
【DrawerLayout没放入跟布局时出错：DrawerLayout must be measured with MeasureSpec.EXACTLY】
DrawerLayout 是一个viewGroup可以放置其他组件
-->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 主布局 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- tablayout 存放标题栏 -->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
app:tabGravity="fill"
app:tabIndicatorColor="@color/orange"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/orange"
app:tabTextColor="@color/deepskyblue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></android.support.v4.view.ViewPager>
<!-- 春夏秋冬四个TextView -->
<include
layout="@layout/layout_fragtest_bottonline"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- 侧滑栏布局 -->
<LinearLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="侧滑Text"
android:textSize="20sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="侧滑Text"
android:textSize="20sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="侧滑Text"
android:textSize="20sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="侧滑Text"
android:textSize="20sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="侧滑Text"
android:textSize="20sp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

activity_drawerdemo.xml

界面就顶部一个toolbar,下面是一个DrawerLayout布局文件

（Toolbar中的属性popupTheme—弹出菜单风格，参考前面的文章）

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
tools:context=".FragmentTestActivity">
<!-- toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/darkturquoise"
app:popupTheme="@style/OverflowMenuStyle">
</android.support.v7.widget.Toolbar>
<!-- 引入含DrawerLayout的布局文件 -->
<include layout="@layout/layout_drawer"/>
</LinearLayout>

DrawerDemoActivity.java

关于ViewPager+Fragment+FragmentPagerAdapter不再赘述，点击参考文章

<span style="font-size:14px;">import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import com.plane.people.planebattle.adapter.FragPagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class DrawerDemoActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
private ViewPager viewPager;
private TabLayout tabLayout;
private FragPagerAdapter fragPagerAdapter;  //碎片适配器
private List<Fragment> fragments;   //存放碎片Fragment
private List<String> titles;    //存放标题
private FragmentManager fm;
private DrawerLayout drawerLayout;
private int [] tvIDs = {R.id.tv_sp,R.id.tv_su,R.id.tv_au,R.id.tv_wi};//TextView的id数组
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawerdemo);
initListener();
initData();
}

/**
* 1.初始化viewPager和tabLayout
* 2.添加点击事件
*/
private void initListener() {
drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
toolbar = (Toolbar)findViewById(R.id.toolbar);
viewPager = (ViewPager)findViewById(R.id.viewpager);
tabLayout = (TabLayout)findViewById(R.id.tablayout);
for (int i = 0; i < tvIDs.length; i++) {
findViewById(tvIDs[i]).setOnClickListener(this);
}
viewPager.addOnPageChangeListener(this);//设置页面切换监听
setToolbar();
<span style="background-color: rgb(153, 255, 153);">//设置完标题栏之后设置
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);  //添加返回键
ActionBarDrawerToggle barDrawerToggle = new
ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.opensideslip,R.string.closesideslip);
barDrawerToggle.syncState();//同步状态
drawerLayout.addDrawerListener(barDrawerToggle);    //添加打开关闭监听</span>
}

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
return super.dispatchTouchEvent(ev);
}

//设置标题栏Toolbar
private void setToolbar() {
toolbar.setTitle("凤凰卫士");   //设置标题
toolbar.setTitleTextColor(Color.WHITE);//设置标题颜色
toolbar.setSubtitle("新浪消息");    //设置副标题
toolbar.setSubtitleTextColor(Color.WHITE);  //设置副标题字体颜色
toolbar.setNavigationIcon(R.drawable.back);
<span style="background-color: rgb(153, 255, 153);">setSupportActionBar(toolbar);   //必须使用</span>
//添加menu项点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.toolbar_r_img:
Log.e("Test---->","点击了右边图标");
break;
case R.id.toolbar_r
f58c
_1:
Log.e("Test---->","点击了弹出菜单1");
break;
case R.id.toolbar_r_2:
Log.e("Test---->","点击了弹出菜单2");
break;
case R.id.toolbar_r_3:
Log.e("Test---->","点击了弹出菜单3");
break;
}
return true;    //返回为true
}
});
}
//设置menu（右边图标）
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu); //解析menu布局文件到menu
return true;
}

//初始化数据
private void initData() {
fragments = new ArrayList<>();
titles = new ArrayList<>();
fm = getSupportFragmentManager();
fragments.add(new Fragment_spring());
fragments.add(new Fragment_summer());
fragments.add(new Fragment_autumn());
fragments.add(new Fragment_winter());
titles.add("春");
titles.add("夏");
titles.add("秋");
titles.add("冬");
fragPagerAdapter = new FragPagerAdapter(fm,fragments,titles);
viewPager.setAdapter(fragPagerAdapter);
tabLayout.setupWithViewPager(viewPager);//标题栏TabLayout关联ViewPager
}

/**
* 实现点击几个TextView显示对应的ViewPager页
* @param v
*/
@Override
public void onClick(View v) {
for (int i = 0; i < tvIDs.length; i++) {
if(v.getId() == tvIDs[i]){
((TextView)findViewById(tvIDs[i])).setTextColor(Color.CYAN);
}else {
((TextView)findViewById(tvIDs[i])).setTextColor(Color.BLACK);
}
}
switch (v.getId()){
case R.id.tv_sp:
viewPager.setCurrentItem(0);
break;
case R.id.tv_su:
viewPager.setCurrentItem(1);
break;
case R.id.tv_au:
viewPager.setCurrentItem(2);
break;
case R.id.tv_wi:
viewPager.setCurrentItem(3);
break;
}
}
//OnPageChangeListener的实现方法
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//OnPageChangeListener的实现方法
@Override
public void onPageSelected(int position) {
for (int i = 0; i < tvIDs.length; i++) {
if(position == i){
((TextView)findViewById(tvIDs[i])).setTextColor(Color.CYAN);
}else {
((TextView)findViewById(tvIDs[i])).setTextColor(Color.BLACK);
}
}
}
//OnPageChangeListener的实现方法
@Override
public void onPageScrollStateChanged(int state) {

}
}</span>

实现效果：

默认的toolbar中的NavigationIcon会在点击后产生系统默认的动画效果最后展示出侧滑栏的同时按钮变为返回尖头

侧滑注意：

上面的代码实现之后会出现点击侧滑栏中的空白部分会点到下面一层，请做如下处理：【linear是drawerLayout的侧滑栏布局最外层LinearLayout】



侧滑栏的实现【侧滑部分使用NavigationView实现】

DrawerLayout+ToolBar+NavigationView

主布局XML代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
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:orientation="vertical"
tools:openDrawer="start">

<include
layout="@layout/layout_content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.NavigationView"
app:headerLayout="@layout/layout_nav_header_main" //头部布局，对应Java中的navigationView.getHeader(0)
app:itemIconTint="@color/menu_item_tint"	  //得到View.findViewById来获取头布局中的控件
app:itemTextColor="@color/menu_item_tint"
app:menu="@menu/menu_main_drawer" //Menu布局，对应java中的navigationView.getMenu();
/>
</android.support.v4.widget.DrawerLayout>

头部布局xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_140">

<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login_github"
android:textSize="@dimen/sp_20"
android:textColor="@android:color/white"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
style="@style/Widget.AppCompat.ActionButton"
android:drawableRight="@drawable/ic_login"
android:drawablePadding="@dimen/dp_3"
tools:ignore="RelativeOverlap"/>

<ImageView
android:id="@+id/ivIcon"
android:layout_width="@dimen/dp_50"
android:layout_height="@dimen/dp_50"
android:layout_marginRight="@dimen/dp_3"
android:layout_alignRight="@+id/btnSearch"
android:layout_alignParentTop="true"
android:layout_marginTop="@dimen/dp_20"
android:src="@drawable/ic_avatar"/>

<Button
android:id="@+id/btnSearch"
android:layout_width="@dimen/dp_300"
android:layout_height="wrap_content"
android:layout_below="@+id/btnLogin"
android:drawableLeft="@drawable/ic_search"
android:drawablePadding="@dimen/dp_6"
android:paddingTop="@dimen/dp_6"
android:paddingBottom="@dimen/dp_6"
android:layout_marginTop="@dimen/dp_10"
android:layout_centerHorizontal="true"
android:text="@string/search"
android:gravity="left|center_vertical"
android:textColor="@android:color/white"
android:theme="@style/AppTheme.Button.Transparent"/>

</RelativeLayout>

menu布局xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:title="@string/github">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/github_hot_repo"
android:icon="@drawable/ic_hot_repo"
android:title="@string/hot_repo"/>
<item
android:id="@+id/github_hot_coder"
android:icon="@drawable/ic_hot_coder"
android:title="@string/hot_coder"/>
<item
android:id="@+id/github_trend"
android:icon="@drawable/ic_trend"
android:title="@string/trend"/>
</group>
</menu>
</item>

<item
android:title="@string/arsenal">
<menu>

<group android:checkableBehavior="single">
<item
android:id="@+id/arsenal_my_repo"
android:icon="@drawable/ic_my_repo"
android:title="@string/my_repo"/>
<item
android:id="@+id/arsenal_recommend"
android:icon="@drawable/ic_recommend"
android:title="@string/recommend"/>
</group>
</menu>
</item>

<item
android:title="@string/tips_and_tricks">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/tips_daily"
android:icon="@drawable/ic_tips"
android:title="@string/tips_daily"/>
<item
android:id="@+id/tips_share"
android:icon="@drawable/ic_share"
android:title="@string/share"/>
</group>
</menu>
</item>

</menu>

java代码就不贴了【找侧滑栏中的控件看红色字的部分】

效果图：