zoukankan      html  css  js  c++  java
  • 使用DrawerLayout实现侧拉菜单

    侧拉菜单在android应用中非常常见,它的实现方式太多了,今天我们就说说使用Google提供的DrawerLayout来实现侧拉菜单效果,先来看张效果图:



    DrawerLayout的实现其实非常简单,只要按照既有的规范来写即可,先来看看布局文件:

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <RelativeLayout
            android:id="@+id/fragment_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
    
            <RelativeLayout
                android:id="@+id/title_bar"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#63B8FF" >
    
                <ImageView
                    android:id="@+id/leftmenu"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:padding="12dp"
                    android:src="@drawable/menu" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="48dp"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="Title Bar" />
    
                <ImageView
                    android:id="@+id/rightmenu"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_alignParentRight="true"
                    android:padding="12dp"
                    android:src="@drawable/p_center" />
            </RelativeLayout>
    
            <LinearLayout
                android:id="@+id/content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/title_bar"
                android:orientation="vertical" />
        </RelativeLayout>
    
        <RelativeLayout
            android:id="@+id/left"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="@android:color/white" >
    
            <ListView
                android:id="@+id/left_listview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </ListView>
        </RelativeLayout>
    
        <RelativeLayout
            android:id="@+id/right"
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:background="#BCEE68" >
    
            <ImageView
                android:id="@+id/p_pic"
                android:layout_width="72dp"
                android:layout_height="72dp"
                android:layout_centerInParent="true"
                android:src="@drawable/p_pic" />
    
            <TextView
                android:id="@+id/right_textview"
                android:layout_width="wrap_content"
                android:layout_height="48dp"
                android:layout_below="@id/p_pic"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="12dp"
                android:text="个人中心"
                android:textColor="@android:color/black"
                android:textSize="14sp" />
        </RelativeLayout>
    
    </android.support.v4.widget.DrawerLayout>

    首先,根布局就是DrawerLayout,在根布局之后又主要分为三大块,第一块就是我们主界面的内容,第二块是左边拉出来的布局,第三块是右边拉出来的布局(不需要右边侧拉就不用写,这样的话整个布局就只分为两大块),那么系统怎么知道我们这个布局是主布局还是侧拉菜单的布局?请注意左边侧拉菜单布局android:layout_gravity="left"这个属性和右边菜单布局的android:layout_gravity="right"这个属性,哈哈,这下应该明白了吧,系统通过layout_gravity属性的值来判断这个布局是左边菜单的布局还是右边菜单的布局,如果没有这个属性,那不用说,肯定是主界面的布局。


    好了,布局文件写好之后,我们的侧拉效果其实就已经可以实现了,但是你发现左边拉出来什么东西都没有,那是因为还没有数据,所以我们要在MainActivity中初始化左边布局的ListView,给ListView赋值这个想必大家都会,我就直接贴代码了:

    listView = (ListView) findViewById(R.id.left_listview);
    initData();
    adapter = new ContentAdapter(this, list);
    		listView.setAdapter(adapter);

    初始化数据的方法:

    	private void initData() {
    		list = new ArrayList<ContentModel>();
    
    		list.add(new ContentModel(R.drawable.doctoradvice2, "新闻", 1));
    		list.add(new ContentModel(R.drawable.infusion_selected, "订阅", 2));
    		list.add(new ContentModel(R.drawable.mypatient_selected, "图片", 3));
    		list.add(new ContentModel(R.drawable.mywork_selected, "视频", 4));
    		list.add(new ContentModel(R.drawable.nursingcareplan2, "跟帖", 5));
    		list.add(new ContentModel(R.drawable.personal_selected, "投票", 6));
    	}
    ContentModel类:

    public class ContentModel {
    
    	private int imageView;
    	private String text;
    	private int id;
    	
    	
    	public int getId() {
    		return id;
    	}
    
    	public void setId(int id) {
    		this.id = id;
    	}
    
    	public ContentModel() {
    	}
    
    	public ContentModel(int imageView, String text, int id) {
    		this.imageView = imageView;
    		this.text = text;
    		this.id = id;
    	}
    
    	public int getImageView() {
    		return imageView;
    	}
    
    	public void setImageView(int imageView) {
    		this.imageView = imageView;
    	}
    
    	public String getText() {
    		return text;
    	}
    
    	public void setText(String text) {
    		this.text = text;
    	}
    
    }

    数据适配器:

    public class ContentAdapter extends BaseAdapter {
    
    	private Context context;
    	private List<ContentModel> list;
    
    	public ContentAdapter(Context context, List<ContentModel> list) {
    		super();
    		this.context = context;
    		this.list = list;
    	}
    
    	@Override
    	public int getCount() {
    		if (list != null) {
    			return list.size();
    		}
    		return 0;
    	}
    
    	@Override
    	public Object getItem(int position) {
    		if (list != null) {
    			return list.get(position);
    		}
    		return null;
    	}
    
    	@Override
    	public long getItemId(int position) {
    		return list.get(position).getId();
    	}
    
    	@Override
    	public View getView(int position, View convertView, ViewGroup parent) {
    		ViewHold hold;
    		if (convertView == null) {
    			hold = new ViewHold();
    			convertView = LayoutInflater.from(context).inflate(
    					R.layout.content_item, null);
    			convertView.setTag(hold);
    		} else {
    			hold = (ViewHold) convertView.getTag();
    		}
    
    		hold.imageView = (ImageView) convertView
    				.findViewById(R.id.item_imageview);
    		hold.textView = (TextView) convertView.findViewById(R.id.item_textview);
    
    		hold.imageView.setImageResource(list.get(position).getImageView());
    		hold.textView.setText(list.get(position).getText());
    		return convertView;
    	}
    
    	class ViewHold {
    		public ImageView imageView;
    		public TextView textView;
    	}
    
    }

    每个Item的布局文件:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" 
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:gravity="center">
        
        <ImageView 
            android:id="@+id/item_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        
        <TextView 
            android:id="@+id/item_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aa"
            android:textSize="20dp"/>
    
    </LinearLayout>


    好了,给左边的侧拉菜单中的ListView赋值之后,在把它拉出来,这下就全都有数据了,但是我除了想通过滑动让侧拉菜单出来之外,我还希望在App的标题栏上有一个按钮,点击之后左边的侧拉菜单也会出来,这要怎么实现?看代码:

    先将原有的标题栏隐藏:

    getActionBar().hide();

    然后:

    leftMenu = (ImageView) findViewById(R.id.leftmenu);
    leftMenu.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				drawerLayout.openDrawer(Gravity.LEFT);
    			}
    		});

    其实很简单,直接调用DrawerLayout的openDrawer方法,参数传Gravity.LEFT表示让左边的侧拉菜单出来,参数如果传Gravity.RIGHT,则表示让右边的侧拉菜单出来。好了,当左边的侧拉菜单出来之后,我希望点击菜单的每一个item,主界面都会有所反应,即当我点击“新闻”,主界面显示新闻内容,当我点击”订阅“,主界面显示订阅的内容,这个也很好实现,首先,点击事件不用说,就是ListView的setOnItemClickListener,点击之后,我们的主界面会显示相应的Fragment,即,如果点击了新闻,则注解卖弄显示新闻的Fragment,如果点击了订阅,则主界面显示订阅的Fragment,看代码:

    		listView.setOnItemClickListener(new OnItemClickListener() {
    
    			@Override
    			public void onItemClick(AdapterView<?> parent, View view,
    					int position, long id) {
    				FragmentTransaction bt = fm.beginTransaction();
    				switch ((int) id) {
    				case 1:
    					bt.replace(R.id.content, new NewsFragment());
    					break;
    				case 2:
    					bt.replace(R.id.content, new SubscriptionFragment());
    					break;
    
    				default:
    					break;
    				}
    				bt.commit();
    				drawerLayout.closeDrawer(Gravity.LEFT);
    			}
    		});

    每次点击之后,就用相应的Fragment替换主界面的LinearLayout,当然,替换完成之后要记得关闭左边的侧拉菜单,传入的参数为Gravity.LEFT表示关闭左边的侧拉菜单,如果传入的菜单为Gravity.RIGHT表示关闭右边的侧拉菜单。这里两个Fragment都很简单,我就不贴源码了,大家一会直接下载Demo看。


    右边的侧拉菜单和左边一样,我就不赘述了,大家有什么问题欢迎留言讨论。

    本文参考:

    1.Android 抽屉效果的导航菜单实现

    2.Android 使用Drawerlayout仿网易新闻客户端抽屉模式 


    Demo下载https://github.com/lenve/DrawerLayout




  • 相关阅读:
    JS定时循环
    JS分组
    中位数 题解
    NOIP2017 D2T3 题解
    CF949E Binary Cards 题解
    友善的树形DP
    300英雄的危机(heroes)
    [北京省选集训2019]图的难题 题解
    洛谷 P1268 树的重量 题解
    洛谷 P2633 Count on a tree 题解
  • 原文地址:https://www.cnblogs.com/lenve/p/5865934.html
Copyright © 2011-2022 走看看