Android Drawer Layout High Imitation QQ5.2 Two-way Side Slide Menu

Keywords: Android DrawerLayout Fragment xml

Original address: http://blog.csdn.net/lmj623565791/article/details/41531475/


For reprinting, please indicate the source: http://blog.csdn.net/lmj623565791/article/details/41531475 This article is from: [Zhang Hongyang's blog]

1. Overview

I wrote one before. Android High Imitation Q QQ5.0 Side Slide Menu Effect Custom Control Invasion QQ5.2 also added a menu on the right, just looked at Drawer Layout, on the one hand, I am interested in official things; on the other hand, it is really convenient to use, so I simply wrote a demo, high imitation QQ5.2 two-way sideslip, to share with you.

First look at the rendering:


Drawer Layout is really convenient to use. Let's look at the usage below.~

2. Use of Drawer Layout

DrawerLayout is used as the root layout directly, then the first View is the content area, the second View is the left menu, the third View is the right sliding menu, and the third one is currently optional.

The width of the first View should be set to match_parent, of course, which is also natural.

Second and third View s need to be set up Android layout_gravity="left" and android:layout_gravity="right" with a height of match_parent and a width of fixed value, that is, the width of the sideslip menu.

Write a layout file as described above, and then set it to Activity to add the right and left side slides. Is it simple?~~~

For example, our layout file:

  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_drawerLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="@drawable/img_frame_background" >  
  7.   
  8.     <RelativeLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:background="@drawable/qq" >  
  12.   
  13.         <Button  
  14.             android:layout_width="40dp"  
  15.             android:layout_height="30dp"  
  16.              android:layout_marginTop="10dp"  
  17.             android:layout_alignParentRight="true"  
  18.             android:background="@drawable/youce"  
  19.             android:onClick="OpenRightMenu" />  
  20.     </RelativeLayout>  
  21.   
  22.     <fragment  
  23.         android:id="@+id/id_left_menu"  
  24.         android:name="com.zhy.demo_zhy_17_drawerlayout.MenuLeftFragment"  
  25.         android:layout_width="200dp"  
  26.         android:layout_height="match_parent"  
  27.         android:layout_gravity="left"  
  28.         android:tag="LEFT" />  
  29.   
  30.     <fragment  
  31.         android:id="@+id/id_right_menu"  
  32.         android:name="com.zhy.demo_zhy_17_drawerlayout.MenuRightFragment"  
  33.         android:layout_width="100dp"  
  34.         android:layout_height="match_parent"  
  35.         android:layout_gravity="right"  
  36.         android:tag="RIGHT" />  
  37.   
  38. </android.support.v4.widget.DrawerLayout>  

Here our main content area is Relative Layout

Two fragments are used in the menu, 200 DP on the left and 100 DP on the right.

Okay, look at our layout file, and then look at our detailed code.

3. Code is the best teacher


1,MenuLeftFragment

  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class MenuLeftFragment extends Fragment  
  10. {  
  11.   
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  14.             Bundle savedInstanceState)  
  15.     {  
  16.         return inflater.inflate(R.layout.layout_menu, container, false);  
  17.     }  
  18. }  

