Drawer与Toolbar的简单使用(侧滑抽屉)--详解版

来源:互联网 发布:电信大数据营销 编辑:程序博客网 时间:2024/06/13 05:22

之前写个一篇Drawer与Toolbar的简单使用 - An_nA的博客 - CSDN博客 http://blog.csdn.net/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);                }            }        });
原创粉丝点击