原理并不难.  代码量也不大.  非常简洁 .  先来个效果图

再上一波代码.

  1. public class SpecialScrollView extends ScrollView implements ViewTreeObserver.OnPreDrawListener {
  2.     private static final String TAG = "SpecialScrollView";
  3.     private int mOriginalHeight;
  4.     private int drawableHeight;
  5.     private ImageView mImage;
  6.     private float mLastY;
  7.     private boolean isMeasured =false;
  8.     public SpecialScrollView(Context context) {
  9.         super(context);
  10.     }
  11.  
  12.     public SpecialScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
  13.         super(context, attrs, defStyleAttr);
  14.     }
  15.  
  16.     public SpecialScrollView(Context context, AttributeSet attrs) {
  17.         super(context, attrs);
  18.     }
  19.  
  20.     /**
  21.      * 设置ImageView图片, 拿到引用
  22.      * @param mImage
  23.      */
  24.     public void setParallaxImage(ImageView mImage) {
  25.         this.mImage = mImage;
  26.         getViewTreeObserver().addOnPreDrawListener(this);
  27.  
  28.     }
  29.  
  30.     @Override
  31.     protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
  32.         LogUtils.i(TAG, "deltaY: " + deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
  33.                 + " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
  34.         // 手指拉动 并且 是下拉
  35.         if(isTouchEvent && deltaY < 0 && mImage!=null ){
  36.             // 把拉动的瞬时变化量的绝对值交给mIamge, 就可以实现放大效果
  37.             if(mImage.getHeight() <= drawableHeight ){
  38.                 int newHeight = (int) (mImage.getHeight() + Math.abs(deltaY / 3.0f));
  39.                 // 高度不超出图片最大高度时,才让其生效
  40.                 mImage.getLayoutParams().height = newHeight;
  41.                 mImage.requestLayout();
  42.             }
  43.         }
  44.  
  45.         return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
  46.     }
  47.  
  48.     @Override
  49.     public boolean onTouchEvent(MotionEvent ev) {
  50.         switch (ev.getAction()) {
  51.             case MotionEvent.ACTION_UP:
  52.                 // 执行回弹动画,  属性动画\值动画
  53.                 // 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
  54.                 if (mImage!=null){
  55.                     final int startHeight = mImage.getHeight();
  56.                     final int endHeight = mOriginalHeight;
  57.                     valueAnimator(startHeight, endHeight);
  58.                 }
  59.  
  60.                 break;
  61.         }
  62.         return super.onTouchEvent(ev);
  63.     }
  64.  
  65.     private void valueAnimator(final int startHeight, final int endHeight) {
  66.         ValueAnimator mValueAnim = ValueAnimator.ofInt(1);
  67.         mValueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  68.  
  69.             @Override
  70.             public void onAnimationUpdate(ValueAnimator mAnim) {
  71.                 float fraction = mAnim.getAnimatedFraction();
  72.                 // percent 0.0 -> 1.0
  73.                 Log.d(TAG, "fraction: " +fraction);
  74.                 Integer newHeight = evaluate(fraction, startHeight, endHeight);
  75.  
  76.                 mImage.getLayoutParams().height = newHeight;
  77.                 mImage.requestLayout();
  78.             }
  79.         });
  80.  
  81.         mValueAnim.setInterpolator(new OvershootInterpolator());
  82.         mValueAnim.setDuration(500);
  83.         mValueAnim.start();
  84.     }
  85.  
  86.     public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
  87.         int startInt = startValue;
  88.         return (int)(startInt + fraction * (endValue - startInt));
  89.     }
  90.  
  91.     @Override
  92.     public boolean onPreDraw() {
  93.         if (!isMeasured) {
  94.             mOriginalHeight = mImage.getHeight(); //
  95.             drawableHeight = mImage.getDrawable().getIntrinsicHeight(); //
  96.             isMeasured = true;
  97.             LogUtils.i(TAG, "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
  98.         }
  99.         return true;
  100.     }
  101. }

