带你实现开发者头条(二) 实现左滑菜单

简介:

title: 带你实现开发者头条(二) 实现左滑菜单
tags: 左滑菜单,android 自带侧滑,DrawerLayout
grammar_cjkRuby: true
---

今天开始模仿开发者头条的侧滑菜单,是本系列第二篇文章,相信大家已经看到很多app使用这种侧滑。今天我来教大家用android自带DrawerLayout控件实现。

DrawerLayout是SupportLibrary包中实现了侧滑菜单效果的控件,可以说DrawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(DrawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。

一.先上效果图:

这里写图片描述

二.代码实现

1.drawerLayout其实是一个布局控件,跟LinearLayout等控件是一种东西,但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果。我这边把侧滑菜单的内容放一个布局文件了。

<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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="true"
        android:fitsSystemWindows="true" >

        <include
            android:id="@+id/rl_title"
            layout="@layout/layout_main_title" />

        <!-- The main content view -->

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/rl_title"
            android:background="@color/white_normal" >
        </FrameLayout>
    </RelativeLayout>

    <!-- The navigation view -->
    <FrameLayout
        android:id="@+id/left_drawer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" >
        <!--   左侧菜单 -->
        <include layout="@layout/layout_main_left" />
    </FrameLayout>
</android.support.v4.widget.DrawerLayout>

注意事项
主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单,谁是主内容区
侧滑菜单的部分的布局(这里是ListView)可以设置layout_gravity属性,他表示侧滑菜单是在左边还是右边。

2.MainActivity.java 继承FragmentActivity
1).设置内容Fragment,设置状态栏
2).处理左侧点击事件,在点击事件中设置选中背景,关闭左边侧滑菜单。

public class MainActivity extends FragmentActivity{
    private DrawerLayout mDrawerLayout;
    private RelativeLayout rlHome, rlGift, rlShare;
    private int currentSelectItem = R.id.rl_home;// 默认首页
    private ContentFragment contentFragment;

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

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        findViewById(R.id.iv_menu).setOnClickListener(clickListener);
        
        initLeftMenu();//初始化左边菜单
        
        contentFragment=new ContentFragment();
        getSupportFragmentManager().beginTransaction().add(R.id.content_frame,contentFragment).commit();  

        setWindowStatus();
    }

    private void initLeftMenu() {
        rlHome = (RelativeLayout) findViewById(R.id.rl_home);
        rlGift = (RelativeLayout) findViewById(R.id.rl_gift);
        rlShare = (RelativeLayout) findViewById(R.id.rl_share);

        rlHome.setOnClickListener(onLeftMenuClickListener);
        rlGift.setOnClickListener(onLeftMenuClickListener);
        rlShare.setOnClickListener(onLeftMenuClickListener);

        rlHome.setSelected(true);
    }

    private OnClickListener onLeftMenuClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (currentSelectItem != v.getId()) {//防止重复点击
                currentSelectItem=v.getId();
                noItemSelect();
                
                switch (v.getId()) {
                case R.id.rl_home:
                    rlHome.setSelected(true);
                    contentFragment.setContent("这是首页");
                    break;
                case R.id.rl_gift:
                    rlGift.setSelected(true);
                    contentFragment.setContent("这是礼物兑换");
                    break;
                case R.id.rl_share:
                    rlShare.setSelected(true);
                    contentFragment.setContent("这是我的分享");
                    break;
                }
                
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            }
        }
    };
    
    private void noItemSelect(){
        rlHome.setSelected(false);
        rlGift.setSelected(false);
        rlShare.setSelected(false);
    }

    private OnClickListener clickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.iv_menu:// 打开左边抽屉
                mDrawerLayout.openDrawer(Gravity.LEFT);
                break;
            }
        }
    };

    // 设置状态栏
    private void setWindowStatus() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // 透明状态栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 透明导航栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            // 设置状态栏颜色
            getWindow().setBackgroundDrawableResource(R.color.main_color);
        }
    }
}

3.左侧菜单item选中背景的布局文件 selector_left_menu_item.xml。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/menu_left_item_select" android:state_selected="true"/>
    <item android:drawable="@color/white_normal"/>
</selector>

4.ContentFragment 显示内容的Fragment 这里我加了一个设置内容的方法,就是用来点击左侧切换显示用的。

public class ContentFragment extends Fragment{
    private TextView tvContent;
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
        View rootView=LayoutInflater.from(getActivity()).inflate(R.layout.fragment_content, null);
        tvContent=(TextView) rootView.findViewById(R.id.tv_content);
        return rootView;
    }
    
    public void setContent(String content){
        tvContent.setText(content);
    }
}

5.drawerLayout与Fragment是什么关系?
我们看到很多使用drawerLayout的代码中都同时使用了Fragment,这会造成误解,以为使用drawerLayout必须用到Fragment,其实这是错误的,使用Fragment是因为在侧滑菜单被点击的时候,主内容区如果内容比较复杂,用Fragment去填充会更容易,如果你的主内容区只是一个简单的字符串,只想在不同菜单点击的时候更新一下字符串的内容,我觉得没必要用Fragment。我这边用Fragment所做的就是更新字符串内容这么简单。

目录
相关文章
|
SQL 数据可视化 关系型数据库
低代码平台——减少开发bug,解放程序员
低代码平台——减少开发bug,解放程序员
171 0
|
大数据 开发者 Python
Python中的迭代器和生成器
在Python编程中,迭代器和生成器是非常重要的概念。本文将深入探讨Python中迭代器和生成器的使用方法,以及它们在提高程序效率和性能方面的作用,帮助读者更好地理解和运用这两个概念。
58 2
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1239 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1219 87
|
11天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1800 13
|
20天前
|
人工智能 运维 安全