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。

---

效果：

—

---