标签:
先看效果:
实现思路:
自定义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 }
标签:
原文地址:http://www.cnblogs.com/yimi-yangguang/p/5846991.html