Android Drawer(抽屉,即侧拉栏)的简单使用:

API官网连接：https://developer.android.com/training/implementing-navigation/nav-drawer.html#ListItemClicks

 

现在的apps开发中，侧拉栏已经成为很多设计师的钟爱的一个模块，市面上一抓一大把的 app都有使用到侧拉栏如 QQ等。

 

其实实现侧拉栏的方式有很多种，今天说的是Android官方API给出的比较方便使用的一中，使用到的控件就是今天的猪脚：DrawerLayout

 

DrawerLayout有 v7包版本和 v4包版本，下面使用到的是 v4版本：

 

为了更好的了解和使用控件，我们先来了解一下，到底 DrawerLayout是何方神圣？？

 

Drawer的翻译为“抽屉”即是可以拉出来的柜子，用这个来形容这个控件就真的再合适不过了，

 

 

官方的描述为：使用DrawerLayout来构造一个大多数时间下都是隐藏在屏幕的左边缘，app的主要导航选项模块。

其实说白了就是一个侧拉栏。

 

一 布局部分：

 

新建一个 布局的.xml文件

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.oufenghua.blog.activity.MainActivity">


    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <!--标题栏开始-->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary">

                <ImageView
                    android:id="@+id/drawer_img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="15dp"
                    android:src="@mipmap/drawer" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="BLOG"
                    android:textColor="#FFFFFF"
                    android:textSize="25dp" />

            </RelativeLayout>
            <!--标题栏结束-->

            <!--内容开始-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="9">


            </LinearLayout>
            <!--内容结束-->

        </LinearLayout>


    </FrameLayout>

    <!-- The navigation drawer -->
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/colorPrimary" />

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4"
            android:background="#FFFFFF"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp" />

    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

 

注意！DrawerLayout 必须为布局文件的最顶的布局并且 FrameLayout 必须放在 DrawerLayout子控件的第一个

侧拉栏那一部份的布局用一个布局包裹着并设置其属性android:layout_gravity="start"

然后在进行排版布局

 

用图片说明一下它的布局方式：

 

 

其实是通过把Drawer的布局设置到了屏幕的左外侧来隐藏，当滑动的时候把整个布局用动画的形式平移到窗体内。（其实可以设置 gravity属性为 end把侧拉栏设置到屏幕右边的）

 

二代码部分：

由于重点是对Drawer的使用的介绍，所以我侧拉部分的列表就不做多介绍了。

 

package com.example.oufenghua.blog.activity;

import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.ListView;

import com.example.oufenghua.blog.R;
import com.example.oufenghua.blog.adapter.MyAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    //抽屉式布局
    private DrawerLayout mDrawerLayout;

    //导航列
    private ListView mDrawList;

    //字符集
    private List<String> list = new ArrayList<>();

    //标题栏图标
    private ImageView drawerIcon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();

        setit();

    }

    //关联资源
    private void init() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawList = (ListView) findViewById(R.id.left_drawer);

        drawerIcon = (ImageView) findViewById(R.id.drawer_img);

        list.add("首頁");
        list.add("博客");
        list.add("設置");
        list.add("我的");
        list.add("關於");

    }

    //设置
    private void setit() {

        mDrawList.setAdapter(new MyAdapter(list, MainActivity.this));

        drawerIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.openDrawer(Gravity.LEFT, true);
            }
        });

        mDrawList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            }
        });

    }

}

代码的话主要是关联一下资源然后再设置一个点击监听来打开侧拉栏而已，没什么特别

 

效果显示图：

 

 

 

到这里，对DrawerLayout的简单使用就大概可以了，有跟多高深的操作，等我用到了再写续篇，哈哈哈。。。