Android制作简单垂直上拉下滑View效果

一、简介

最近朋友公司需要实现一个垂直上拉下滑的View，该View最初只有一部分显示在屏幕最下方，上拉那一部分可以将该View全部拉出来并全部显示在屏幕上，下滑该View可以将该View隐藏在屏幕下。
先看一下最终实现效果吧。

二、实现思路

1、这个效果其实有很多实现方法，为了让松手时有一个viewpager一样的缓慢滑动的效果我选择用scrollBy配合Scroller，应该是既方便又实用的。
2、这个View的设计是这样的：
（1）将这个View的子view通过layout放在该View下面；
（2）通过重写onTouchEvent方法给这个子View滑动效果，在MOVE_UP的动作给这个子View加上Scroller平滑到View的顶部或者底部。
见图：

三、实现

1、先自定义一个属性，表示子View应该有多少部分露在外面，也就是上图中红色和绿色相交的部分。
在res文件夹-values文件夹下面创建一个attrs.xml文件

attrs.xml ：

<resources>
 <declare-styleable name="MyScrollerView">
  <attr name="visibility_height" format="dimension"></attr>
 </declare-styleable>

</resources>

在XML文件中引用该属性：

<com.zw.myfirstapp.MyScrollerView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:background="@android:color/transparent"
   android:id="@+id/msv"
   app:visibility_height="100dp"
   ></com.zw.myfirstapp.MyScrollerView>

在代码中调用该属性（该View名字为MyScrollerView，我图方便继承的是LinearLayout，继承ViewGroup或者其他的布局View都可以）：

public MyScrollerView(Context context) {
  this(context,null);
 }

 public MyScrollerView(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }

 public MyScrollerView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);

  TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyScrollerView);
  visibilityHeight = ta.getDimension(R.styleable.MyScrollerView_visibility_height,200);
  ta.recycle();

  init(context);
 }

2、重写onFinishInflate方法，重写该方法的原因是我希望我只有一个子View，这样就好确定滑动的高度，不然我还需要重新计算子View们的高度总和，比较麻烦。这个方法会在onMeasure之前调用。

 @Override
 protected void onFinishInflate() {
  super.onFinishInflate();
  if(getChildCount() == 0 || getChildAt(0) == null){
   throw new RuntimeException("没有子控件！");
  }
  if(getChildCount() > 1){
   throw new RuntimeException("只能有一个子控件！");
  }
  mChild = getChildAt(0);
 }

3、init方法里做一些初始化操作，比如说创建一个Scroller对象，给View的背景设为透明：

 private void init(Context context) {
  mScroller = new Scroller(context);
  this.setBackgroundColor(Color.TRANSPARENT);
 }

4、重写onMeasure方法和onLayout方法，确定可以滑动的最大高度，以及子View的排列位置（其实可以不用重写onMeasure，我这样写只是习惯）。

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  mScrollHeight = (int) (mChild.getMeasuredHeight() - visibilityHeight);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  super.onLayout(changed, l, t, r, b);
  mChild.layout(0,mScrollHeight,mChild.getMeasuredWidth(),mChild.getMeasuredHeight() + mScrollHeight);
 }

5、先看我定义的成员变量的含义吧：

 /**
  * downY：手指按下时距离View顶部的距离
  * moveY：手指在屏幕上滑动的距离（不停变化）
  * movedY：手指在屏幕上总共滑动的距离（为了确定手指一共滑动了多少距离，不能超过可滑动的最大距离）
  */
 private int downY,moveY,movedY;

 //子View
 private View mChild;

 private Scroller mScroller;

 //可滑动的最大距离
 private int mScrollHeight;

 //子View是否在顶部
 private boolean isTop = false;

 //最初子View在View内可见的高度
 private float visibilityHeight;

