侧滑抽屉：Drawer与Toolbar的简单使用详解

最新推荐文章于 2024-09-25 09:08:57 发布

原创最新推荐文章于 2024-09-25 09:08:57 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Drawer #侧滑抽屉

Android之路专栏收录该内容

134 篇文章

订阅专栏

本文详细介绍了在Android中如何使用Drawer和Toolbar，包括自定义titlebar，整体界面布局，以及侧滑抽屉的实现。重点讲解了Drawer的布局分布，自定义titlebar的设置方法，并提供了相关代码示例，帮助读者深入理解这两个组件的使用。

之前写个一篇Drawer与Toolbar的简单使用 - An_nA的博客 - 优快云博客 http://blog.youkuaiyun.com/an_nal/article/details/76174332解释Drawer的用法不是很详细，此帖子详细讲解一下。

布局文件样式：

1.整体分布

顶部自定义titlebar（可设置drawer开关图片，drawer所在的位置：左、右），中心布局样式自定义（此处为listview），右外侧drawer布局样式自定义（名为layout_search）。

2.自定义titlebar

1.布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"        android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:elevation="5dp"
    android:background="@color/app_main">
    <RelativeLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="45dp">
    <TextView
        android:paddingRight="10dp"
        android:visibility="gone"
        android:textSize="14sp"
        android:paddingLeft="15dp"
        android:gravity="center_vertical"
        android:drawableLeft="@mipmap/ic_back"
        android:layout_centerVertical="true"
        android:textColor="@color/app_white"
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>
        <TextView
            android:id="@+id/title"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="16sp"
            android:textColor="@color/app_white"/>
   
        <ImageView
            android:visibility="gone"
            android:layout_centerVertical="true"
            android:id="@+id/title_right_img"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="20dp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
    </RelativeLayout>
</RelativeLayout>

2.代码：

public class TitleBar extends RelativeLayout {

    private TextView back;
    private TextView title;
    private ImageView rightImg;

    public TitleBar(Context context) {
        super(context,null);
    }

    public TitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.layout_titlebar, this,true);
        back = (TextView) view.findViewById(R.id.back);
        title = (TextView) view.findViewById(R.id.title);     
        rightImg = (ImageView) findViewById(R.id.title_right_img);
    }
    public void setTitle(String str){
        title.setText(str);
    }
    public void setBackText(String str){
        back.setText(str);}
    public void setBackListener(OnClickListener listener){
        back.setVisibility(VISIBLE);
        back.setOnClickListener(listener);
    }   
    public void setRightImg(int resId,OnClickListener listener){
        rightImg.setImageResource(resId);
        rightImg.setVisibility(VISIBLE);
        rightImg.setOnClickListener(listener);
    }
}

3.整体界面

1.布局：

<?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"
    android:background="@color/app_gray_bg">
<com.android.uoso.limspad.views.TitleBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title_bar"/>
    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawer">
        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:orientation="vertical">
            <include layout="@layout/layout_search" />
        </LinearLayout>

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

注：
1.当在中心布局写了view（此处是listview）后，才会出现打开drawer后，中心是灰色的样式，若中心没有任何布局控件则无此效果。
2.titleBar的右侧图片无旋转动画，需要的自行添加哦。

2.代码：
给titleBar设置顶部标题、顶部右侧drawer开关图片、返回键监听事件：

titleBar.setTitle("页面顶部标题");
        titleBar.setBackListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        titleBar.setRightImg(R.mipmap.ic_drawer, new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (drawer.isDrawerOpen(Gravity.RIGHT)) {
                    //右侧关闭drawer
                    drawer.closeDrawer(Gravity.RIGHT);
                } else {
                    //右侧打开drawer
                    drawer.openDrawer(Gravity.RIGHT);
                }
            }
        });