Android 使用Drawerlayout仿網易新聞用戶端抽屜模式

標籤：drawerlayout   抽屜   網易   

個人感覺網易的用戶端比較前衛,有很多新鮮的東西,有時候模仿這些好的用戶端能學到很多東西

開始今天的主要課題,下面是網易用戶端抽屜模式實現的效果

其實有個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;@Overrideprotected 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,就是這麼簡單啦!

CSDN代碼下載:http://download.csdn.net/detail/elinavampire/8195349

github代碼下載:https://github.com/zimoguo/DrawerMode

................................................源碼.....................................................................

首先看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        }    }

啟用或禁用了所有的抽屜互動。

其他的很少用到了,就先介紹這麼多,如果上面的內容不能滿足你,可以去看源碼,源碼是最好的老師

Android 使用Drawerlayout仿網易新聞用戶端抽屜模式