The corresponding layout file:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#00000000" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_centerVertical="true"  
  11.         android:orientation="vertical" >  
  12.   
  13.         <RelativeLayout  
  14.             android:layout_width="match_parent"  
  15.             android:layout_height="wrap_content" >  
  16.   
  17.             <ImageView  
  18.                 android:id="@+id/one"  
  19.                 android:layout_width="50dp"  
  20.                 android:layout_height="50dp"  
  21.                 android:layout_centerVertical="true"  
  22.                 android:layout_marginLeft="20dp"  
  23.                 android:layout_marginTop="20dp"  
  24.                 android:src="@drawable/img_1" />  
  25.   
  26.             <TextView  
  27.                 android:layout_width="fill_parent"  
  28.                 android:layout_height="wrap_content"  
  29.                 android:layout_centerVertical="true"  
  30.                 android:layout_marginLeft="20dp"  
  31.                 android:layout_toRightOf="@id/one"  
  32.                 android:text="First Item"  
  33.                 android:textColor="#f0f0f0"  
  34.                 android:textSize="20sp" />  
  35.         </RelativeLayout>  
  36.   
  37.         <RelativeLayout  
  38.             android:layout_width="match_parent"  
  39.             android:layout_height="wrap_content" >  
  40.   
  41.             <ImageView  
  42.                 android:id="@+id/two"  
  43.                 android:layout_width="50dp"  
  44.                 android:layout_height="50dp"  
  45.                 android:layout_centerVertical="true"  
  46.                 android:layout_marginLeft="20dp"  
  47.                 android:layout_marginTop="20dp"  
  48.                 android:src="@drawable/img_2" />  
  49.   
  50.             <TextView  
  51.                 android:layout_width="fill_parent"  
  52.                 android:layout_height="wrap_content"  
  53.                 android:layout_centerVertical="true"  
  54.                 android:layout_marginLeft="20dp"  
  55.                 android:layout_toRightOf="@id/two"  
  56.                 android:text="Second Item"  
  57.                 android:textColor="#f0f0f0"  
  58.                 android:textSize="20sp" />  
  59.         </RelativeLayout>  
  60.   
  61.         <RelativeLayout  
  62.             android:layout_width="match_parent"  
  63.             android:layout_height="wrap_content" >  
  64.   
  65.             <ImageView  
  66.                 android:id="@+id/three"  
  67.                 android:layout_width="50dp"  
  68.                 android:layout_height="50dp"  
  69.                 android:layout_centerVertical="true"  
  70.                 android:layout_marginLeft="20dp"  
  71.                 android:layout_marginTop="20dp"  
  72.                 android:src="@drawable/img_3" />  
  73.   
  74.             <TextView  
  75.                 android:layout_width="fill_parent"  
  76.                 android:layout_height="wrap_content"  
  77.                 android:layout_centerVertical="true"  
  78.                 android:layout_marginLeft="20dp"  
  79.                 android:layout_toRightOf="@id/three"  
  80.                 android:text="Third Item"  
  81.                 android:textColor="#f0f0f0"  
  82.                 android:textSize="20sp" />  
  83.         </RelativeLayout>  
  84.   
  85.         <RelativeLayout  
  86.             android:layout_width="match_parent"  
  87.             android:layout_height="wrap_content" >  
  88.   
  89.             <ImageView  
  90.                 android:id="@+id/four"  
  91.                 android:layout_width="50dp"  
  92.                 android:layout_height="50dp"  
  93.                 android:layout_centerVertical="true"  
  94.                 android:layout_marginLeft="20dp"  
  95.                 android:layout_marginTop="20dp"  
  96.                 android:src="@drawable/img_4" />  
  97.   
  98.             <TextView  
  99.                 android:layout_width="fill_parent"  
  100.                 android:layout_height="wrap_content"  
  101.                 android:layout_centerVertical="true"  
  102.                 android:layout_marginLeft="20dp"  
  103.                 android:layout_toRightOf="@id/four"  
  104.                 android:text="Fourth Item"  
  105.                 android:textColor="#f0f0f0"  
  106.                 android:textSize="20sp" />  
  107.         </RelativeLayout>  
  108.   
  109.         <RelativeLayout  
  110.             android:layout_width="match_parent"  
  111.             android:layout_height="wrap_content" >  
  112.   
  113.             <ImageView  
  114.                 android:id="@+id/five"  
  115.                 android:layout_width="50dp"  
  116.                 android:layout_height="50dp"  
  117.                 android:layout_centerVertical="true"  
  118.                 android:layout_marginLeft="20dp"  
  119.                 android:layout_marginTop="20dp"  
  120.                 android:src="@drawable/img_5" />  
  121.   
  122.             <TextView  
  123.                 android:layout_width="fill_parent"  
  124.                 android:layout_height="wrap_content"  
  125.                 android:layout_centerVertical="true"  
  126.                 android:layout_marginLeft="20dp"  
  127.                 android:layout_toRightOf="@id/five"  
  128.                 android:text="Fifth Item"  
  129.                 android:textColor="#f0f0f0"  
  130.                 android:textSize="20sp" />  
  131.         </RelativeLayout>  
  132.     </LinearLayout>  
  133.   
  134. </RelativeLayout>  

In fact, it's just a stacked layout.~

2,MenuRightFragment

  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class MenuRightFragment extends Fragment  
  10. {  
  11.   
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  14.             Bundle savedInstanceState)  
  15.     {  
  16.         return inflater.inflate(R.layout.menu_layout_right, container, false);  
  17.     }  
  18. }  