6、重写onTouchEvent方法，做滑动判断，解释都写在注释里了：

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()){
   case MotionEvent.ACTION_DOWN:
    //手指按下时距离View上面的距离
    downY = (int) event.getY();

    //如果子View不在顶部 && 按下的位置在子View没有显示的位置，则不消费此次滑动事件，否则消费
    if(!isTop && downY < mScrollHeight ){
     return super.onTouchEvent(event);
    }
    return true;
   case MotionEvent.ACTION_MOVE:

    moveY = (int) event.getY();
    //deY是滑动的距离，向上滑时deY>0 ，向下滑时deY<0
    int deY = downY - moveY;

    //向上滑动时的处理
    if(deY > 0){
     //将每次滑动的距离相加，为了防止子View的滑动超过View的顶部
     movedY += deY;
     if(movedY > mScrollHeight) movedY = mScrollHeight;

     if(movedY < mScrollHeight){
      scrollBy(0,deY);
      downY = moveY;
      return true;
     }
    }

    //向下滑动时的处理，向下滑动时需要判断子View是否在顶部，如果不在顶部则不消费此次事件
    if(deY < 0 && isTop){
     movedY += deY;
     if(movedY < 0 ) movedY = 0;
     if(movedY > 0){
      scrollBy(0,deY);
     }
     downY = moveY;
     return true;
    }

    break;
   case MotionEvent.ACTION_UP:
    //手指抬起时的处理，如果向上滑动的距离超过了最大可滑动距离的1/4，并且子View不在顶部，就表示想把它拉上去
    if(movedY > mScrollHeight / 4 && !isTop){
     mScroller.startScroll(0,getScrollY(),0,(mScrollHeight - getScrollY()));
     invalidate();
     movedY = mScrollHeight;
     isTop = true;
    }else {
     //否则就表示放弃本次滑动，让它滑到最初的位置
     mScroller.startScroll(0,getScrollY(),0, -getScrollY());
     postInvalidate();
     movedY = 0;
     isTop = false;
    }

    break;
  }
  return super.onTouchEvent(event);
 }

7、最后要重写一个computeScroll方法，该方法是用来配合scroller的：

 @Override
 public void computeScroll() {
  super.computeScroll();
  if(mScroller.computeScrollOffset()){
   scrollTo(0,mScroller.getCurrY());
   postInvalidate();
  }
 }

8、关于scroller的用法，可参考郭霖的这篇博客：http://blog.csdn.net/guolin_blog/article/details/48719871

四、完整代码：

xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

  <com.zw.myfirstapp.MyScrollerView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:background="@android:color/transparent"
   android:id="@+id/msv"
   app:visibility_height="100dp"
   >
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@mipmap/b"
    android:gravity="center"
    android:orientation="vertical">
    <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn"
     android:text="我是一个按钮"/>
   </LinearLayout>

  </com.zw.myfirstapp.MyScrollerView>

</RelativeLayout>

MyScrollerView：

public class MyScrollerView extends LinearLayout {

 /**
  * downY：手指按下时距离View顶部的距离
  * moveY：手指在屏幕上滑动的距离（不停变化）
  * movedY：手指在屏幕上总共滑动的距离（为了确定手指一共滑动了多少距离，不能超过可滑动的最大距离）
  */
 private int downY,moveY,movedY;

 //子View
 private View mChild;

 private Scroller mScroller;

 //可滑动的最大距离
 private int mScrollHeight;

 //子View是否在顶部
 private boolean isTop = false;

 //最初子View在View内可见的高度
 private float visibilityHeight;

 public MyScrollerView(Context context) {
  this(context,null);
 }

 public MyScrollerView(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }

