Android uses Drawerlayout to simulate the drawer mode of Netease news client, scaling androidlayout

Source: Internet
Author: User

Android uses Drawerlayout to simulate the drawer mode of Netease news client, scaling androidlayout

I personally feel that Netease's client is more avant-garde and has a lot of new things. Sometimes I can learn a lot by imitating these good clients.

At the beginning of today's main topics, the following are the effects of Netease client drawer mode implementation

In fact, there is a Drawerlayout layout, and you have to solve the problem. The Drawerlayout layout itself provides the left and right strokes functions.

First go to the code and then answer it slowly. After reading this blog, you will know how to use Drawerlayout.

First, step-by-step local file code

<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 = "personal login page"/> </RelativeLayout> </android. support. v4.widget. drawerLayout>

Drawerlayout is included in the Androidv4 package. Since it comes with it, you can use it directly. Of course, the premise is that you have to have v4 package in the project.

The following explains the layout File above, so that you can understand the usage of Drawerlayout. First, Drawerlayout supports left and right strokes. How does it be controlled? The layout is divided into three parts: The first part is the main step, the second part is the left layout, and the third part is the right layout, in fact, the left sliding and right sliding are controlled by gravity. The left sliding interface android: layout_gravity = "left" can also be replaced by start, android: layout_gravity = "right" is taken for granted on the right-side interface. You can use end instead of the right-side interface. you should understand the rest! I don't know how to leave a message. I will answer it for you.


Next I will post the code on the main interface. You can understand the usage of Drawerlayout and the rest will be simple. Mom will no longer worry about your learning.

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 release) {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.doc toradvice2, "news"); list. add (new ContentModel (R. drawable. infusion_selected, "subscription"); list. add (new ContentModel (R. drawable. mypatient_selected, "image"); list. add (new ContentModel (R. drawable. mywork_selected, "video"); list. add (new ContentModel (R. drawable. nursingcareplan2, ""); list. add (new ContentModel (R. drawable. personal_selected, "Vote "));}}

OK, that's easy!


CSDN code download: http://download.csdn.net/detail/elinavampire/8195349

Github code download: https://github.com/zimoguo/DrawerMode


........................................ ........ Source code ....................................... ..............................

First, let's look at Drawerlayout, which inherits from ViewGroup. Here we mainly look at the methods in it to facilitate future use.

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

The above mainly refers to the interface for listening to events, which is usually used for callback. There are four methods in it: onDrawerSlide (View drawerView, float slideOffset); onDrawerOpened (View drawerView ); onDrawerClosed (View drawerView); onDrawerStateChanged (int newState );

OnDrawerSlide (View drawerView, float slideOffset) used for Drawer change

OnDrawerOpened (View drawerView); open the drawer

OnDrawerClosed (View drawerView) Close drawer

OnDrawerStateChanged (int newState); changed the drawer status

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

The above method is used to set a simple stretch for the Left or Right shadow. The provided tensile property must have a non-zero inherent width.

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

Set the main content used for this masking, while the drawer opens the color of the mesh fabric.

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

All drawer interactions are enabled or disabled.


Others are rarely used, so we will introduce so much. If the content above cannot satisfy you, you can look at the source code. The source code is the best teacher.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.