Corresponding layout file:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:gravity="center_vertical"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <LinearLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_centerVertical="true"  
  12.         android:layout_gravity="center_vertical"  
  13.         android:layout_marginBottom="20dp"  
  14.         android:orientation="vertical" >  
  15.   
  16.         <ImageView  
  17.             android:layout_width="60dp"  
  18.             android:layout_height="60dp"  
  19.             android:layout_gravity="center"  
  20.             android:src="@drawable/wode" />  
  21.   
  22.         <TextView  
  23.             android:layout_width="fill_parent"  
  24.             android:layout_height="wrap_content"  
  25.             android:gravity="center"  
  26.             android:text="Scan"  
  27.             android:textColor="#ffffff" />  
  28.     </LinearLayout>  
  29.   
  30.     <LinearLayout  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="wrap_content"  
  33.         android:layout_centerVertical="true"  
  34.         android:layout_gravity="center_vertical"  
  35.         android:layout_marginBottom="20dp"  
  36.         android:orientation="vertical" >  
  37.   
  38.         <ImageView  
  39.             android:layout_width="60dp"  
  40.             android:layout_height="60dp"  
  41.             android:layout_gravity="center"  
  42.             android:src="@drawable/saoma" />  
  43.   
  44.         <TextView  
  45.             android:layout_width="fill_parent"  
  46.             android:layout_height="wrap_content"  
  47.             android:gravity="center"  
  48.             android:text="discussion group"  
  49.             android:textColor="#ffffff" />  
  50.     </LinearLayout>  
  51.   
  52.     <LinearLayout  
  53.         android:layout_width="match_parent"  
  54.         android:layout_height="wrap_content"  
  55.         android:layout_centerVertical="true"  
  56.         android:layout_gravity="center_vertical"  
  57.         android:layout_marginBottom="20dp"  
  58.         android:orientation="vertical" >  
  59.   
  60.         <ImageView  
  61.             android:layout_width="60dp"  
  62.             android:layout_height="60dp"  
  63.             android:layout_gravity="center"  
  64.             android:src="@drawable/wode" />  
  65.   
  66.         <TextView  
  67.             android:layout_width="fill_parent"  
  68.             android:layout_height="wrap_content"  
  69.             android:gravity="center"  
  70.             android:text="Scan"  
  71.             android:textColor="#ffffff" />  
  72.     </LinearLayout>  
  73.   
  74.     <LinearLayout  
  75.         android:layout_width="match_parent"  
  76.         android:layout_height="wrap_content"  
  77.         android:layout_centerVertical="true"  
  78.         android:layout_gravity="center_vertical"  
  79.         android:layout_marginBottom="20dp"  
  80.         android:orientation="vertical" >  
  81.   
  82.         <ImageView  
  83.             android:layout_width="60dp"  
  84.             android:layout_height="60dp"  
  85.             android:layout_gravity="center"  
  86.             android:src="@drawable/saoma" />  
  87.   
  88.         <TextView  
  89.             android:layout_width="fill_parent"  
  90.             android:layout_height="wrap_content"  
  91.             android:gravity="center"  
  92.             android:text="discussion group"  
  93.             android:textColor="#ffffff" />  
  94.     </LinearLayout>  
  95.   
  96. </LinearLayout>  

It's still simple, except that icons are hard to find.~~

3,MainActivity

