QQ左侧滑动显示

lovefan

对于新版的QQ界面，左侧增加了一个滑动效果，相信小伙伴们早已按耐不住激动的心情，这种效果是如何实现的呢？本篇我们就一起来探讨一二。既然是滑动效果这里就要使用到HorizontalScrollView类，一个水平滑动的效果。

　　对于这个效果我们可以分为一个Item Menu和Layout，通过对Item Menu设置padding值来隐藏和显示左侧的Menu菜单。

　　我们的Menu设计代码：

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="@drawable/img_frame_background" >
   
6.    
   
7.     <LinearLayout
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="wrap_content"
   
10.         android:layout_centerInParent="true"
    
11.         android:orientation="vertical">
    
12.         
    
13.         <RelativeLayout
    
14.             android:layout_width="match_parent"
    
15.             android:layout_height="match_parent">
    
16.             <ImageView
    
17.                android:id="@+id/img1"
    
18.                android:layout_width="50dp"
    
19.                android:layout_height="50dp"
    
20.                android:src="@drawable/img_1"
    
21.                android:layout_marginLeft="20dp"
    
22.                android:layout_marginTop="20dp"
    
23.                android:layout_centerVertical="true"
    
24.                 />
    
25.             <TextView
    
26.                 android:layout_width="wrap_content"
    
27.                 android:layout_height="wrap_content"
    
28.                 android:layout_marginLeft="20dp"
    
29.                 android:textColor="#fff"
    
30.                 android:text="第一个item"
    
31.                 android:layout_toRightOf="@id/img1"
    
32.                 android:layout_centerVertical="true"
    
33.                 />
    
34.        </RelativeLayout>
    
35.       
    
36.         <RelativeLayout
    
37.             android:layout_width="match_parent"
    
38.             android:layout_height="match_parent">
    
39.             <ImageView
    
40.                android:id="@+id/img2"
    
41.                android:layout_width="50dp"
    
42.                android:layout_height="50dp"
    
43.                android:src="@drawable/img_2"
    
44.                android:layout_marginLeft="20dp"
    
45.                android:layout_marginTop="20dp"
    
46.                android:layout_centerVertical="true"
    
47.                 />
    
48.             <TextView
    
49.                 android:layout_width="wrap_content"
    
50.                 android:layout_height="wrap_content"
    
51.                 android:layout_marginLeft="20dp"
    
52.                 android:textColor="#fff"
    
53.                 android:text="第二个item"
    
54.                 android:layout_toRightOf="@id/img2"
    
55.                 android:layout_centerVertical="true"
    
56.                 />
    
57.        </RelativeLayout>
    
58.         
    
59.     </LinearLayout>
    
60. 
    
61. </RelativeLayout>

复制代码

我们的主Activity的Layout代码：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     xmlns:tools="http://schemas.android.com/tools"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:paddingBottom="@dimen/activity_vertical_margin"
   
6.     android:paddingLeft="@dimen/activity_horizontal_margin"
   
7.     android:paddingRight="@dimen/activity_horizontal_margin"
   
8.     android:paddingTop="@dimen/activity_vertical_margin"
   
9.     tools:context=".MainActivity" >
   
10. 
    
11.     <com.example.menu.SlidingMenu
    
12.         android:layout_width="match_parent"
    
13.         android:layout_height="match_parent">
    
14.         <LinearLayout
    
15.             android:layout_width="wrap_content"
    
16.             android:layout_height="match_parent"
    
17.             android:orientation="horizontal"
    
18.             >
    
19.             
    
20.             <include layout="@layout/left_menu"/>
    
21.             
    
22.             <LinearLayout
    
23.                 android:layout_width="match_parent"
    
24.                 android:layout_height="match_parent"
    
25.                 android:background="@drawable/qq"
    
26.                 />
    
27.             
    
28.         </LinearLayout>
    
29.     </com.example.menu.SlidingMenu>
    
30.    
    
31. </RelativeLayout>

复制代码

我们自定义的SlidingMenu：

1. package com.example.menu;
   
2. 
   
3. import android.content.Context;
   
4. import android.util.AttributeSet;
   
5. import android.util.DisplayMetrics;
   
6. import android.util.TypedValue;
   
7. import android.view.MotionEvent;
   
8. import android.view.ViewGroup;
   
9. import android.view.WindowManager;
   
10. import android.widget.HorizontalScrollView;
    
11. import android.widget.LinearLayout;
    
12. 
    
13. public class SlidingMenu extends HorizontalScrollView {
    
14. 
    
15.     private LinearLayout mWapper;
    
16.     private ViewGroup mMenu;
    
17.     private ViewGroup mContent;
    
18.     private int mScreenWidth;//屏幕的宽度
    
19.     private int mMenuWidth;//设置Menu的宽度
    
20.    
    
21.     //dp
    
22.     private int mMenuRightPadding;
    
23.     private boolean once = false;
    
24.    
    
25.     /**
    
26.      * 未使用自定义属性时调用此方法
    
27.      * @param context
    
28.      * @param attrs
    
29.      */
    
30.     public SlidingMenu(Context context, AttributeSet attrs) {
    
31.         super(context, attrs);
    
32.         WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
    
33.         DisplayMetrics outMetrics = new DisplayMetrics();
    
34.         wm.getDefaultDisplay().getMetrics(outMetrics );
    
35.         mScreenWidth = outMetrics.widthPixels;
    
36.         
    
37.         //将dp转换为px
    
38.         mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
    
39.         
    
40.     }
    
41.    
    
42.     /**
    
43.      * 设置内部View的宽和高，以及自己的宽和高
    
44.      */
    
45.     @Override
    
46.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
47.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
48.         
    
49.         if(!once){
    
50.             mWapper = (LinearLayout) getChildAt(0);
    
51.             mMenu = (ViewGroup) mWapper.getChildAt(0);
    
52.             mContent = (ViewGroup) mWapper.getChildAt(1);
    
53.             mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
    
54.             mContent.getLayoutParams().width = mScreenWidth;
    
55.             once = true;
    
56.         }
    
57.         
    
58.     }
    
59. 
    
60.     /**
    
61.      * 设置子View的放置位置
    
62.      * 通过设置偏移量来隐藏Menu
    
63.      */
    
64.     @Override
    
65.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
    
66.         super.onLayout(changed, l, t, r, b);
    
67.         if(changed){
    
68.             this.scrollTo(mMenuWidth, 0);
    
69.         }
    
70.     }
    
71.    
    
72.     /**
    
73.      * 控制手指的滑动效果
    
74.      */
    
75.     @Override
    
76.     public boolean onTouchEvent(MotionEvent ev) {
    
77.         int action = ev.getAction();
    
78.         switch (action) {
    
79.         case MotionEvent.ACTION_UP:
    
80.             int scrollx = getScrollX();//Menu左侧隐藏的区域宽度
    
81.             if(scrollx >= mMenuWidth/2){
    
82.                 this.smoothScrollTo(mMenuWidth, 0);
    
83.             }else{
    
84.                 this.smoothScrollTo(0, 0);
    
85.             }
    
86.             return true;
    
87.         }
    
88.         return super.onTouchEvent(ev);
    
89.     }
    
90.    
    
91. }

复制代码

我们的主Activity：

1. public class MainActivity extends Activity {
   
2. 
   
3.     @Override
   
4.     protected void onCreate(Bundle savedInstanceState) {
   
5.         super.onCreate(savedInstanceState);
   
6.         requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题
   
7.         setContentView(R.layout.activity_main);
   
8.         
   
9.     }
   
10. }

复制代码