android自定义ViewGroup(侧滑菜单)

自定义侧滑菜单的简单实现

不少APP中都有这种侧滑菜单&＃xff0c;例如QQ这类的&＃xff0c;比较有名开源库如slidingmenu。
有兴趣的可以去研究研究这个开源库。

这里我们将一种自己的实现方法&＃xff0c;把学习的 东西做个记录&＃xff0c;O(∩_∩)O&＃xff01;

首先看效果图&＃xff1a;

这里我们实现的侧滑菜单&＃xff0c;是将左侧隐藏的菜单和主面板看作一个整体来实现的&＃xff0c;而左侧隐藏的菜单和主面板相当于是这个自定义View的子View。

首先来构造该自定义View的布局&＃xff1a;

自定义的SlideMenuView包含两个子view&＃xff0c;一个是menuView&＃xff0c;另一个是mainView(主面板)。

接着我们需要实现SlideMenuView的 java代码。

自定义VIew&＃xff0c;需要继承某个父类&＃xff0c;通过重写父类的某些方法来增强父类的功能。
这里我们选择继承ViewGroup&＃xff0c;一般自定义View&＃xff0c;需要重写onMeasure&＃xff0c;onLayout和onDraw&＃xff0c;正常情况下只要重写onDraw就可以了&＃xff0c;特殊情况下&＃xff0c;需要重写onMeasure 和onLayout。

package com.wind.view;import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;public class SlideMenuView extends ViewGroup { // FrameLayout {private static final String TAG &＃61; "SlideMenuView";private View menuView, mainView;private int menuWidth &＃61; 0;private Scroller scroller;public SlideMenuView(Context context) {super(context);init();}public SlideMenuView(Context context, AttributeSet attrs) {super(context, attrs);init();}private void init() {scroller &＃61; new Scroller(getContext());}/*** 当一级的子View全部加载玩后调用&＃xff0c;可以用于初始化子View的引用 * */&＃64;Overrideprotected void onFinishInflate() {super.onFinishInflate();menuView &＃61; getChildAt(0);mainView &＃61; getChildAt(1);menuWidth &＃61; menuView.getLayoutParams().width;Log.d(TAG, "onFinishInflate() menuWidth: " &＃43; menuWidth);}/*** widthMeasureSpec和heightMeasureSpec是系统测量SlideMenu时传入的参数&＃xff0c;* 这2个参数测量出的宽高能让SlideMenu充满窗体&＃xff0c;其实是正好等于屏幕宽高*/&＃64;Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);Log.d(TAG, "onMeasure: widthMeasureSpec: " &＃43; widthMeasureSpec&＃43; "heightMeasureSpec: " &＃43; heightMeasureSpec);// int measureSpec &＃61; MeasureSpec.makeMeasureSpec(menuWidth,// MeasureSpec.EXACTLY);//// Log.d(TAG,"onMeasure: measureSpec&＃xff1a; " &＃43;measureSpec);// 测量所有子view的宽高// 通过getLayoutParams方法可以获取到布局文件中指定宽高menuView.measure(widthMeasureSpec, heightMeasureSpec);// 直接使用SlideMenu的测量参数&＃xff0c;因为它的宽高都是充满父窗体mainView.measure(widthMeasureSpec, heightMeasureSpec);}/*** 重新摆放子View的位置* l: 当前子view的左边在父view的坐标系中的x坐标* t: 当前子view的顶边在父view的坐标系中的y坐标*/&＃64;Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {Log.d(TAG, "onLayout() changed&＃xff1a; " &＃43; changed &＃43; "l: " &＃43; l &＃43; "t: " &＃43; t&＃43; "r: " &＃43; r &＃43; "b: " &＃43; b);Log.d(TAG,"menuView.getMeasuredHeight(): " &＃43; menuView.getMeasuredHeight());menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight());mainView.layout(0, 0, r, b);}private int downX;&＃64;Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downX &＃61; (int) event.getX();break;case MotionEvent.ACTION_MOVE:int moveX &＃61; (int) event.getX();int deltaX &＃61; (moveX - downX);Log.e(TAG, "scrollX: " &＃43; getScrollX());int newScrollX &＃61; getScrollX() - deltaX;//使得SlideMenuView不会滑动出界if(newScrollX > 0) newScrollX &＃61; 0;if(newScrollX <-menuWidth) newScrollX &＃61; -menuWidth;scrollTo(newScrollX, 0);Log.e(TAG, "moveX: " &＃43; moveX);downX &＃61; moveX;break;case MotionEvent.ACTION_UP://①.使用自定义动画
// ScrollAnimation scrollAnimation;
// if(getScrollX()>-menuWidth/2){
// //关闭菜单scrollTo(0, 0);
// scrollAnimation &＃61; new ScrollAnimation(this, 0);
// }else {
// //打开菜单scrollTo(-menuWidth, 0);
// scrollAnimation &＃61; new ScrollAnimation(this, -menuWidth);
// }
// startAnimation(scrollAnimation);//②使用Scrollerif(getScrollX()>-menuWidth/2){
// //关闭菜单closeMenu();}else {//打开菜单openMenu();}break;}return true;}private void openMenu() {Log.d(TAG, "openMenu...");scroller.startScroll(getScrollX(), 0, -menuWidth-getScrollX(), 400);invalidate();}private void closeMenu() {Log.d(TAG, "closeMenu...");scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 400);invalidate();}/*** Scroller不主动去调用这个方法* 而invalidate()可以掉这个方法* invalidate->draw->computeScroll*/&＃64;Overridepublic void computeScroll() {super.computeScroll();if(scroller.computeScrollOffset()){//返回true,表示动画没结束scrollTo(scroller.getCurrX(), 0);invalidate();}}//用于在Activity中来控制菜单的状态public void switchMenu() {if(getScrollX() &＃61;&＃61; 0) {openMenu();} else {closeMenu();}}
}

