您的位置:首页 > 移动开发 > Android开发

Android DrawerLayout和NavigationView实现左右侧滑和自定义toolbar。

2016-10-23 21:52 537 查看
首先看效果,如图所示。






由于项目已经完成一部分了,各种效果已经夹杂在一起了,代码就不单独提取出来了,大致代码如下。

布局文件代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/white" />

<android.support.design.widget.TabLayout
android:id="@+id/id_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorColor="@color/black"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/black"
app:tabTextAppearance="@style/TabLayout"
app:tabTextColor="@color/gray" />

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/id_tabLayout"></android.support.v4.view.ViewPager>
</LinearLayout>

<android.support.design.widget.NavigationView
android:id="@+id/navigation_start"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start" />

<android.support.design.widget.NavigationView
android:id="@+id/navigation_end"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_marginTop="55dp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>android:layout_gravity="start"就是左边的,end就是右边的。
然后在activity里面绑定各个控件。@Bind(R.id.navigation_start)
NavigationView navigationStart;
@Bind(R.id.navigation_end)
NavigationView navigationEnd;
@Bind(R.id.toolbar)
Toolbar bar;
@Bind(R.id.drawer_layout)
DrawerLayout drawerLayout
NavigationStartFragment startFragment;
NavigationEndFragment endFragment;然后用自定义的fragment替换掉NavigationView,用自定义的布局文件替换掉toolbar的默认布局
getLayoutInflater().inflate(R.layout.toolbar,bar);
start = (ImageView) findViewById(R.id.iv_start);
end = (ImageView) findViewById(R.id.iv_end);
setSupportActionBar(bar);
start.setOnClickListener(onClickListener);
end.setOnClickListener(onClickListener);R.layout.toolbar就是自定义的布局文件,左右两个image,中间一个标题image。设置点击打开关闭侧滑事件。
startFragment = new NavigationStartFragment();
endFragment = new NavigationEndFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.navigation_start, startFragment).commit();
getSupportFragmentManager().beginTransaction().replace(R.id.navigation_end, endFragment).commit();
//addDrawerListener可以监听侧滑打开关闭事件
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {

}

@Override
public void onDrawerOpened(View drawerView) {

}

@Override
public void onDrawerClosed(View drawerView) {

}

@Override
public void onDrawerStateChanged(int newState) {

}
});


监听到之后里面的具体实现根据项目需求自己发挥。
//drawerLayout.isDrawerOpen可以判断布局菜单是否打开和关闭
private View.OnClickListener onClickListener = new View.OnClickListener() {
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.iv_start:
if(drawerLayout.isDrawerOpen(navigationStart)){
drawerLayout.closeDrawer(navigationStart);
}else{
drawerLayout.openDrawer(navigationStart);
}
break;
case R.id.iv_end:
if(drawerLayout.isDrawerOpen(navigationEnd)){
drawerLayout.closeDrawer(navigationEnd);
}else{
drawerLayout.openDrawer(navigationEnd);
}
break;
}
}
};到此结束。老板把双休改成单休了,真是太累了,受不了。最近都懒得写博客。加油,坚持吧。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息