带你实现开发者头条(二) 实现左滑菜单-阿里云开发者社区

开发者社区> ansen_666> 正文

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

简介:
+关注继续查看

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所做的就是更新字符串内容这么简单。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
AI开发者福音!阿里云推出国内首个基于英伟达NGC的GPU优化容器
3月28日,在2018云栖大会·深圳峰会上,阿里云宣布与英伟达GPU 云 合作 (NGC),开发者可以在云市场下载NVIDIA GPU 云镜像和运行NGC 容器,来使用阿里云上的NVIDIA GPU计算平台。
5773 0
深入浅出,带你真正了解 Spring Boot | 开发者社区精选文章合集(四十五)
Spring 框架就像一个家族,Spring Boot的项目只是普通的Spring项目,深入了解Spring Boot,走进实战,知晓Spring Boot的新特性。
209 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2782 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4397 0
阿里如何用Java?8位专家讲解,871节课程,带你学Java | 开发者社区年终礼包
Java 是常居 TIOBE 榜首的编程语言,社区为广大开发者精心准备了一份 “Java 学习宝典” ,一文教你学懂 Java !还不快来收藏?
60030 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10760 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1074 0
+关注
ansen_666
有三年android开发经验,开发过加密.短视频.直播app,一直在互联网公司工作,目前就职于上海翼成科技,担任android开发组长。
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载