android DrawerLayout 侧边栏实现

最新推荐文章于 2022-10-27 21:34:43 发布
最新推荐文章于 2022-10-27 21:34:43 发布
阅读量7.3k 收藏 9
点赞数
文章标签： 侧边栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jifashihan/article/details/50535541
版权
本文介绍如何使用DrawerLayout实现Android侧边栏功能，并通过代码展示了包含一个标题、车辆列表以及点击列表后右侧滑出PopupWindow的实现过程。文章详细解释了布局结构与关键代码，同时附带了滑动动画效果演示。
摘要由CSDN通过智能技术生成

现在实现侧边栏比较简单了，官方提供的DrawerLayout可以很方便实现。
主要实现方法是:用DrawerLayout 作为界面根控件。在DrawerLayout里面第一个View为当前界面主内容；第二个和第三个View为抽屉菜单内容。如果当前界面只需要一个抽屉菜单，则第三个View可以省略。
第一个View的宽高应当设置为match_parent
第二、三个View需要设置android:layout_gravity=”left”，和android:layout_gravity=”right”且一搬高度设置为match_parent，宽度为固定值，即侧滑菜单的宽度，宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。如果需要监听菜单打开关闭事件，则需要调用 DrawerLayout类的setDrawerListener()
该接口提供了菜单打开关闭等事件的回调函数，例如
onDrawerOpened()
和
onDrawerClosed()
效果图：
这里写图片描述
描述一下：右侧滑出侧边栏，包括一个标题，一个车辆列表，点击列表，右侧滑出一个与侧边栏等宽的popupwindow，也包括标题与列表，点击popupwindow消失。主要有两点，第一是侧边栏，第二是popupwindow以及滑动动画
上代码：
主布局activity_favorite_car.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2">

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

        <boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout
            android:id="@+id/id_titleLayot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/top">

        </boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/id_imageMyCar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="88dp"
                android:layout_marginBottom="88dp"
                android:src="@mipmap/mycar_2" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_linearCarKind"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/rect_white"
            android:padding="10dp"
            android:gravity="center">
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                android:layout_weight="1"
                android:text="@string/mycar_kind"
                android:drawableLeft="@mipmap/mycar"
                android:drawablePadding="10dp"
                android:textColor="#3a3a3a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/next_arrow"
                />
        </LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_right_menu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@mipmap/top"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/id_imageUp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/back"
                android:layout_margin="12dp"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/mycar_favorite"
                android:textColor="#ffffff"
                android:textSize="17sp" />
        </LinearLayout>

        <ListView
            android:id="@+id/id_listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:cacheColorHint="#00000000"
            android:divider="#f2f2f2"
            android:dividerHeight="1dp"/>
    </LinearLayout>

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

主界面代码

