drawerlayout+（viewpager+tablayout）

drawlayout+（viewpager+tablelayout）

---

drawlayout使用方法：

---

• 简介： DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

• 首先就是编写DrawerLayout的布局，编写布局的时候注意，在子布局里面要必须显示指定侧滑视图的android:layout_gravity属性：

  1. android:layout_gravity = “start”时，从左向右滑出菜单；
  2. android：layout_gravity = “end”时，从右向左滑出菜单，不推荐使用left和right。
     侧滑视图的宽度是可以通过自己设定的，建议不超过320dp。

<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="match_parent" ><android.support.v4.widget.DrawerLayout        xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <!-- 主要内容的视图-->    <!-- main content must be the first element of DrawerLayout because it will be drawn first and drawer must be on top of it -->    <FrameLayout            android:id="@+id/content_frame"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <!-- 导航菜单 -->    <ListView            android:id="@+id/left_drawer"        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="left"//向左向右滑动        android:background="#111"        android:choiceMode="singleChoice"        android:divider="@android:color/transparent"        android:dividerHeight="0dp" /></android.support.v4.widget.DrawerLayout>    </RelativeLayout>

• 关于DrawerLayout的经常使用的方法一般有以下几个：

---

1. setDrawerListener（DrawerLayout.DrawerListener监听器）
2. .setDrawerLockMode（int data），两个参数：DrawerLayout.LOCK_MODE_LOCKED_CLOSED关闭手势滑动，
   DrawerLayout.LOCK_MODE_UNLOCKED打开手势滑动。

---

• 在代码里面可以获取到drawlayout的实例，然后调用一系列的方法。

---

对于tablelayout的使用：TableLayout布局的使用和详解
对于viewpager的使用：viewpager

---

大致方法

• 主页面布局

---

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <include layout="@layout/mybar_layout"/>//头布局    <include layout="@layout/draw_layout" />//抽屉布局</LinearLayout>

---

这里我隐藏了原生的标题，自己用toolbar写了一个，代码如下，其中actionview是一个相当于动画的按钮，用于与抽屉的滑动相搭配，代码：
(我自己调了一下颜色觉得好看一些，对于androidtoolbar可以看一下这一篇文章android：ToolBar详解)

---

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/toolbar"    android:background="@color/material_blue_500"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize">         <at.markushi.ui.ActionView        xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/action"        android:layout_width="56dip"        android:layout_height="56dip"        android:padding="16dip"        app:av_color="@android:color/white"        app:av_action="drawer" />        <TextView            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:gravity="center_vertical"            android:textSize="20sp"            android:textColor="@color/title_white50"            android:text="Daily reading"            android:layout_centerInParent="true" />    </RelativeLayout></android.support.v7.widget.Toolbar>

---

• 抽屉布局：draw_layout.xml

---

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/drawer_layout">    <include layout="@layout/center_layout"/>    <FrameLayout        android:background="@android:color/black"        android:layout_gravity="start"        android:layout_width="250dp"        android:layout_height="match_parent">        <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scaleType="centerCrop"/>        <ListView            android:id="@+id/letf_listview"            android:layout_width="match_parent"            android:layout_height="match_parent">        </ListView>    </FrameLayout></android.support.v4.widget.DrawerLayout>

---

center_layout.xml:

---

<?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"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.TabLayout        android:id="@+id/tableview"        android:background="@color/material_blue_500"        android:layout_width="match_parent"        android:layout_height="?actionBarSize"        app:tabMaxWidth="150dp"        app:tabMinWidth="100dp"        app:tabMode="scrollable"//设置可滑动状态        app:tabGravity="center"//居中        app:tabTextColor="@android:color/black"        app:tabSelectedTextColor="@android:color/white"        app:tabIndicatorColor="@color/material_blue_700">    </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.support.v4.view.ViewPager></LinearLayout>

---

• activity中：

---

通过获取drawlayout，tablelayout，viewpager的实例，将tablelayout和viewpager联动起来代码：

             viewPager.setAdapter(myviewadapter);            tabLayout.setupWithViewPager(viewPager);            tabLayout.getTabAt(0).setText("热门微博");            tabLayout.getTabAt(1).setText("美女如云");            tabLayout.getTabAt(2).setText("帅哥如群");            tabLayout.getTabAt(3).setText("还有很多");

注意：在将tablayout和viewpager联动时，实惠清除tablayout的内容的，所以我们呀哦在联动后在添加列目。

---

actionview 代码：

---

actionView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    if(a==true) {                        actionView.setAction(new BackAction(), ActionView.ROTATE_COUNTER_CLOCKWISE);                        drawerLayout.openDrawer(Gravity.LEFT);                        a=false;                    }                    else {                        actionView.setAction(new DrawerAction(),ActionView.ROTATE_CLOCKWISE);                        drawerLayout.closeDrawers();                        a=true;                    }                }            });            drawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {                @Override                public void onDrawerClosed(View drawerView) {                    super.onDrawerClosed(drawerView);                    actionView.setAction(new DrawerAction(),ActionView.ROTATE_CLOCKWISE);                }                @Override                public void onDrawerOpened(View drawerView) {                    super.onDrawerOpened(drawerView);                    actionView.setAction(new BackAction(), ActionView.ROTATE_COUNTER_CLOCKWISE);                }            });

---

• viewpager这里是自己通过适配器加进去的四个fragment，适配器继承的是FragmentPagerAdapter。

---

效果：

—

---