MainActivity layout files have been posted~~

  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.FragmentActivity;  
  5. import android.support.v4.widget.DrawerLayout;  
  6. import android.support.v4.widget.DrawerLayout.DrawerListener;  
  7. import android.view.Gravity;  
  8. import android.view.View;  
  9. import android.view.Window;  
  10.   
  11. import com.nineoldandroids.view.ViewHelper;  
  12.   
  13. public class MainActivity extends FragmentActivity  
  14. {  
  15.   
  16.     private DrawerLayout mDrawerLayout;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState)  
  20.     {  
  21.         super.onCreate(savedInstanceState);  
  22.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  23.         setContentView(R.layout.activity_main);  
  24.   
  25.         initView();  
  26.         initEvents();  
  27.   
  28.     }  
  29.   
  30.     public void OpenRightMenu(View view)  
  31.     {  
  32.         mDrawerLayout.openDrawer(Gravity.RIGHT);  
  33.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,  
  34.                 Gravity.RIGHT);  
  35.     }  
  36.   
  37.     private void initEvents()  
  38.     {  
  39.         mDrawerLayout.setDrawerListener(new DrawerListener()  
  40.         {  
  41.             @Override  
  42.             public void onDrawerStateChanged(int newState)  
  43.             {  
  44.             }  
  45.   
  46.             @Override  
  47.             public void onDrawerSlide(View drawerView, float slideOffset)  
  48.             {  
  49.                 View mContent = mDrawerLayout.getChildAt(0);  
  50.                 View mMenu = drawerView;  
  51.                 float scale = 1 - slideOffset;  
  52.                 float rightScale = 0.8f + scale * 0.2f;  
  53.   
  54.                 if (drawerView.getTag().equals("LEFT"))  
  55.                 {  
  56.   
  57.                     float leftScale = 1 - 0.3f * scale;  
  58.   
  59.                     ViewHelper.setScaleX(mMenu, leftScale);  
  60.                     ViewHelper.setScaleY(mMenu, leftScale);  
  61.                     ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));  
  62.                     ViewHelper.setTranslationX(mContent,  
  63.                             mMenu.getMeasuredWidth() * (1 - scale));  
  64.                     ViewHelper.setPivotX(mContent, 0);  
  65.                     ViewHelper.setPivotY(mContent,  
  66.                             mContent.getMeasuredHeight() / 2);  
  67.                     mContent.invalidate();  
  68.                     ViewHelper.setScaleX(mContent, rightScale);  
  69.                     ViewHelper.setScaleY(mContent, rightScale);  
  70.                 } else  
  71.                 {  
  72.                     ViewHelper.setTranslationX(mContent,  
  73.                             -mMenu.getMeasuredWidth() * slideOffset);  
  74.                     ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());  
  75.                     ViewHelper.setPivotY(mContent,  
  76.                             mContent.getMeasuredHeight() / 2);  
  77.                     mContent.invalidate();  
  78.                     ViewHelper.setScaleX(mContent, rightScale);  
  79.                     ViewHelper.setScaleY(mContent, rightScale);  
  80.                 }  
  81.   
  82.             }  
  83.   
  84.             @Override  
  85.             public void onDrawerOpened(View drawerView)  
  86.             {  
  87.             }  
  88.   
  89.             @Override  
  90.             public void onDrawerClosed(View drawerView)  
  91.             {  
  92.                 mDrawerLayout.setDrawerLockMode(  
  93.                         DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);  
  94.             }  
  95.         });  
  96.     }  
  97.   
  98.     private void initView()  
  99.     {  
  100.         mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);  
  101.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,  
  102.                 Gravity.RIGHT);  
  103.     }  
  104.   
  105. }  
Well, there's hardly any comment on the code ~~Visa? It's because there's really nothing to annotate.

To make a few points:

1. In order to simulate the right menu of QQ, you need to click to appear, so when initializing DrawerLayout, you use mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT); that means only programming can pop it up.

Then after the pop-up, the gesture needs to be able to slide back, so it's written in OpenRightMenu:

mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.RIGHT); UNLOCK took a look.

Finally, in the onDrawer Closed callback, continue to set mDrawer Layout. setDrawer LockMode (Drawer Layout. LOCK_MODE_LOCKED_CLOSED, Gravity. RIGHT);

2. Animation effect

Nineold and ROIDS are used in animation. For calculating various offsets and scaling ratios of animation, please refer to them. Android High imitation Q QQ5.0 sideslip menu effect custom control attack Basically consistent, the only difference is that ViewHelper.setTranslationX(mContent, mMenu. getMeasuredWidth ()* (1 - scale) is set for Content; Content is on the right side of the menu, Menu is on the menu by default, so we set the offset of the X direction for Content according to the distance drawn from the menu.

Well, actually, you can see that you can do this. Basically, any side-slip menu effect can be written out. If you are interested, you can use Drawer Layout to achieve all the effects of this blog: Android Implementing Custom Control Invasion of Bidirectional Side-Slide Menu in Various Forms .  

3,setDrawerListener

You can also see from the code that you can use setDrawerListener to listen for the opening and closing of menus, and so on. Here the judgement of which menu is the current operation is based on TAG. I think gravity should also be able to judge it.~~


Okay, no, because Drawer Layout defaults to only delimit menus from the border, but QQ delimits the menu gesture area is relatively large, you are interested, you can rewrite Activity's onTouchEvent, judging from inside, if it is left-right sliding gesture magic horse, pop-up menu, should not bother.~~~




Source Click Download

Posted by Whyme on Thu, 11 Jul 2019 16:07:45 -0700

Hot Keywords

©2024 Programmer Group