Android自定义ScrollView实现放大回弹效果实例代码

1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下:

2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果图如下:

3,自定义ScrollView

第一步:创建一个类,继承自ScrollView,重写相应的构造函数

public class ZoomInScrollView extends ScrollView {

 public ZoomInScrollView(Context context) {

    this(context, null);

  } 

  public ZoomInScrollView(Context context, AttributeSet attrs) {

    this(context, attrs, 0);

  }

  public ZoomInScrollView(Context context, AttributeSet attrs, int defStyleAttr) {

    super(context, attrs, defStyleAttr);

  }

}

第二步:重写OnFinishInflate()方法,并记录第一个子view,即我们的head_fragment

@Override

  protected void onFinishInflate() {

    super.onFinishInflate();

    //设置不可过度滚动,否则上移后下拉会出现部分空白的情况

    setOverScrollMode(OVER_SCROLL_NEVER);

    View child = getChildAt(0);

    if (child != null && child instanceof ViewGroup) {

      //获取默认第一个子View

      mHeaderView = ((ViewGroup) child).getChildAt(0);

    }

  }

第三步:重写OnTouchEvent()方法,在Action_Move方法中拿到下滑的距离,通过设置head_view的属性参数来改变它的大小,在UP的时候还原head_view

@Override

  public boolean onTouchEvent(MotionEvent ev) {

    if (mHeaderView == null)

      return super.onTouchEvent(ev);

    switch (ev.getAction()) {

      case MotionEvent.ACTION_MOVE:

        if (!mIsPulling) {

          //第一次下拉

          if (getScrollY() == 0) {

            //在顶部的时候,记录顶部位置

            mLastY = (int) ev.getY();

          } else {

            break;

          }

        }

        if (ev.getY() - mLastY < 0)

          return super.onTouchEvent(ev);

        int distance = (int) ((ev.getY() - mLastY) * mScaleRatio);

        mIsPulling = true;

        setZoom(distance);

        return true;

      case MotionEvent.ACTION_UP:

        mIsPulling = false;

        replyView();

        break;

    }

    return super.onTouchEvent(ev);

  }

在回弹view的时候通过属性动画动态的改变head_view的值,并重写onSizeChange()方法,实时的记录head_view的宽高

/**

 ** 放大view

 */

  private void setZoom(float s) {

    float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));

//    如超过最大放大倍数,直接返回

    if (scaleTimes > mScaleTimes) return;

    ViewGroup.LayoutParams layoutParams = mHeaderView.getLayoutParams();

    layoutParams.width = (int) (mHeaderWidth + s);

    layoutParams.height = (int) (mHeaderHeight * ((mHeaderWidth + s) / mHeaderWidth));

//    设置控件水平居中

    ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mHeaderWidth) / 2, 0, 0, 0);

    mHeaderView.setLayoutParams(layoutParams);

  }

  /**

   * 回弹

   */

  private void replyView() {

    final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;

    // 设置动画

    ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio));

    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override

      public void onAnimationUpdate(ValueAnimator animation) {

        setZoom((Float) animation.getAnimatedValue());

      }

    });

    anim.start();

  }

@Override

  protected void onSizeChanged(int w, int h, int oldw, int oldh) {

    super.onSizeChanged(w, h, oldw, oldh);

    mHeaderWidth = mHeaderView.getMeasuredWidth();

    mHeaderHeight = mHeaderView.getMeasuredHeight();

  }

这样就实现了我们的效果了,看一下我们自己实现的效果:

demo下载:ZoomInScrollView_jb51.rar

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

(0)

相关推荐

  • android中Bitmap的放大和缩小实例代码

    复制代码 代码如下: /**Bitmap放大的方法*/ private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f); //长和宽放大缩小的比例 Bitmap resizeBmp = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true); return

  • Android自定义ScrollView实现放大回弹效果

    背景 在很多项目中我们都会用到ScrollView这个控件,因为ScrollView能够在屏幕内容多时下上滑动以适配加载的内容.但是ScrollView滑动时效果感觉太死板了,这个时候我们如果给它添加一个回弹的动画效果,会让界面交互更加舒服,提升用户体验效果. 自定义ScrollView 1.创建一个类,继承ScrollView并重写相应的构造函数 public class ZoomInScrollView extends ScrollView { public ZoomInScrollView

  • Android App中实现可以双击放大和缩小图片功能的实例

    先来看一个很简单的核心图片缩放方法: public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "s

  • android 放大镜ShapeDrawable妙用分享

    首先,ShapeDrawable构造的时候可以指定描画的形状, 其次,可以通过shape.getPaint().setShader();指定Shader,shader可以接受一个图片和matrix 所以问题就顺利的解决了:) 具体实现如下:[java] 复制代码 代码如下: float scale = 1.2f; int cx = 224; int cy = 357; int r = 200; // 指定形状创建一个ShapeDrawable  ShapeDrawable shape=new S

  • Android实现ImageView图片双击放大及缩小

    本文实例介绍了Android实现ImageView图片双击放大及缩小的相关技巧,分享给大家供大家参考,具体内容如下 public class DoubleScaleImageView extends ImageView implements OnTouchListener, OnGlobalLayoutListener { private boolean isFirst = false; private float doubleScale;// 双击放大的值 private Matrix mSc

  • 利用iOS手势与scrollView代理实现图片的放大缩小

    前言 对于图片拉伸是移动开发中很常见的需求,最近工作中就遇到了利用iOS实现对图片的放大和缩小效果,通过查找资料找到了两种解决方法,分别是用捏合手势和用scrollView的代理方法来实现,下面话不多说,来看看详细的方法介绍吧. 第一种方法:用捏合手势放大缩小 @interface ViewController () @property (strong, nonatomic) IBOutlet UIView *redView; @property (assign, nonatomic) CGFl

  • Android中ScrollView 滑到头部或尾部可伸缩放大效果

    最近做项目,想要这么一个效果,就是ScrollView 滑动到顶部,当不能在滑动的时候,图片可以下拉放大,松开又恢复.滑到底部没有内容的时候,也有伸缩效果,先看看效果图吧. 就是如上图这么个效果.系统提供的ScrollView 是不能做到这个效果的,所以需要自己自定义,网上找了一些资料.也参考了下其他人的做法.自己也整合了一下.希望对大家有所帮助. 核心的控件就是下面的这段代码: package com.kokjuis.travel.customView; import android.anim

  • Android ReboundScrollView仿IOS拖拽回弹效果

    初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个. 这里先说下思路吧,如果不愿意看的朋友可以直接跳过这一步,看下面的代码: Android 原生的ScrollView是不支持拉出屏幕外,并且也没有回弹效果的,用户友好度却不不太好,不知道为什么不那么设计. 我想做的事情正如上面所述: 1.希望能拉出屏幕外 2.松手后希望控件回弹 我的思路是对ScrollView的子

  • Android实现图片反转、翻转、旋转、放大和缩小

    ********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

  • android图像绘制(二)画布上放大缩小问题

    android中图像在画布上放大缩小时,图像的边框大小没有改变! 原图如下: 放大后:原来图片的边框没有改变,位置依旧! 所以如果要放置图片的位置的话,就需要做相应的位置移动才可以! 采用如下代码(全屏放置图片): 复制代码 代码如下: Matrix matrix = new Matrix(); matrix.postScale(canvas.getWidth()*1.01f/bmpBg.getWidth(), canvas.getHeight()*1.01f/bmpBg.getHeight()

随机推荐