android 自定义view|Android自定义ViewGroup(侧滑菜单)详解及简单实例

时间:2021-07-01  来源:qq教程  阅读:

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

不少APP中都有这种侧滑菜单,例如QQ这类的,比较有名开源库如slidingmenu。

有兴趣的可以去研究研究这个开源库。

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

首先看效果图:

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

首先来构造该自定义View的布局:

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

 

 代码如下

  xmlns:tools="http://schemas.android.com/tools"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  tools:context="${relativePackage}.${activityClass}">

 

  

    android:id="@+id/slideMenu"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    

 

    

  

 

 

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

自定义VIew,需要继承某个父类,通过重写父类的某些方法来增强父类的功能。

这里我们选择继承ViewGroup,一般自定义View,需要重写onMeasure,onLayout和onDraw,正常情况下只要重写onDraw就可以了,特殊情况下,需要重写onMeasure 和onLayout。

 

 代码如下

packagecom.wind.view;

 

importandroid.content.Context;

importandroid.util.AttributeSet;

importandroid.util.Log;

importandroid.view.MotionEvent;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.Scroller;

 

publicclassSlideMenuViewextendsViewGroup {// FrameLayout {

  privatestaticfinalString TAG ="SlideMenuView";

  privateView menuView, mainView;

  privateintmenuWidth =0;

 

  privateScroller scroller;

 

  publicSlideMenuView(Context context) {

    super(context);

    init();

  }

 

  publicSlideMenuView(Context context, AttributeSet attrs) {

    super(context, attrs);

    init();

  }

 

  privatevoidinit() {

    scroller =newScroller(getContext());

  }

 

  /**

   * 当一级的子View全部加载玩后调用,可以用于初始化子View的引用

   *

   */

  @Override

  protectedvoidonFinishInflate() {

    super.onFinishInflate();

    menuView = getChildAt(0);

    mainView = getChildAt(1);

    menuWidth = menuView.getLayoutParams().width;

 

    Log.d(TAG,"onFinishInflate() menuWidth: "+ menuWidth);

  }

 

    /**

     * widthMeasureSpec和heightMeasureSpec是系统测量SlideMenu时传入的参数,

     * 这2个参数测量出的宽高能让SlideMenu充满窗体,其实是正好等于屏幕宽高

     */

  @Override

  protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) {

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 

    Log.d(TAG,"onMeasure: widthMeasureSpec: "+ widthMeasureSpec

        +"heightMeasureSpec: "+ heightMeasureSpec);

 

    // int measureSpec = MeasureSpec.makeMeasureSpec(menuWidth,

    // MeasureSpec.EXACTLY);

    //

    // Log.d(TAG,"onMeasure: measureSpec: " +measureSpec);

    // 测量所有子view的宽高

    // 通过getLayoutParams方法可以获取到布局文件中指定宽高

    menuView.measure(widthMeasureSpec, heightMeasureSpec);

    // 直接使用SlideMenu的测量参数,因为它的宽高都是充满父窗体

    mainView.measure(widthMeasureSpec, heightMeasureSpec);

 

  }

 

     /**

     * 重新摆放子View的位置

     * l: 当前子view的左边在父view的坐标系中的x坐标

     * t: 当前子view的顶边在父view的坐标系中的y坐标

     */

  @Override

  protectedvoidonLayout(booleanchanged,intl,intt,intr,intb) {

    Log.d(TAG,"onLayout() changed: "+ changed +"l: "+ l +"t: "+ t

        +"r: "+ r +"b: "+ b);

    Log.d(TAG,"menuView.getMeasuredHeight(): "+ menuView.getMeasuredHeight());

    menuView.layout(-menuWidth,0,0, menuView.getMeasuredHeight());

    mainView.layout(0,0, r, b);

  }

 

  

 

  

  privateintdownX;

 

  @Override

  publicbooleanonTouchEvent(MotionEvent event) {

    switch(event.getAction()) {

    caseMotionEvent.ACTION_DOWN:

      downX = (int) event.getX();

      break;

 

    caseMotionEvent.ACTION_MOVE:

      intmoveX = (int) event.getX();

      intdeltaX = (moveX - downX);

      Log.e(TAG,"scrollX: "+ getScrollX());

 

      intnewScrollX = getScrollX() - deltaX;

      //使得SlideMenuView不会滑动出界

      if(newScrollX >0) newScrollX =0;

      if(newScrollX < -menuWidth) newScrollX = -menuWidth;

 

      scrollTo(newScrollX,0);

      Log.e(TAG,"moveX: "+ moveX);

      downX = moveX;

      break;

 

 

    caseMotionEvent.ACTION_UP:

 

 

 代码如下

      //①.使用自定义动画

//     ScrollAnimation scrollAnimation;

//     if(getScrollX()>-menuWidth/2){

//       //关闭菜单

////        scrollTo(0, 0);

//       scrollAnimation = new ScrollAnimation(this, 0);

//     }else {

//       //打开菜单

////        scrollTo(-menuWidth, 0);

//       scrollAnimation = new ScrollAnimation(this, -menuWidth);

//     }

//     startAnimation(scrollAnimation);

 

 

      //②使用Scroller

      if(getScrollX()>-menuWidth/2){

//       //关闭菜单

        closeMenu();

      }else{

        //打开菜单

        openMenu();

      }

      break;

    }

 

    returntrue;

  }

 

  privatevoidopenMenu() {

    Log.d(TAG,"openMenu...");

    scroller.startScroll(getScrollX(),0, -menuWidth-getScrollX(),400);

    invalidate();

  }

 

  privatevoidcloseMenu() {

    Log.d(TAG,"closeMenu...");

    scroller.startScroll(getScrollX(),0,0-getScrollX(),400);

    invalidate();

  }

 

    /**

     * Scroller不主动去调用这个方法

     * 而invalidate()可以掉这个方法

     * invalidate->draw->computeScroll

     */

  @Override

  publicvoidcomputeScroll() {

    super.computeScroll();

    if(scroller.computeScrollOffset()){//返回true,表示动画没结束

      scrollTo(scroller.getCurrX(),0);

      invalidate();

    }

  }

  //用于在Activity中来控制菜单的状态

  publicvoidswitchMenu() {

    if(getScrollX() ==0) {

      openMenu();

    }else{

      closeMenu();

    }

  }

}

 

    这里继承ViewGroup,由于子View都是利用系统的控件填充,所以不需要重写onDraw方法。

    由于是继承自ViewGroup,需要实现onMeasure来测量两个子View的高度和宽度。我们还可以继承FrameLayout,则不需要实现onMeasure,因为FrameLayout已经帮我们实现onMeasure。

    重写onLayout方法,重新定义自定义的位置摆放,左侧的侧滑菜单需要使其处于隐藏状态。

    重写onTouch方法,通过监测Touch的Up和Down来滑动View来实现侧滑的效果。

