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

最新推荐文章于 2019-07-30 09:59:53 发布

转载最新推荐文章于 2019-07-30 09:59:53 发布 · 1.5k 阅读

Android 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何使用Android的DrawerLayout实现左右滑动抽屉效果，并提供代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：http://blog.youkuaiyun.com/elinavampire/article/details/41477525

个人感觉网易的客户端比较前卫,有很多新鲜的东西,有时候模仿这些好的客户端能学到很多东西

开始今天的主要课题,下面是网易客户端抽屉模式实现的效果

其实有个Drawerlayout这个布局,你得问题就已经解决掉一大半了,Drawerlayout布局本身就提供了左划和右划的功能

先上代码,然后慢慢解答,看完这篇博客你就知道Drawerlayout怎么用了

首先上逐步局文件代码

[html]view plaincopy 
   
 <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" >  
   
     <FrameLayout  
         android:id="@+id/fragment_layout"  
         android:layout_width="match_parent"  
         android:layout_height="match_parent" >  
     </FrameLayout>  
   
     <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="@android:color/holo_green_light">  
   
         <TextView  
             android:id="@+id/right_textview"  
             android:layout_width="match_parent"  
             android:layout_height="match_parent"  
             android:text="个人登陆页面" />  
     </RelativeLayout>  
   
 </android.support.v4.widget.DrawerLayout>  

Drawerlayout是Androidv4包里自带的,既然是自带的那么直接拿来用就可以了,当然前提是你得工程里有v4包

下面解释上面的布局文件,让你懂得Drawerlayout用法,首先Drawerlayout支持左划和右划,那他是如何控制的呢?不居中告诉你,以上布局分为三部分,一般情况下,第一部分是主步局,第二部分是左划的布局,第三部分是右划的布局,其实这里的左向滑动和右向滑动是通过gravity控制,左划界面android:layout_gravity="left" 当然这里的left也可以用start代替,右划界面就理所当然的是android:layout_gravity="right" ,同样right也可以用end代替,其余的应该明白了吧!不懂留言,我认真为你解答

下面在贴一下主界面的代码,你看懂Drawerlayout用法其余的就很简单了,妈妈再也不懂担心你的学习了

[java]view plaincopy 
   
 package com.sdufe.thea.guo;  
   
 import java.util.ArrayList;  
 import java.util.List;  
   
 import com.sdufe.thea.guo.adapter.ContentAdapter;  
 import com.sdufe.thea.guo.model.ContentModel;  
   
 import android.os.Bundle;  
 import android.app.Activity;  
 import android.support.v4.widget.DrawerLayout;  
 import android.support.v4.widget.DrawerLayout.DrawerListener;  
 import android.view.Menu;  
 import android.view.MotionEvent;  
 import android.view.View;  
 import android.view.View.OnTouchListener;  
 import android.widget.ArrayAdapter;  
 import android.widget.ListView;  
 import android.widget.RelativeLayout;  
 import android.widget.TextView;  
   
 public class MainActivity extends Activity {  
       
     private DrawerLayout drawerLayout;  
     private RelativeLayout leftLayout;  
     private RelativeLayout rightLayout;  
     private List<ContentModel> list;  
     private ContentAdapter adapter;  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
           
         drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);  
         leftLayout=(RelativeLayout) findViewById(R.id.left);  
         rightLayout=(RelativeLayout) findViewById(R.id.right);  
         ListView listView=(ListView) leftLayout.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, "新闻"));  
         list.add(new ContentModel(R.drawable.infusion_selected, "订阅"));  
         list.add(new ContentModel(R.drawable.mypatient_selected, "图片"));  
         list.add(new ContentModel(R.drawable.mywork_selected, "视频"));  
         list.add(new ContentModel(R.drawable.nursingcareplan2, "跟帖"));  
         list.add(new ContentModel(R.drawable.personal_selected, "投票"));  
     }  
   
 }  

ok,就是这么简单啦!

优快云代码下载:http://download.youkuaiyun.com/detail/elinavampire/8195349

github代码下载:https://github.com/zimoguo/DrawerMode

................................................源码.....................................................................

首先看Drawerlayout,他继承自ViewGroup,这里主要看一下它里面的方法,方便以后使用

