自定义SiidingMenu简单实现

先看效果:

实现思路:

自定义Slidingmenu继承HorizontalScrollView嵌套 左侧菜单布局+右侧内容布局,滑动时分别显示

菜单布局代码:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:gravity="center"
 7     android:background="#fff000"
 8     >
 9 <LinearLayout
10     android:layout_width="wrap_content"
11     android:layout_height="wrap_content"
12     android:orientation="horizontal"
13     android:gravity="center">
14     <ImageView
15         android:src="@mipmap/ic_launcher"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content" />
18     <TextView
19         android:text="第一个按钮"
20         android:gravity="center"
21         android:layout_width="wrap_content"
22         android:layout_height="wrap_content" />
23 </LinearLayout>
24 <LinearLayout
25     android:layout_width="wrap_content"
26     android:layout_height="wrap_content"
27     android:orientation="horizontal"
28     android:gravity="center">
29     <ImageView
30         android:src="@mipmap/ic_launcher"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content" />
33     <TextView
34         android:text="第二个按钮"
35         android:gravity="center"
36         android:layout_width="wrap_content"
37         android:layout_height="wrap_content" />
38 </LinearLayout>
39 <LinearLayout
40     android:layout_width="wrap_content"
41     android:layout_height="wrap_content"
42     android:orientation="horizontal"
43     android:gravity="center">
44     <ImageView
45         android:src="@mipmap/ic_launcher"
46         android:layout_width="wrap_content"
47         android:layout_height="wrap_content" />
48     <TextView
49         android:text="第三个按钮"
50         android:gravity="center"
51         android:layout_width="wrap_content"
52         android:layout_height="wrap_content" />
53 </LinearLayout>
54 <LinearLayout
55     android:layout_width="wrap_content"
56     android:layout_height="wrap_content"
57     android:orientation="horizontal"
58     android:gravity="center">
59     <ImageView
60         android:src="@mipmap/ic_launcher"
61         android:layout_width="wrap_content"
62         android:layout_height="wrap_content" />
63     <TextView
64         android:text="第四个按钮"
65         android:gravity="center"
66         android:layout_width="wrap_content"
67         android:layout_height="wrap_content" />
68 </LinearLayout>
69 </LinearLayout>

效果:

主布局:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:background="@color/colorPrimaryDark"
 5     android:id="@+id/activity_main"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context="com.example.king.slidingmenutest.MainActivity">
 9     <!--自定义Slidingmenu继承HorizontalScrollView-->
10     <com.example.king.slidingmenutest.silding_menu.SildingMenu
11         android:id="@+id/sp_menu"
12         android:layout_width="match_parent"
13         android:layout_height="match_parent"
14         android:scrollbars="none"
15         >
16         <LinearLayout
17             android:orientation="horizontal"
18             android:layout_width="wrap_content"
19             android:layout_height="match_parent">
20             <include layout="@layout/menu_layout"/>
21             <LinearLayout
22                 android:background="@color/colorAccent"
23                 android:layout_width="wrap_content"
24                 android:layout_height="match_parent"
25                 android:orientation="vertical">
26
27             </LinearLayout>
28         </LinearLayout>
29     </com.example.king.slidingmenutest.silding_menu.SildingMenu>
30 </RelativeLayout>

效果:

自定义Slidingmenu类:

  1 package com.example.king.slidingmenutest.silding_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 /**
 14  * Created by King on 2016/9/6.
 15  */
 16
 17 public class SildingMenu extends HorizontalScrollView {
 18     //主布局
 19     private LinearLayout mWapper;
 20     //菜单布局
 21     private ViewGroup mMenu;
 22     //内容布局
 23     private ViewGroup mContent;
 24     //屏幕宽度
 25     private int screenWidth;
 26     //菜单布局宽度
 27     private int mMenuwidth;
 28     //内容布局宽度
 29     private  int mContentwidth;
 30     //菜单布局内边距
 31     private int mMenuRightPadding = 50;
 32
 33     public SildingMenu(Context context) {
 34         super(context);
 35
 36     }
 37
 38     public SildingMenu(Context context, AttributeSet attrs) {
 39         super(context, attrs);
 40         //获得屏幕宽度
 41        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 42         DisplayMetrics displayMetrics = new DisplayMetrics();
 43         windowManager.getDefaultDisplay().getMetrics(displayMetrics);
 44         screenWidth = displayMetrics.widthPixels;
 45         //内边距转成dip类型
 46         mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,context.getResources().getDisplayMetrics());
 47
 48     }
 49
 50     public SildingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
 51         super(context, attrs, defStyleAttr);
 52
 53     }
 54     //测量高宽
 55     @Override
 56     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 57         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 58         //主布局
 59         mWapper = (LinearLayout) getChildAt(0);
 60         //菜单布局
 61         mMenu  = (ViewGroup) mWapper.getChildAt(0);
 62         //内容布局
 63         mContent  = (ViewGroup) mWapper.getChildAt(1);
 64         //菜单布局宽度
 65         mMenuwidth = mMenu.getLayoutParams().width = screenWidth-mMenuRightPadding;
 66         //内容布局宽度
 67         mContentwidth = mContent.getLayoutParams().width = screenWidth;
 68     }
 69     //摆放
 70     @Override
 71     protected void onLayout(boolean changed, int l, int t, int r, int b) {
 72         super.onLayout(changed, l, t, r, b);
 73         if(changed){
 74             //侧滑时
 75             this.scrollTo(mMenuwidth,0);
 76         }
 77     }
 78     //根据滑动幅度判断
 79     @Override
 80     public boolean onTouchEvent(MotionEvent ev) {
 81         int action = ev.getAction();
 82         switch (action){
 83             case MotionEvent.ACTION_UP:
 84                 int scrolWidth = getScrollX();
 85                 if(scrolWidth>=mContentwidth/2){
 86                     this.smoothScrollTo(mMenuwidth,0);
 87                 }else{
 88                     this.smoothScrollTo(0,0);
 89                 }
 90                 return true;
 91         }
 92         return super.onTouchEvent(ev);
 93
 94     }
 95
 96     @Override
 97     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
 98         super.onScrollChanged(l, t, oldl, oldt);
 99         float scale = l*1.0f/mMenuwidth;
100         float rightScale = 0.7f+0.3f*scale;
101         float leftScale = 1.0f-scale*0.3f;
102         float leftAlpha = 0.3f+0.7f*(1-scale);
103         //设置动画
104         mMenu.setScaleX(leftScale);
105         mMenu.setScaleY(leftScale);
106         mMenu.setAlpha(leftAlpha);
107         mMenu.setTranslationX(scale);
108         mContent.setPivotX(0);
109         mContent.setPivotY(mContent.getHeight()/2);
110         mContent.setScaleX(rightScale);
111         mContent.setScaleY(rightScale);
112     }
113 }