//我的爱车
public class FavoriteCarActivity extends BaseActivity implements TitleLayout.titleLayoutClick {
    private TitleLayout titleLayout;
    private ImageView imageViewCar;
    private LinearLayout linearLayoutCarKind;
    private LinearLayout linearLayoutRight;//右边栏
    private DrawerLayout mDrawerLayout;
    private ListView listViewCar;//车名称
    private ArrayList<String> carNameList = new ArrayList<>();//车名称
    private ArrayList<String> carModelList = new ArrayList<>();//车类型
    private PopupWindow popupWindow = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_favorite_car);
        titleLayout = (TitleLayout) findViewById(R.id.id_titleLayot);
        titleLayout.setTitle("我的爱车");
        imageViewCar = (ImageView) findViewById(R.id.id_imageMyCar);
        ImageView imageViewUp = (ImageView) findViewById(R.id.id_imageUp);
        linearLayoutCarKind = (LinearLayout) findViewById(R.id.id_linearCarKind);
        linearLayoutRight = (LinearLayout) findViewById(R.id.id_right_menu);
        linearLayoutCarKind.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                OpenRightMenu();
            }
        });
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.RIGHT);
        listViewCar = (ListView) findViewById(R.id.id_listView);
        for (int i = 0; i < 10; i++) {
            carNameList.add("保时捷");
            carModelList.add("Panamera");
        }

        CarAdapter carAdapter = new CarAdapter();
        listViewCar.setAdapter(carAdapter);
        listViewCar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                showCarModelPopupWindow();
            }
        });
        imageViewUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.closeDrawers();
            }
        });
    }


    public void OpenRightMenu() {
        mDrawerLayout.openDrawer(Gravity.RIGHT);
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                Gravity.RIGHT);
    }

    private class CarAdapter extends BaseAdapter {

        public CarAdapter() {

        }

        @Override
        public int getCount() {
            return carNameList.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_name_item, null);
            }

            TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCar);
            textViewCarName.setText(carNameList.get(position));


            return convertView;
        }

    }

    @Override
    public void leftViewClick() {
        finish();
    }

    @Override
    public void rightViewClick() {

    }


    private void showCarModelPopupWindow() {
        View view = View.inflate(FavoriteCarActivity.this, R.layout.car_model_list, null);
        ImageView imageViewUp = (ImageView) view.findViewById(R.id.id_imageUp);
        TextView textViewTitle = (TextView) view.findViewById(R.id.id_textViewCarName);
        ListView listViewCarModel = (ListView) view.findViewById(R.id.id_listViewCarModel);
        popupWindow = new PopupWindow(view, linearLayoutRight.getWidth(),
                LinearLayout.LayoutParams.MATCH_PARENT, true);
        popupWindow.setAnimationStyle(R.style.MenuAnimationLeftRight);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());//需要设置背景，用物理键返回的时候
        popupWindow.setFocusable(true);
        popupWindow.setOutsideTouchable(true);  //设置点击屏幕其它地方弹出框消失
        CarModelAdapter carModelAdapter = new CarModelAdapter();
        listViewCarModel.setAdapter(carModelAdapter);
        listViewCarModel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                popupWindow.dismiss();
            }
        });
        popupWindow.showAtLocation(titleLayout, Gravity.RIGHT, 0, 0);
        imageViewUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popupWindow.dismiss();
            }
        });
    }

    private class CarModelAdapter extends BaseAdapter {

        public CarModelAdapter() {

        }

        @Override
        public int getCount() {
            return carModelList.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_model_item, null);
            }

            TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCarModel);
            textViewCarName.setText(carModelList.get(position));


            return convertView;
        }

    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                mDrawerLayout.closeDrawers();
            } else {
                return super.onKeyDown(keyCode, event);
            }


            return true;
        }


        return super.onKeyDown(keyCode, event);
    }
}

标题类TitleLayout.java

/**
 * Created by dell on 2015/11/10.
 * 布局标题
 */
public class TitleLayout extends RelativeLayout {
    TextView textViewContent;
    LinearLayout linearLeft;
    ImageView imageViewLeft;
    LinearLayout linearRight;
    ImageView imageViewRight;
    TextView textViewRight;
    private titleLayoutClick mListener;

    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);
        textViewContent = (TextView) findViewById(R.id.id_textviewContent);
        linearLeft = (LinearLayout) findViewById(R.id.id_linearLeft);
        imageViewLeft = (ImageView)findViewById(R.id.id_left);
        linearRight = (LinearLayout) findViewById(R.id.id_linearRight);
        imageViewRight = (ImageView)findViewById(R.id.id_right);
        textViewRight = (TextView) findViewById(R.id.id_rightText);
        try{
            mListener = (titleLayoutClick) context;
        }catch (Exception e){
            e.printStackTrace();
        }

        linearLeft.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.leftViewClick();
                }
            }
        });
        linearRight.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.rightViewClick();
                }

            }
        });

    }

    public void setTitle(String title) {
        textViewContent.setText(title);
    }

    //设置右边图片
    public void setLinearRightImage(int drawableID) {
        imageViewRight.setBackgroundResource(drawableID);
    }
    //设置左边图片
    public void setLinearLeftImage(int drawableID) {
        imageViewLeft.setBackgroundResource(drawableID);
    }

    //设置右边文本
    public void setLinearRightText(String rightTextString) {
        textViewRight.setText(rightTextString);
    }

    //设置右边图片为可见，根据viewID判断文本与图片的显示，0显示图片，1显示文本
    public void setLinearRightVisibility(int viewID) {

        linearRight.setVisibility(View.VISIBLE);
        if(viewID==0){
            imageViewRight.setVisibility(View.VISIBLE);
            textViewRight.setVisibility(View.INVISIBLE);
        }else if(viewID==1){
            textViewRight.setVisibility(View.VISIBLE);
            imageViewRight.setVisibility(View.INVISIBLE);
        }
    }

    public interface titleLayoutClick {
        public void leftViewClick();//左图片点击
        public void rightViewClick();//右边图片点击
    }
}