[java]view plaincopy 
   
 /** 
      * Listener for monitoring events about drawers. 
      */  
     public interface DrawerListener {  
         /** 
          * Called when a drawer's position changes. 
          * @param drawerView The child view that was moved 
          * @param slideOffset The new offset of this drawer within its range, from 0-1 
          */  
         public void onDrawerSlide(View drawerView, float slideOffset);  
   
         /** 
          * Called when a drawer has settled in a completely open state. 
          * The drawer is interactive at this point. 
          * 
          * @param drawerView Drawer view that is now open 
          */  
         public void onDrawerOpened(View drawerView);  
   
         /** 
          * Called when a drawer has settled in a completely closed state. 
          * 
          * @param drawerView Drawer view that is now closed 
          */  
         public void onDrawerClosed(View drawerView);  
   
         /** 
          * Called when the drawer motion state changes. The new state will 
          * be one of {@link #STATE_IDLE}, {@link #STATE_DRAGGING} or {@link #STATE_SETTLING}. 
          * 
          * @param newState The new drawer motion state 
          */  
         public void onDrawerStateChanged(int newState);  
     }  

上面主要是监听事件的接口,通常回调的时候回用到它,里面的方法有四个,分别是onDrawerSlide(View drawerView, float slideOffset);onDrawerOpened(View drawerView);onDrawerClosed(View drawerView);onDrawerStateChanged(int newState);

onDrawerSlide(View drawerView, float slideOffset)抽屉改变时使用

onDrawerOpened(View drawerView);打开抽屉

onDrawerClosed(View drawerView)关闭抽屉

onDrawerStateChanged(int newState);改变抽屉的状态

[java]view plaincopy 
   
 /** 
      * Set a simple drawable used for the left or right shadow. 
      * The drawable provided must have a nonzero intrinsic width. 
      * 
      * @param shadowDrawable Shadow drawable to use at the edge of a drawer 
      * @param gravity Which drawer the shadow should apply to 
      */  
     public void setDrawerShadow(Drawable shadowDrawable, int gravity) {  
         /* 
          * TODO Someone someday might want to set more complex drawables here. 
          * They're probably nuts, but we might want to consider registering callbacks, 
          * setting states, etc. properly. 
          */  
   
         final int absGravity = GravityCompat.getAbsoluteGravity(gravity,  
                 ViewCompat.getLayoutDirection(this));  
         if ((absGravity & Gravity.LEFT) == Gravity.LEFT) {  
             mShadowLeft = shadowDrawable;  
             invalidate();  
         }  
         if ((absGravity & Gravity.RIGHT) == Gravity.RIGHT) {  
             mShadowRight = shadowDrawable;  
             invalidate();  
         }  
     }  

上面这个方法是为了设置用于左或右阴影的简单可拉伸。所提供的可拉伸必须有一个非零固有宽度。

[java]view plaincopy 
   
 public void setScrimColor(int color) {  
         mScrimColor = color;  
         invalidate();  
     }  

设置用于该掩盖的主要内容，而抽屉打开网眼织物的颜色。

[java]view plaincopy 
   
 public void setDrawerLockMode(int lockMode, int edgeGravity) {  
         final int absGravity = GravityCompat.getAbsoluteGravity(edgeGravity,  
                 ViewCompat.getLayoutDirection(this));  
         if (absGravity == Gravity.LEFT) {  
             mLockModeLeft = lockMode;  
         } else if (absGravity == Gravity.RIGHT) {  
             mLockModeRight = lockMode;  
         }  
         if (lockMode != LOCK_MODE_UNLOCKED) {  
             // Cancel interaction in progress  
             final ViewDragHelper helper = absGravity == Gravity.LEFT ? mLeftDragger : mRightDragger;  
             helper.cancel();  
         }  
         switch (lockMode) {  
             case LOCK_MODE_LOCKED_OPEN:  
                 final View toOpen = findDrawerWithGravity(absGravity);  
                 if (toOpen != null) {  
                     openDrawer(toOpen);  
                 }  
                 break;  
             case LOCK_MODE_LOCKED_CLOSED:  
                 final View toClose = findDrawerWithGravity(absGravity);  
                 if (toClose != null) {  
                     closeDrawer(toClose);  
                 }  
                 break;  
             // default: do nothing  
         }  
     }  