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

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

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

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

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

首先看效果图：

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

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

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="${relativePackage}.${activityClass}" >

  <com.wind.view.SlideMenuView
    android:id="@+id/slideMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <include layout="@layout/layout_menu"/>

    <include layout="@layout/layout_main"/>
  </com.wind.view.SlideMenuView>

</RelativeLayout>

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

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

这里我们选择继承ViewGroup，一般自定义View，需要重写onMeasure，onLayout和onDraw，正常情况下只要重写onDraw就可以了，特殊情况下，需要重写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 = "SlideMenuView";
  private View menuView, mainView;
  private int menuWidth = 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 = new Scroller(getContext());
  }

  /**
   * 当一级的子View全部加载玩后调用，可以用于初始化子View的引用 
   * 
   */
  @Override
  protected void onFinishInflate() {
    super.onFinishInflate();
    menuView = getChildAt(0);
    mainView = getChildAt(1);
    menuWidth = menuView.getLayoutParams().width;

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

    /**
     * widthMeasureSpec和heightMeasureSpec是系统测量SlideMenu时传入的参数，
     * 这2个参数测量出的宽高能让SlideMenu充满窗体，其实是正好等于屏幕宽高
     */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    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
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    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);
  }

 

 
  private int downX;

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      downX = (int) event.getX();
      break;

    case MotionEvent.ACTION_MOVE:
      int moveX = (int) event.getX();
      int deltaX = (moveX - downX);
      Log.e(TAG, "scrollX: " + getScrollX());

      int newScrollX = getScrollX() - deltaX;
      //使得SlideMenuView不会滑动出界
      if(newScrollX > 0) newScrollX = 0;
      if(newScrollX < -menuWidth) newScrollX = -menuWidth;

      scrollTo(newScrollX, 0);
      Log.e(TAG, "moveX: " + moveX);
      downX = moveX;
      break;

    case MotionEvent.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;
    }

    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
     */
  @Override
  public void computeScroll() {
    super.computeScroll();
    if(scroller.computeScrollOffset()){//返回true,表示动画没结束
      scrollTo(scroller.getCurrX(), 0);
      invalidate();
    }
  }
  //用于在Activity中来控制菜单的状态
  public void switchMenu() {
    if(getScrollX() == 0) {
      openMenu();
    } else {
      closeMenu();
    }
  }
}

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

关于平滑滚动

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

package com.wind.view;

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * 让指定view在一段时间内scrollTo到指定位置
 * @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 = view;
    this.targetScrollX = targetScrollX;

    startScrollX = view.getScrollX();
    totalValue = this.targetScrollX - startScrollX;

    int time = Math.abs(totalValue);
    setDuration(time);
  }

 

  /**
   * 在指定的时间内一直执行该方法，直到动画结束
   * interpolatedTime：0-1 标识动画执行的进度或者百分比
   * time : 0  - 0.5 - 0.7 -  1
   * value: 10 - 60 - 80 - 110
   * 当前的值 = 起始值 + 总的差值*interpolatedTime
   */
  @Override
  protected void applyTransformation(float interpolatedTime,
      Transformation t) {
    super.applyTransformation(interpolatedTime, t);
    int currentScrollX = (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
   */
  public void scrollTo(int x, int y) {
    if (mScrollX != x || mScrollY != y) {
      int oldX = mScrollX;
      int oldY = 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
   */
  public void scrollBy(int x, int y) {
    scrollTo(mScrollX + x, mScrollY + y);
  }

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# Android自定义ViewGroup  # 侧滑菜单  # Android  # Android ViewDragHelper完全解析 自定义ViewGroup神器  # Android控件PullRefreshViewGroup实现下拉刷新和上拉加载  # Android中使用自定义ViewGroup的总结  # Android自定义控件之继承ViewGroup创建新容器  # Android自定义ViewGroup实现标签流容器FlowLayout  # Android 重写ViewGroup 分析onMeasure()和onLayout()方法  # 自定义  # 重写  # 来实现  # 时间内  # 的是  # 都是  # 不需要  # 开源  # 自己的  # 情况下  # 就会  # 都有  # 在这个  # 还可以  # 我们可以  # 这类  # 希望能  # 能让  # 有兴趣  # 可以看到 

相关文章： 怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何选择香港主机高效搭建外贸独立站？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  网站设计制作企业有哪些,抖音官网主页怎么设置？  javascript基本数据类型及类型检测常用方法小结  定制建站方案优化指南：企业官网开发与建站费用解析  建站之星IIS配置教程：代码生成技巧与站点搭建指南  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  如何配置WinSCP新建站点的密钥验证步骤？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  深圳网站制作平台,深圳市做网站好的公司有哪些？  如何在企业微信快速生成手机电脑官网？  nginx修改上传文件大小限制的方法  如何在宝塔面板中修改默认建站目录？  微信h5制作网站有哪些,免费微信H5页面制作工具？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  网站制作公司排行榜,抖音怎样做个人官方网站  如何在自有机房高效搭建专业网站？  C#如何使用XPathNavigator高效查询XML  h5网站制作工具有哪些,h5页面制作工具有哪些？  如何挑选最适合建站的高性能VPS主机？  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  简单实现Android文件上传  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  建站之星在线版空间：自助建站+智能模板一键生成方案  建站之星与建站宝盒如何选择最佳方案？  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  如何用低价快速搭建高质量网站？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  北京制作网站的公司,北京铁路集团官方网站？  专业的网站制作设计是什么,如何制作一个企业网站，建设网站的基本步骤有哪些？  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  如何在景安服务器上快速搭建个人网站？  建站之星×万网：智能建站系统+自助建站平台一键生成  建站主机选虚拟主机还是云服务器更好？  安徽网站建设与外贸建站服务专业定制方案  如何选择适配移动端的WAP自助建站平台？  东莞专业制作网站的公司,东莞大学生网的网址是什么？  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱？  广州美橙建站如何快速搭建多端合一网站？  ,石家庄四十八中学官网？  广东企业建站网站优化与SEO营销核心策略指南