标题类布局title.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/id_linearLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true">

        <ImageView
            android:id="@+id/id_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:background="@mipmap/back" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <TextView
            android:id="@+id/id_textviewContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:textColor="@color/white"
            android:textSize="17sp"/>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_linearRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:visibility="invisible">

        <ImageView
            android:id="@+id/id_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />
        <TextView
            android:id="@+id/id_rightText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:textSize="14sp"
            android:textColor="#ffffff"/>
    </LinearLayout>
</RelativeLayout>

列表项布局就不写了
动画style

 <!-- PopupWindow左右滑动的窗口动画 -->
    <style name="MenuAnimationLeftRight">
        <item name="android:windowEnterAnimation">@anim/menu_fadein_right</item>
        <item name="android:windowExitAnimation">@anim/menu_fadein_left</item>
    </style>

menu_fadein_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromXDelta="100%"
        android:toXDelta="0"
        />
</set>

menu_fadein_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%" />
</set>

参考博客
DrawerLayout 抽屉
Android DrawerLayout 高仿QQ5.2双向侧滑菜单

韩zj
关注
Android侧边栏滑动
11-22
这是一个Android侧边栏滑动的小demo，通过这个小demo你狂可以很快学会如何滑出侧边栏目。
Android导航栏与侧边栏实现（TabLayout+Viewpager2+DrawerLayout）
最新发布
weixin_52282455的博客
09-05 1341
想要做的效果目前效果，图标大小还不太匹配，后续会再更改一下拆解分析1导航栏 tablayout+viewpgaer+fragment下面参考中已写得非常好，不再赘述。参考2侧边栏 drawerLayout+toolbar参考图标均来自阿里，可自行查找 https://www.iconfont.cn/下面是具体实现。
android DrawerLayout侧边栏实现
JIANLIPP的博客
01-11 746
一.简介: 本文只是写了个简单的侧边栏的demo，界面基本没有做处理,实现过程中添加了右划对主界面按钮点击事件的拦截，效果图： 二.实现： 1.activity_main.xml: xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android"
Android 侧边栏
奋斗
08-31 4285
简介侧边栏，又叫侧滑菜单，又叫抽屉菜单，一般用于导航功能，侧边滑入或者从标题栏导航图标进入。跟据google设计建议，左侧边栏一般用于app导航，右侧边栏用于操作当前页面内容。 侧边栏由两个部分组成： 布局（DrawerLayout）和侧边栏视图（DrawerView）布局Android提供的布局是： android.support.v4.widget.DrawerLayout布局文件如下：<?x
Android侧边栏
qq_42793219的博客
11-11 804
android.support.v4.widget.DrawerLayout 跟布局要使用androidv4包下的drawerlayout android:layout_gravity="start" 侧边栏的内容布局要使用start private void initData() { for (int i=0;i&lt;10;i++){ li...
Android 侧边菜单栏
12-26
侧边菜单的库 很好用 可以在任何布局中使用
Android侧边栏实现
02-16
手指 左滑动屏幕时，相应的显示和隐藏菜单和内容，代码非常简单，而且是自定义实现的，不借助第三方插件。对应的原理博文： http://blog.csdn.net/evankaka/article/details/43851443
Android侧边栏Menu
香自寒来
12-15 728
 activity_main /* 侧边栏 */ &lt;android.support.design.widget.NavigationView android:id="@+id/navi" android:layout_width="wrap_content" android:layout_height="...
DrawerLayout侧边栏实现demo
01-06
这个“DrawerLayout侧边栏实现demo”项目将向我们展示如何使用DrawerLayout来构建这种功能。 首先，我们需要在布局XML文件中添加DrawerLayout。DrawerLayout有两个主要区域：主内容视图（content view）和抽屉视图...
使用Android DrawerLayout实现侧边栏功能
猛龙过江ing
11-03 7309
    “千呼万唤始出来，犹抱琵琶半遮面”，白居易的《琵琶行》中，两句话将琵琶女的难言之痛与羞涩情态描写的逼真生动，一个抱着琵琶的女子呼之欲出，她的羞涩之美令人久久难以忘怀。     生活中有含蓄之美，程序设计也不能将所有的功能一下子全部展示给用户，当然这也无法实现。这个时候添加侧边栏就成为了一个很好的选择。     DrawerLayout是V4 Library包中实现了侧滑菜单效果的控...
Android代码-一个炫酷的侧边栏效果
08-06
FantasySlide 一个 DrawerLayout 的扩展,具有帅气的动画与创新的交互。一次手势完成滑出侧边栏与选择菜单。欢迎下载 demo 体验。 效果 使用方法 添加依赖 compile 'com.github.mzule.fantasyslide:library:1.0.5' 调用 调用方法基本与 DrawerLayout 一致. 本项目支持左右 (start left end right) 侧边栏同时定义。 <!-- 这里是 SideBar 的子视图--> <!-- 如果需要的话，可以添加右侧边栏--> 最外层的 FantasyDrawerLayout 的使用与官方的 DrawerLayout 完全一致。 SideBar 用来包装每一个菜单项，SideBar 本质上可以当做一个 vertical 的 LinearLayout 来使用。 效果图上的文字变色是表示该菜单处于 hover 状态, hover 状态默认会设定 view 的 pressed 状态为 true。可以通过 Listener 来改写, 下文会有详细说
Android-Android各种侧边栏总结
08-13
Android 各种侧边栏总结
Android 自定义侧边栏列表
12-24
博文：https://blog.csdn.net/Crystal_xing/article/details/85230567，自定义Android 侧边栏列表的封装
Android 侧边栏菜单demo
07-06
侧边栏菜单demo
Android DrawerLayout实现侧边栏（仿京东购物筛选侧边栏）
weixin_39165470的博客
05-13 1567
1、Androidx不需要引入依赖 implementation 'com.android.support:design:29.0.0' 2、布局实现（主布局） <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http..
【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
10-27 1001
DrawerLayout是android中提供的一个布局组件，它是位于【androidx.drawerlayout.widget】包下面的，该布局只能够支持两种侧滑，分别是：左边侧滑、右边侧滑。如果【gravity】属性设置为【left、start】，那么就会进行左滑显示；如果【gravity】属性设置为【right、end】，那么就会进行右滑显示；DrawerLayout布局组件中，提供了一些常用的方法，例如：打开哪一边的菜单栏，关闭菜单栏，添加菜单栏监听事件等。
android侧边栏功能,Android实现滑动侧边栏
weixin_35702787的博客
05-25 1958
在Android应用开发中，滑动侧边栏经常使用，今天我也试着自己进行了一个简单的实践，虽然功能还不是很强大，但是可以保留下来为以后的开发使用，有需要时在进行简单的修改。实现一个滑动侧边栏思路也很简单：1.重写一个SlidingMenu类继承ViewGroup，病危该ViewGroup添加两个子布局，分别为菜单和主界面显示；2.为了得到一个滑动的效果，选择Scroller帮助我们实现，配合ViewG...
Android开发侧边栏（DrawerLayout、NavigationView、Toolbar）,Java && Kotlin(主要用于个人的学习记录)
qq_63050093的博客
07-05 4130
Android开发侧边栏（DrawerLayout、NavigationView、Toolbar）,Java && Kotlin
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值