Layout布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <com.Imy.Fuli.View.SpecialScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:id="@+id/sp_scrollview"
  7.     android:orientation="vertical">
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:orientation="vertical">
  12.         <ImageView
  13.             android:src="@mipmap/bizhi"
  14.             android:scaleType="centerCrop"
  15.             android:id="@+id/infor_icon_bg"
  16.             android:layout_width="match_parent"
  17.             android:layout_height="250dp" />
  18.         <LinearLayout
  19.             android:orientation="vertical"
  20.             android:layout_width="match_parent"
  21.             android:layout_height="wrap_content">
  22.             <include layout="@layout/fragment_me_having_line"></include>
  23.  
  24.             <View
  25.                 android:layout_width="match_parent"
  26.                 android:layout_height="1px"
  27.                 android:background="@color/halving_line"/>
  28.             <RelativeLayout
  29.                 android:background="@drawable/selector_fragment_me_item_bg"
  30.                 android:id="@+id/head_icon_setting"
  31.                 android:layout_width="match_parent"
  32.                 android:layout_height="wrap_content"
  33.                 android:padding="8dp">
  34.  
  35.                 <TextView
  36.                     android:paddingTop="1dp"
  37.                     android:layout_gravity="center"
  38.                     android:paddingLeft="15dp"
  39.                     android:textColor="@color/color_grey_e0555555"
  40.                     android:layout_width="wrap_content"
  41.                     android:layout_height="wrap_content"
  42.                     android:textSize="16dp"
  43.                     android:text="头像"
  44.                     android:layout_centerVertical="true"
  45.                     android:layout_toRightOf="@+id/collect_icon"
  46.                     android:layout_toEndOf="@+id/collect_icon" />
  47.                 <FrameLayout
  48.                     android:layout_marginRight="15dp"
  49.                     android:layout_centerVertical="true"
  50.                     android:layout_alignRight="@+id/arrow_info"
  51.                     android:layout_width="50dp"
  52.                     android:layout_height="50dp">
  53.                     <com.Imy.Fuli.View.CircleImageView
  54.                         android:id="@+id/my_uer_icon"
  55.                         android:layout_width="match_parent"
  56.                         android:layout_height="match_parent"
  57.                         android:src="@mipmap/user_default_photo"
  58.                         app:civ_border_color="@color/white"
  59.                         app:civ_border_width="2dp" />
  60.                 </FrameLayout>
  61.  
  62.                 <ImageView
  63.                     android:id="@+id/arrow_info"
  64.                     android:layout_marginRight="10dp"
  65.                     android:layout_width="wrap_content"
  66.                     android:layout_height="wrap_content"
  67.                     android:src="@mipmap/right_arrow"
  68.                     android:layout_centerVertical="true"
  69.                     android:layout_alignParentRight="true"
  70.                     android:layout_alignParentEnd="true" />
  71.             </RelativeLayout>
  72.             <View
  73.                 android:layout_width="match_parent"
  74.                 android:layout_height="1px"
  75.                 android:background="@color/halving_line"/>
  76.             <include layout="@layout/fragment_me_having_line"></include>
  77.             <View
  78.                 android:layout_width="match_parent"
  79.                 android:layout_height="1px"
  80.                 android:background="@color/halving_line"/>
  81.             <LinearLayout
  82.                 android:orientation="vertical"
  83.                 android:background="@color/white"
  84.                 android:layout_width="wrap_content"
  85.                 android:layout_height="wrap_content">
  86.                 <RelativeLayout
  87.                     android:background="@drawable/selector_fragment_me_item_bg"
  88.                     android:id="@+id/personal_info_name_layout"
  89.                     android:layout_width="match_parent"
  90.                     android:layout_height="wrap_content"
  91.                     android:padding="8dp">
  92.  
  93.                     <TextView
  94.                         android:paddingTop="1dp"
  95.                         android:layout_gravity="center"
  96.                         android:paddingLeft="15dp"
  97.                         android:textColor="@color/color_grey_e0555555"
  98.                         android:layout_width="wrap_content"
  99.                         android:layout_height="wrap_content"
  100.                         android:textSize="16dp"
  101.                         android:text="昵称"
  102.                         android:layout_centerVertical="true"
  103.                         android:layout_toRightOf="@+id/collect_icon"
  104.                         android:layout_toEndOf="@+id/collect_icon" />
  105.                     <ImageView
  106.                         android:id="@+id/right_arrow_name"
  107.                         android:layout_marginRight="10dp"
  108.                         android:layout_width="wrap_content"
  109.                         android:layout_height="wrap_content"
  110.                         android:src="@mipmap/right_arrow"
  111.                         android:layout_centerVertical="true"
  112.                         android:layout_alignParentRight="true"
  113.                         android:layout_alignParentEnd="true" />
  114.                     <TextView
  115.                         android:id="@+id/personal_info_user_name"
  116.                         android:layout_width="wrap_content"
  117.                         android:layout_height="wrap_content"
  118.                         android:text="Imy"
  119.                         style="@style/text_style"
  120.                         android:layout_marginRight="15dp"
  121.                         android:layout_centerVertical="true"
  122.                         android:layout_toLeftOf="@+id/right_arrow_name"
  123.                         android:layout_toStartOf="@+id/right_arrow_name" />
  124.  
  125.                 </RelativeLayout>
  126.                 <View
  127.                     android:layout_width="match_parent"
  128.                     android:layout_height="1px"
  129.                     android:layout_marginLeft="24dp"
  130.                     android:background="@color/halving_line"/>
  131.                 <RelativeLayout
  132.                     android:background="@drawable/selector_fragment_me_item_bg"
  133.                     android:id="@+id/personal_info_area_layout"
  134.                     android:layout_width="match_parent"
  135.                     android:layout_height="wrap_content"
  136.                     android:padding="8dp">
  137.  
  138.                     <TextView
  139.                         android:paddingTop="1dp"
  140.                         android:layout_gravity="center"
  141.                         android:paddingLeft="15dp"
  142.                         android:textColor="@color/color_grey_e0555555"
  143.                         android:layout_width="wrap_content"
  144.                         android:layout_height="wrap_content"
  145.                         android:textSize="16dp"
  146.                         android:text="地区"
  147.                         android:layout_centerVertical="true"
  148.                         android:layout_toRightOf="@+id/collect_icon"
  149.                         android:layout_toEndOf="@+id/collect_icon" />
  150.                     <ImageView
  151.                         android:id="@+id/right_arrow_area"
  152.                         android:layout_marginRight="10dp"
  153.                         android:layout_width="wrap_content"
  154.                         android:layout_height="wrap_content"
  155.                         android:src="@mipmap/right_arrow"
  156.                         android:layout_centerVertical="true"
  157.                         android:layout_alignParentRight="true"
  158.                         android:layout_alignParentEnd="true" />
  159.                     <TextView
  160.                         android:id="@+id/personal_info_address"
  161.                         android:layout_width="wrap_content"
  162.                         android:layout_height="wrap_content"
  163.                         android:text=""
  164.                         style="@style/text_style"
  165.                         android:layout_marginRight="15dp"
  166.                         android:layout_centerVertical="true"
  167.                         android:layout_toLeftOf="@+id/right_arrow_area"
  168.                         android:layout_toStartOf="@+id/right_arrow_area" />
  169.  
  170.                 </RelativeLayout>
  171.                 <View
  172.                     android:layout_width="match_parent"
  173.                     android:layout_height="1px"
  174.                     android:layout_marginLeft="24dp"
  175.                     android:background="@color/halving_line"/>
  176.                 <RelativeLayout
  177.                     android:background="@drawable/selector_fragment_me_item_bg"
  178.                     android:id="@+id/personal_info_sex_layout"
  179.                     android:layout_width="match_parent"
  180.                     android:layout_height="wrap_content"
  181.                     android:padding="8dp">
  182.  
  183.                     <TextView
  184.                         android:paddingTop="1dp"
  185.                         android:layout_gravity="center"
  186.                         android:paddingLeft="15dp"
  187.                         android:textColor="@color/color_grey_e0555555"
  188.                         android:layout_width="wrap_content"
  189.                         android:layout_height="wrap_content"
  190.                         android:textSize="16dp"
  191.                         android:text="性别"
  192.                         android:layout_centerVertical="true"
  193.                         android:layout_toRightOf="@+id/collect_icon"
  194.                         android:layout_toEndOf="@+id/collect_icon" />
  195.                     <ImageView
  196.                         android:id="@+id/right_arrow_sex"
  197.                         android:layout_marginRight="10dp"
  198.                         android:layout_width="wrap_content"
  199.                         android:layout_height="wrap_content"
  200.                         android:src="@mipmap/right_arrow"
  201.                         android:layout_centerVertical="true"
  202.                         android:layout_alignParentRight="true"
  203.                         android:layout_alignParentEnd="true" />
  204.                     <TextView
  205.                         android:id="@+id/personal_info_user_sex"
  206.                         android:layout_width="wrap_content"
  207.                         android:layout_height="wrap_content"
  208.                         style="@style/text_style"
  209.                         android:layout_marginBottom="1dp"
  210.                         android:layout_marginRight="15dp"
  211.                         android:layout_centerVertical="true"
  212.                         android:layout_toLeftOf="@+id/right_arrow_sex"
  213.                         android:layout_toStartOf="@+id/right_arrow_sex" />
  214.                 </RelativeLayout>
  215.                 <View
  216.                     android:layout_width="match_parent"
  217.                     android:layout_height="1px"
  218.                     android:layout_marginLeft="24dp"
  219.                     android:background="@color/halving_line"/>
  220.                 <RelativeLayout
  221.                     android:background="@drawable/selector_fragment_me_item_bg"
  222.                     android:id="@+id/personal_info_age_layout"
  223.                     android:layout_width="match_parent"
  224.                     android:layout_height="wrap_content"
  225.                     android:padding="8dp">
  226.  
  227.                     <TextView
  228.                         android:paddingTop="1dp"
  229.                         android:layout_gravity="center"
  230.                         android:paddingLeft="15dp"
  231.                         android:textColor="@color/color_grey_e0555555"
  232.                         android:layout_width="wrap_content"
  233.                         android:layout_height="wrap_content"
  234.                         android:textSize="16dp"
  235.                         android:text="年龄"
  236.                         android:layout_centerVertical="true"
  237.                         android:layout_toRightOf="@+id/collect_icon"
  238.                         android:layout_toEndOf="@+id/collect_icon" />
  239.                     <ImageView
  240.                         android:id="@+id/right_arrow_birthday"
  241.                         android:layout_marginRight="10dp"
  242.                         android:layout_width="wrap_content"
  243.                         android:layout_height="wrap_content"
  244.                         android:src="@mipmap/right_arrow"
  245.                         android:layout_centerVertical="true"
  246.                         android:layout_alignParentRight="true"
  247.                         android:layout_alignParentEnd="true" />
  248.                     <TextView
  249.                         android:id="@+id/personal_info_age_tv"
  250.                         android:layout_width="wrap_content"
  251.                         android:layout_height="wrap_content"
  252.                         android:text=""
  253.                         style="@style/text_style"
  254.                         android:layout_marginRight="15dp"
  255.                         android:layout_centerVertical="true"
  256.                         android:layout_toLeftOf="@+id/right_arrow_birthday"
  257.                         android:layout_toStartOf="@+id/right_arrow_birthday" />
  258.                 </RelativeLayout>
  259.                 <View
  260.                     android:layout_width="match_parent"
  261.                     android:layout_height="1px"
  262.                     android:background="@color/halving_line"/>
  263.             </LinearLayout>
  264.  
  265.             <include layout="@layout/fragment_me_having_line"></include>
  266.             <View
  267.                 android:layout_width="match_parent"
  268.                 android:layout_height="1px"
  269.                 android:background="@color/halving_line"/>
  270.             <RelativeLayout
  271.                 android:background="@drawable/selector_fragment_me_item_bg"
  272.                 android:id="@+id/personal_info_signature_layout"
  273.                 android:layout_width="match_parent"
  274.                 android:layout_height="wrap_content"
  275.                 android:padding="8dp">
  276.                 <TextView
  277.                     android:paddingTop="1dp"
  278.                     android:layout_gravity="center"
  279.                     android:paddingLeft="15dp"
  280.                     android:textColor="@color/color_grey_e0555555"
  281.                     android:layout_width="wrap_content"
  282.                     android:layout_height="wrap_content"
  283.                     android:textSize="16dp"
  284.                     android:text="个性签名"
  285.                     android:layout_centerVertical="true"
  286.                     android:layout_toRightOf="@+id/collect_icon"
  287.                     android:layout_toEndOf="@+id/collect_icon" />
  288.                 <ImageView
  289.                     android:id="@+id/right_arrow_signature"
  290.                     android:layout_marginRight="10dp"
  291.                     android:layout_width="wrap_content"
  292.                     android:layout_height="wrap_content"
  293.                     android:src="@mipmap/right_arrow"
  294.                     android:layout_centerVertical="true"
  295.                     android:layout_alignParentRight="true"
  296.                     android:layout_alignParentEnd="true" />
  297.                 <RelativeLayout
  298.                     android:layout_marginRight="15dp"
  299.                     android:layout_centerVertical="true"
  300.                     android:layout_toLeftOf="@+id/right_arrow_signature"
  301.                     android:layout_toStartOf="@+id/right_arrow_signature"
  302.                     android:layout_width="200dp"
  303.                     android:layout_height="wrap_content">
  304.                     <TextView
  305.                         android:id="@+id/personal_info_signature"
  306.                         android:layout_alignParentRight="true"
  307.                         android:layout_width="wrap_content"
  308.                         android:layout_height="wrap_content"
  309.                         android:text="介绍下自己吧"
  310.                         style="@style/text_style"
  311.                         />
  312.                 </RelativeLayout>
  313.  
  314.             </RelativeLayout>
  315.             <View
  316.                 android:layout_width="match_parent"
  317.                 android:layout_height="1px"
  318.                 android:background="@color/halving_line"/>
  319.         </LinearLayout>
  320.  
  321.     </LinearLayout>
  322. </com.Imy.Fuli.View.SpecialScrollView>

　　