• 这里继承ViewGroup&＃xff0c;由于子View都是利用系统的控件填充&＃xff0c;所以不需要重写onDraw方法。
• 由于是继承自ViewGroup&＃xff0c;需要实现onMeasure来测量两个子View的高度和宽度。我们还可以继承FrameLayout&＃xff0c;则不需要实现onMeasure&＃xff0c;因为FrameLayout已经帮我们实现onMeasure。
• 重写onLayout方法&＃xff0c;重新定义自定义的位置摆放&＃xff0c;左侧的侧滑菜单需要使其处于隐藏状态。
• 重写onTouch方法,通过监测Touch的Up和Down来滑动View来实现侧滑的效果。

关于平滑滚动

我们可以采用Scroller类中的startScroll来实现平滑滚动&＃xff0c;同样我们可以使用自定义动画的方式来实现。

package com.wind.view;import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;/*** 让指定view在一段时间内scrollTo到指定位置* &＃64;author Administrator**/
public class ScrollAnimation extends Animation{private View view;private int targetScrollX;private int startScrollX;private int totalValue;public ScrollAnimation(View view, int targetScrollX) {super();this.view &＃61; view;this.targetScrollX &＃61; targetScrollX;startScrollX &＃61; view.getScrollX();totalValue &＃61; this.targetScrollX - startScrollX;int time &＃61; Math.abs(totalValue);setDuration(time);}/*** 在指定的时间内一直执行该方法&＃xff0c;直到动画结束* interpolatedTime&＃xff1a;0-1 标识动画执行的进度或者百分比* time : 0 - 0.5 - 0.7 - 1* value: 10 - 60 - 80 - 110* 当前的值 &＃61; 起始值 &＃43; 总的差值*interpolatedTime*/&＃64;Overrideprotected void applyTransformation(float interpolatedTime,Transformation t) {super.applyTransformation(interpolatedTime, t);int currentScrollX &＃61; (int) (startScrollX &＃43; totalValue*interpolatedTime);view.scrollTo(currentScrollX, 0);}
}

如上面的代码&＃xff1a;
通过自定义动画来让View在一段时间内重复执行这个动作。

关于getScrollX

将View向右移动的时候&＃xff0c;通过View.getScrollX得到的值是负的。
其实可以这样理解&＃xff1a;
getScrollX()表示的是当前的屏幕x坐标的最小值-移动的距离(向右滑动时移动的距离为正值&＃xff0c;
向左滑动时移动的距离为负值)。

对scrollTo和scrollBy的理解

我们查看View的源码发现&＃xff0c;scrollBy其实调用的就是scrollTo&＃xff0c;scrollTo就是把View移动到屏幕的X和Y位置&＃xff0c;也就是绝对位置。而scrollBy其实就是调用的scrollTo&＃xff0c;但是参数是当前mScrollX和mScrollY加上X和Y的位置&＃xff0c;所以ScrollBy调用的是相对于mScrollX和mScrollY的位置。

我们在上面的代码中可以看到当我们手指不放移动屏幕时&＃xff0c;就会调用scrollBy来移动一段相对的距离。而当我们手指松开后&＃xff0c;会调用mScroller.startScroll(mUnboundedScrollX, 0, delta, 0, duration);来产生一段动画来移动到相应的页面&＃xff0c;在这个过程中系统回不断调用computeScroll()&＃xff0c;我们再使用scrollTo来把View移动到当前Scroller所在的绝对位置。

/*** Set the scrolled position of your view. This will cause a call to* {&＃64;link #onScrollChanged(int, int, int, int)} and the view will be* invalidated.* &＃64;param x the x position to scroll to* &＃64;param y the y position to scroll to*/public void scrollTo(int x, int y) {if (mScrollX !&＃61; x || mScrollY !&＃61; y) {int oldX &＃61; mScrollX;int oldY &＃61; mScrollY;mScrollX &＃61; x;mScrollY &＃61; y;invalidateParentCaches();onScrollChanged(mScrollX, mScrollY, oldX, oldY);if (!awakenScrollBars()) {invalidate(true);}}}/*** Move the scrolled position of your view. This will cause a call to* {&＃64;link #onScrollChanged(int, int, int, int)} and the view will be* invalidated.* &＃64;param x the amount of pixels to scroll by horizontally* &＃64;param y the amount of pixels to scroll by vertically*/public void scrollBy(int x, int y) {scrollTo(mScrollX &＃43; x, mScrollY &＃43; y);}


以上仅是个人学习的记录。