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

分手后的思念是犯贱 2022-07-12 09:41 169阅读 0赞

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

![2_5QlXvecEWQPhN1Pi.png][]![2_LEQTuZktJNwWilfS.png][]

其实有个Drawerlayout这个布局,你得问题就已经解决掉一大半了,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" >
        <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用法其余的就很简单了,妈妈再也不懂担心你的学习了

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,就是这么简单啦!

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

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

/**
         * 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);改变抽屉的状态

/**
         * 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();
            }
        }

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

public void setScrimColor(int color) {
        
            mScrimColor = color;
            invalidate();
        }

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

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

启用或禁用了所有的抽屉互动。

[2_5QlXvecEWQPhN1Pi.png]: http://www.mincoder.com/images/201448/2_5QlXvecEWQPhN1Pi.png
[2_LEQTuZktJNwWilfS.png]: http://www.mincoder.com/images/201448/2_LEQTuZktJNwWilfS.png