初始化:

  1. private void iniID() {
        mSpecialScrollView = (SpecialScrollView) findViewById(R.id.sp_scrollview);
        mImage = (ImageView) findViewById(R.id.infor_icon_bg);
        mSpecialScrollView.setParallaxImage(mImage);
    }

快过年了 码代码的心思都没了.~ 哎呀  布局文件 可无视. 懒得写demo了.

顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析的更多相关文章

  1. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  3. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  4. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  5. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  6. js图片放大境效果

    放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1 ...

  7. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  8. Android -- 自定义ScrollView实现放大回弹效果

    1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果 ...

  9. iOS----实现scrollView或者scrollView的子类下拉图片放大的效果

    代码是通过Tableview来说明的,用在其他情况下同样适用 - (void)viewDidLoad { [super viewDidLoad]; _imageview = [[UIImageView ...

随机推荐

  1. 清除html的标签和行内样式

    function shieldStyle(){ this._styleStartArr=["<span","<p","<strong ...

  2. 以不同用户身份运行程序，/savecred只需要输入一次密码（GetTokenByName取得EXPLORER.EXE的令牌，然后调用CreateProcessAsUser，而且使用LoadUserProfile解决另存文件的问题）good

    http://blog.sina.com.cn/s/blog_65977dde0100s7tm.html ----------------------------------------------- ...

  3. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  4. MySql密码丢失

     windows下mysql密码忘记了 第一步:netstat -nat(可以查看mysql是否启动了,如果启动了,可以用输入net stop mysql(或者通过任务管理器结束进程)) 第二步:my ...

  5. Annikken Andee–Arduino与Android间的简易连接

    一个Arduino的兼容板,允许你显示并控制来自Android设备的Arduino应用.无需Anroid APP开发. 点击:观看视频 什么是Annikken Andee? Annikken Ande ...

  6. HDU 5873 Football Games 【模拟】 (2016 ACM/ICPC Asia Regional Dalian Online)

    Football Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  7. 综合查询员工和datetime.now和datetime.today区别

    一:综合查询图 二:EmployeeListWindow.cs代码 using System; using System.Collections.Generic; using System.Compo ...

  8. Python中的迭代器和生成器

    本文以实例详解了python的迭代器与生成器,具体如下所示: 1. 迭代器概述: 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后 ...

  9. cf702D Road to Post Office

    D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...

  10. SRM 507(2-1000pt)

    DIV2 1000pt 题意:在一个长度无限的数轴上移动一个方块,每次可以向左或者向右移动距离x,只要x为完全平方数.数轴上有一些坑,如果方块移动到坑上则方块会掉进坑中,不能再被移动.给整数s,e,和 ...