 public MyScrollerView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);

  TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyScrollerView);
  visibilityHeight = ta.getDimension(R.styleable.MyScrollerView_visibility_height,200);
  ta.recycle();

  init(context);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  mScrollHeight = (int) (mChild.getMeasuredHeight() - visibilityHeight);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  super.onLayout(changed, l, t, r, b);
  mChild.layout(0,mScrollHeight,mChild.getMeasuredWidth(),mChild.getMeasuredHeight() + mScrollHeight);
 }

 private void init(Context context) {
  mScroller = new Scroller(context);
  this.setBackgroundColor(Color.TRANSPARENT);
 }

 @Override
 protected void onFinishInflate() {
  super.onFinishInflate();
  if(getChildCount() == 0 || getChildAt(0) == null){
   throw new RuntimeException("没有子控件！");
  }
  if(getChildCount() > 1){
   throw new RuntimeException("只能有一个子控件！");
  }
  mChild = getChildAt(0);
 }


 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()){
   case MotionEvent.ACTION_DOWN:
    //手指按下时距离View上面的距离
    downY = (int) event.getY();

    //如果子View不在顶部 && 按下的位置在子View没有显示的位置，则不消费此次滑动事件，否则消费
    if(!isTop && downY < mScrollHeight ){
     return super.onTouchEvent(event);
    }
    return true;
   case MotionEvent.ACTION_MOVE:

    moveY = (int) event.getY();
    //deY是滑动的距离，向上滑时deY>0 ，向下滑时deY<0
    int deY = downY - moveY;

    //向上滑动时的处理
    if(deY > 0){
     //将每次滑动的距离相加，为了防止子View的滑动超过View的顶部
     movedY += deY;
     if(movedY > mScrollHeight) movedY = mScrollHeight;

     if(movedY < mScrollHeight){
      scrollBy(0,deY);
      downY = moveY;
      return true;
     }
    }

    //向下滑动时的处理，向下滑动时需要判断子View是否在顶部，如果不在顶部则不消费此次事件
    if(deY < 0 && isTop){
     movedY += deY;
     if(movedY < 0 ) movedY = 0;
     if(movedY > 0){
      scrollBy(0,deY);
     }
     downY = moveY;
     return true;
    }

    break;
   case MotionEvent.ACTION_UP:
    //手指抬起时的处理，如果向上滑动的距离超过了最大可滑动距离的1/4，并且子View不在顶部，就表示想把它拉上去
    if(movedY > mScrollHeight / 4 && !isTop){
     mScroller.startScroll(0,getScrollY(),0,(mScrollHeight - getScrollY()));
     invalidate();
     movedY = mScrollHeight;
     isTop = true;
    }else {
     //否则就表示放弃本次滑动，让它滑到最初的位置
     mScroller.startScroll(0,getScrollY(),0, -getScrollY());
     postInvalidate();
     movedY = 0;
     isTop = false;
    }

    break;
  }
  return super.onTouchEvent(event);
 }

 @Override
 public void computeScroll() {
  super.computeScroll();
  if(mScroller.computeScrollOffset()){
   scrollTo(0,mScroller.getCurrY());
   postInvalidate();
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android垂直上拉下滑View  # Android垂直上拉View  # Android垂直下滑View  # Android下拉刷新上拉加载控件(适用于所有View）  # android开发教程之实现listview下拉刷新和上拉刷新效果  # Android实现上拉加载更多以及下拉刷新功能（ListView）  # Android RecyclerView实现下拉刷新和上拉加载  # Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法  # android搜索框上下滑动变色效果  # Android中 视频屏幕左半部分上下滑动改变亮度右半部分上下滑动改变声音  # Android RecyclerView下拉刷新和上拉加载更多  # Android自定义listview布局实现上拉加载下拉刷新功能  # Android实战教程第四十三篇之上拉加载与下拉刷新  # 重写  # 按下  # 有一  # 最初  # 屏幕上  # 让它  # 想把  # 大可  # 将该  # 不能超过  # 创建一个  # 为了防止  # 时需  # 的是  # 滑到  # 放在  # 超过了  # 我还  # 是这样  # 有很多 

相关文章： 网站制作的方法有哪些,如何将自己制作的网站发布到网上？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  建站之星安装后如何自定义网站颜色与字体？  建站10G流量真的够用吗？如何应对访问高峰？  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  昆明高端网站制作公司,昆明公租房申请网上登录入口？  定制建站哪家更专业可靠？推荐榜单揭晓  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  西安专业网站制作公司有哪些,陕西省建行官方网站？  建站之星Pro快速搭建教程：模板选择与功能配置指南  如何实现建站之星域名转发设置？  成都网站制作报价公司,成都工业用气开户费用？  行程制作网站有哪些,第三方机票电子行程单怎么开？  长沙做网站要多少钱,长沙国安网络怎么样？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  如何通过商城免费建站系统源码自定义网站主题？  建站主机与虚拟主机有何区别？如何选择最优方案？  高端企业智能建站程序：SEO优化与响应式模板定制开发  红河网站制作公司,红河事业单位身份证如何上传？  ,在苏州找工作，上哪个网站比较好？  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  青岛网站建设如何选择本地服务器？  建站之星代理费用多少？最新价格详情介绍  如何快速搭建安全的FTP站点？  制作网站的软件免费下载,免费制作app哪个平台好？  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  如何在万网自助建站平台快速创建网站？  宝塔面板如何快速创建新站点？  css网站制作参考文献有哪些,易聊怎么注册？  如何快速搭建高效WAP手机网站？  网站设计制作企业有哪些,抖音官网主页怎么设置？  如何在宝塔面板创建新站点？  Python文件管理规范_工程实践说明【指导】  大连网站制作公司哪家好一点,大连买房网站哪个好？  建站之星2.7模板：企业网站建设与h5定制设计专题  学校建站服务器如何选型才能满足性能需求？  招商网站制作流程,网站招商广告语？  手机网站制作与建设方案,手机网站如何建设？  如何用景安虚拟主机手机版绑定域名建站？  ,石家庄四十八中学官网？  如何通过建站之星自助学习解决操作问题？  ,网站推广常用方法？  建站VPS推荐：2025年高性能服务器配置指南  建站主机选购指南：核心配置优化与品牌推荐方案  建站之星ASP如何实现CMS高效搭建与安全管理？  教学论文网站制作软件有哪些,写论文用什么软件 ？