Android之自定义侧滑菜单
先来上图：
我们把主界面从左向右拉动，可以看到地下有一层菜单页，从透明渐渐变得不透明，从小渐渐变大，感觉上觉得菜单页是从屏幕外面被拉到屏幕中的。下面的代码实现这个DEMO：
首先是自定义控件SlidingMenu控件的代码：
1 public class SlidingMenu extends HorizontalScrollView { 2 // 自定义View的步骤： 3 // 1、onMeasure()：决定子View的宽和高和自己的宽和高 4 // 2、onLayout()：决定子View放置的位置 5 // 3、onTouchEvent：判断用户手指的滑动状态 6 // 自定义属性的步骤： 7 // 1、书写XML文件（values/attrs.xml） 8 // 2、在布局文件中进行使用，注意xmlns命名空间 9 // 3、在三个参数的构造方法中获得我们设置的值 10 11 private LinearLayout wrapper; // 总容器 12 private ViewGroup menu, content; // 菜单页，内容页 13 private int screenWidth; // 屏幕的宽度 14 private int menuWidth; // menu的宽度 15 private int menuRightPadding = 50; // menu菜单距离屏幕右侧的距离（单位是DIP） 16 private boolean once; // onMeasure()方法是不是第一次调用 17 private boolean isOpen; // 侧滑菜单是否是开启状态 18 19 // 在界面上通过上下文直接生成控件时，调用这个构造方法 20 public SlidingMenu(Context context) { 21 this(context, null); 22 } 23 24 // 当没有使用自定义属性时，调用这个构造方法 25 public SlidingMenu(Context context, AttributeSet attrs) { 26 this(context, attrs, 0); 27 } 28 29 // 当使用了自定义属性（values/attrs.xml）时，调用这个构造方法 30 public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) { 31 super(context, attrs, defStyleAttr); 32 // 获取我们自定义的属性 33 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu, defStyleAttr, 0); 34 for (int i = 0; i < a.getIndexCount(); i++) { 35 int attr = a.getIndex(i); 36 switch (attr) { 37 case R.styleable.SlidingMenu_rightPadding: 38 // getDimensionPixelSize：为attr下标的属性设置默认值（第二个参数） 39 menuRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40 50, context.getResources().getDisplayMetrics())); 41 break; 42 } 43 } 44 a.recycle(); 45 46 // 获取屏幕的宽度 47 WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); 48 DisplayMetrics metrics = new DisplayMetrics(); 49 manager.getDefaultDisplay().getMetrics(metrics); 50 screenWidth = metrics.widthPixels; 51 } 52 53 @Override 54 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 55 if (!once) { 56 wrapper = (LinearLayout) getChildAt(0); 57 menu = (ViewGroup) wrapper.getChildAt(0); 58 content = (ViewGroup) wrapper.getChildAt(1); 59 // 设置菜单和主页的宽度 60 menuWidth = menu.getLayoutParams().width = screenWidth - menuRightPadding; 61 content.getLayoutParams().width = screenWidth; 62 63 once = true; 64 } 65 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 66 } 67 68 // 通过设置偏移量，将Menu隐藏 69 @Override 70 protected void onLayout(boolean changed, int l, int t, int r, int b) { 71 super.onLayout(changed, l, t, r, b); 72 if (changed) { 73 this.scrollTo(menuWidth, 0); 74 } 75 } 76 77 @Override 78 public boolean onTouchEvent(MotionEvent ev) { 79 int action = ev.getAction(); 80 switch (action) { 81 case MotionEvent.ACTION_UP: 82 int scrollX = getScrollX(); // 隐藏在左边的宽度 83 if (scrollX >= menuWidth / 2) { 84 this.smoothScrollTo(menuWidth, 0); 85 isOpen = false; 86 } else { 87 this.smoothScrollTo(0, 0); 88 isOpen = true; 89 } 90 return true; 91 } 92 return super.onTouchEvent(ev); 93 } 94 95 // 打开菜单 96 public void openMenu() { 97 if (isOpen) 98 return; 99 this.smoothScrollTo(0, 0); 100 isOpen = false; 101 } 102 103 // 关闭菜单 104 public void closeMenu() { 105 if (!isOpen) 106 return; 107 this.smoothScrollTo(menuWidth, 0); 108 isOpen = true; 109 } 110 111 // 管理菜单的状态和动作（如果菜单是关闭的就打开它，如果是打开的就关闭它） 112 public void toggle() { 113 if (isOpen) { 114 closeMenu(); 115 } else { 116 openMenu(); 117 } 118 } 119 120 // 抽屉式侧滑（这个方法监听滚动的全过程） 121 @Override 122 protected void onScrollChanged(int l, int t, int oldl, int oldt) { 123 super.onScrollChanged(l, t, oldl, oldt); 124 float scale = l * 1.0f / menuWidth; 125 // 实现仿QQ5.0的侧滑界面：在滑动时，滑动朝向的ViewGroup不断缩小，另一个ViewGroup不断放大 126 float rightScrollScale = 0.85f + 0.15f * scale; // 主界面的滑动缩放比例 127 float leftScrollScale = 1.0f - 0.4f * scale; // 菜单的滑动缩放比例 128 float leftAlphaScale = 0.6f + 0.4f * (1 - scale); // 菜单透明度的变化比例 129 // 调用属性动画（Android3.0时引入），设置TranslationX（这里需要引入nineoldandroids.jar包） 130 ViewHelper.setTranslationX(menu, menuWidth * scale * 0.75f); 131 // 设置Menu的缩放和透明度 132 ViewHelper.setScaleX(menu, leftScrollScale); 133 ViewHelper.setScaleY(menu, leftScrollScale); 134 ViewHelper.setAlpha(menu, leftAlphaScale); 135 // 设置Content的缩放 136 ViewHelper.setPivotX(content, 0); 137 ViewHelper.setPivotY(content, content.getHeight() / 2); 138 ViewHelper.setScaleX(content, rightScrollScale); 139 ViewHelper.setScaleY(content, rightScrollScale); 140 } 141 }
下面是主界面布局的代码：
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 xmlns:xgz="http://schemas.android.com/apk/res/com.activity" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:background="@drawable/menu_bg" > 7 8 <com.view.SlidingMenu 9 android:id="@+id/main_slidingmenu" 10 android:layout_width="match_parent" 11 android:layout_height="match_parent" 12 xgz:rightPadding="75.0dip" > 13 14 <LinearLayout 15 android:layout_width="wrap_content" 16 android:layout_height="match_parent" 17 android:orientation="horizontal" > 18 19 <include layout="@layout/sideworks_menu" /> 20 21 <LinearLayout 22 android:layout_width="match_parent" 23 android:layout_height="match_parent" 24 android:background="@drawable/main_bg" > 25 26 <Button 27 android:id="@+id/main_togglebtn" 28 android:layout_width="wrap_content" 29 android:layout_height="30.0dip" 30 android:layout_marginLeft="10.0dip" 31 android:layout_marginTop="10.0dip" 32 android:background="#00000000" 33 android:text="@string/main_toggle_btn" 34 android:textColor="#ffffff" 35 android:textSize="16.0sp" /> 36 </LinearLayout> 37 </LinearLayout> 38 </com.view.SlidingMenu> 39 40 </RelativeLayout>
下面是主界面中引用的菜单页的布局代码：
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:background="#00000000" 6 android:gravity="center_vertical" 7 android:orientation="vertical" > 8 9 <RelativeLayout 10 android:layout_width="match_parent" 11 android:layout_height="wrap_content" > 12 13 <ImageView 14 android:id="@+id/menu_icon1" 15 android:layout_width="40.0dip" 16 android:layout_height="40.0dip" 17 android:layout_marginLeft="10.0dip" 18 android:contentDescription="@string/app_name" 19 android:src="@drawable/img_1" /> 20 21 <TextView 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:layout_centerVertical="true" 25 android:layout_marginLeft="10.0dip" 26 android:layout_toRightOf="@id/menu_icon1" 27 android:text="@string/menu_icon1_text" 28 android:textColor="#ffffff" 29 android:textSize="15.0sp" /> 30 </RelativeLayout> 31 32 <RelativeLayout 33 android:layout_width="match_parent" 34 android:layout_height="wrap_content" 35 android:layout_marginTop="15.0dip" > 36 37 <ImageView 38 android:id="@+id/menu_icon2" 39 android:layout_width="40.0dip" 40 android:layout_height="40.0dip" 41 android:layout_marginLeft="10.0dip" 42 android:contentDescription="@string/app_name" 43 android:src="@drawable/img_2" /> 44 45 <TextView 46 android:layout_width="wrap_content" 47 android:layout_height="wrap_content" 48 android:layout_centerVertical="true" 49 android:layout_marginLeft="10.0dip" 50 android:layout_toRightOf="@id/menu_icon2" 51 android:text="@string/menu_icon2_text" 52 android:textColor="#ffffff" 53 android:textSize="15.0sp" /> 54 </RelativeLayout> 55 56 <RelativeLayout 57 android:layout_width="match_parent" 58 android:layout_height="wrap_content" 59 android:layout_marginTop="15.0dip" > 60 61 <ImageView 62 android:id="@+id/menu_icon3" 63 android:layout_width="40.0dip" 64 android:layout_height="40.0dip" 65 android:layout_marginLeft="10.0dip" 66 android:contentDescription="@string/app_name" 67 android:src="@drawable/img_3" /> 68 69 <TextView 70 android:layout_width="wrap_content" 71 android:layout_height="wrap_content" 72 android:layout_centerVertical="true" 73 android:layout_marginLeft="10.0dip" 74 android:layout_toRightOf="@id/menu_icon3" 75 android:text="@string/menu_icon3_text" 76 android:textColor="#ffffff" 77 android:textSize="15.0sp" /> 78 </RelativeLayout> 79 80 <RelativeLayout 81 android:layout_width="match_parent" 82 android:layout_height="wrap_content" 83 android:layout_marginTop="15.0dip" > 84 85 <ImageView 86 android:id="@+id/menu_icon4" 87 android:layout_width="40.0dip" 88 android:layout_height="40.0dip" 89 android:layout_marginLeft="10.0dip" 90 android:contentDescription="@string/app_name" 91 android:src="@drawable/img_4" /> 92 93 <TextView 94 android:layout_width="wrap_content" 95 android:layout_height="wrap_content" 96 android:layout_centerVertical="true" 97 android:layout_marginLeft="10.0dip" 98 android:layout_toRightOf="@id/menu_icon4" 99 android:text="@string/menu_icon4_text" 100 android:textColor="#ffffff" 101 android:textSize="15.0sp" /> 102 </RelativeLayout> 103 104 <RelativeLayout 105 android:layout_width="match_parent" 106 android:layout_height="wrap_content" 107 android:layout_marginTop="15.0dip" > 108 109 <ImageView 110 android:id="@+id/menu_icon5" 111 android:layout_width="40.0dip" 112 android:layout_height="40.0dip" 113 android:layout_marginLeft="10.0dip" 114 android:contentDescription="@string/app_name" 115 android:src="@drawable/img_5" /> 116 117 <TextView 118 android:layout_width="wrap_content" 119 android:layout_height="wrap_content" 120 android:layout_centerVertical="true" 121 android:layout_marginLeft="10.0dip" 122 android:layout_toRightOf="@id/menu_icon5" 123 android:text="@string/menu_icon5_text" 124 android:textColor="#ffffff" 125 android:textSize="15.0sp" /> 126 </RelativeLayout> 127 128 </LinearLayout>
下面是自定义属性attrs.xml文件中的代码：
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 4 <!-- 自定义属性：菜单离屏幕右侧的间距 --> 5 <attr name="rightPadding" format="dimension"></attr> 6 7 <declare-styleable name="SlidingMenu"> 8 <attr name="rightPadding"></attr> 9 </declare-styleable> 10 11 </resources>
下面是主界面MainActivity.java中的代码：
1 public class MainActivity extends Activity { 2 private SlidingMenu slidingMenu; 3 private Button toggleBtn; 4 5 @Override 6 protected void onCreate(Bundle savedInstanceState) { 7 super.onCreate(savedInstanceState); 8 setContentView(R.layout.activity_main); 9 slidingMenu = (SlidingMenu) findViewById(R.id.main_slidingmenu); 10 toggleBtn = (Button) findViewById(R.id.main_togglebtn); 11 12 toggleBtn.setOnClickListener(new OnClickListener() { 13 @Override 14 public void onClick(View v) { 15 slidingMenu.toggle(); 16 } 17 }); 18 } 19 }