关于平滑滚动

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

 

 代码如下

packagecom.wind.view;

 

importandroid.view.View;

importandroid.view.animation.Animation;

importandroid.view.animation.Transformation;

 

/**

 * 让指定view在一段时间内scrollTo到指定位置

 * @author Administrator

 *

 */

publicclassScrollAnimationextendsAnimation{

 

  privateView view;

  privateinttargetScrollX;

  privateintstartScrollX;

  privateinttotalValue;

 

  publicScrollAnimation(View view,inttargetScrollX) {

    super();

    this.view = view;

    this.targetScrollX = targetScrollX;

 

    startScrollX = view.getScrollX();

    totalValue =this.targetScrollX - startScrollX;

 

    inttime = Math.abs(totalValue);

    setDuration(time);

  }

 

  

 

  /**

   * 在指定的时间内一直执行该方法,直到动画结束

   * interpolatedTime:0-1 标识动画执行的进度或者百分比

   * time : 0  - 0.5 - 0.7 -  1

   * value: 10 - 60 - 80 - 110

   * 当前的值 = 起始值 + 总的差值*interpolatedTime

   */

  @Override

  protectedvoidapplyTransformation(floatinterpolatedTime,

      Transformation t) {

    super.applyTransformation(interpolatedTime, t);

    intcurrentScrollX = (int) (startScrollX + totalValue*interpolatedTime);

    view.scrollTo(currentScrollX,0);

  }

}

 

如上面的代码:

通过自定义动画来让View在一段时间内重复执行这个动作。

关于getScrollX

将View向右移动的时候,通过View.getScrollX得到的值是负的。

其实可以这样理解:

*getScrollX()表示的是当前的屏幕x坐标的最小值-移动的距离(向右滑动时移动的距离为正值,

向左滑动时移动的距离为负值)。*

对scrollTo和scrollBy的理解

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

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

 

 代码如下

/**

   * Set the scrolled position of your view. This will cause a call to

   * {@link #onScrollChanged(int, int, int, int)} and the view will be

   * invalidated.

   * @param x the x position to scroll to

   * @param y the y position to scroll to

   */

  publicvoidscrollTo(intx,inty) {

    if(mScrollX != x || mScrollY != y) {

      intoldX = mScrollX;

      intoldY = mScrollY;

      mScrollX = x;

      mScrollY = y;

      invalidateParentCaches();

      onScrollChanged(mScrollX, mScrollY, oldX, oldY);

      if(!awakenScrollBars()) {

        invalidate(true);

      }

    }

  }

  /**

   * Move the scrolled position of your view. This will cause a call to

   * {@link #onScrollChanged(int, int, int, int)} and the view will be

   * invalidated.

   * @param x the amount of pixels to scroll by horizontally

   * @param y the amount of pixels to scroll by vertically

   */

  publicvoidscrollBy(intx,inty) {

    scrollTo(mScrollX + x, mScrollY + y);

  }

 

android 自定义view|Android自定义ViewGroup(侧滑菜单)详解及简单实例

http://m.bbyears.com/bangongshuma/127183.html

推荐访问:android自定义view面试
相关阅读 猜你喜欢
本类排行 本类最新