顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析
原理并不难. 代码量也不大. 非常简洁 . 先来个效果图
再上一波代码.
public class SpecialScrollView extends ScrollView implements ViewTreeObserver.OnPreDrawListener {
private static final String TAG = "SpecialScrollView";
private int mOriginalHeight;
private int drawableHeight;
private ImageView mImage;
private float mLastY;
private boolean isMeasured =false;
public SpecialScrollView(Context context) {
super(context);
}
public SpecialScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public SpecialScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 设置ImageView图片, 拿到引用
* @param mImage
*/
public void setParallaxImage(ImageView mImage) {
this.mImage = mImage;
getViewTreeObserver().addOnPreDrawListener(this);
}
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
LogUtils.i(TAG, "deltaY: " + deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
+ " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
// 手指拉动 并且 是下拉
if(isTouchEvent && deltaY < 0 && mImage!=null ){
// 把拉动的瞬时变化量的绝对值交给mIamge, 就可以实现放大效果
if(mImage.getHeight() <= drawableHeight ){
int newHeight = (int) (mImage.getHeight() + Math.abs(deltaY / 3.0f));
// 高度不超出图片最大高度时,才让其生效
mImage.getLayoutParams().height = newHeight;
mImage.requestLayout();
}
}
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
// 执行回弹动画, 属性动画\值动画
// 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
if (mImage!=null){
final int startHeight = mImage.getHeight();
final int endHeight = mOriginalHeight;
valueAnimator(startHeight, endHeight);
}
break;
}
return super.onTouchEvent(ev);
}
private void valueAnimator(final int startHeight, final int endHeight) {
ValueAnimator mValueAnim = ValueAnimator.ofInt(1);
mValueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator mAnim) {
float fraction = mAnim.getAnimatedFraction();
// percent 0.0 -> 1.0
Log.d(TAG, "fraction: " +fraction);
Integer newHeight = evaluate(fraction, startHeight, endHeight);
mImage.getLayoutParams().height = newHeight;
mImage.requestLayout();
}
});
mValueAnim.setInterpolator(new OvershootInterpolator());
mValueAnim.setDuration(500);
mValueAnim.start();
}
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
int startInt = startValue;
return (int)(startInt + fraction * (endValue - startInt));
}
@Override
public boolean onPreDraw() {
if (!isMeasured) {
mOriginalHeight = mImage.getHeight(); //
drawableHeight = mImage.getDrawable().getIntrinsicHeight(); //
isMeasured = true;
LogUtils.i(TAG, "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
}
return true;
}
}
Layout布局
<?xml version="1.0" encoding="utf-8"?>
<com.Imy.Fuli.View.SpecialScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/sp_scrollview"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="@mipmap/bizhi"
android:scaleType="centerCrop"
android:id="@+id/infor_icon_bg"
android:layout_width="match_parent"
android:layout_height="250dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="@layout/fragment_me_having_line"></include> <View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/head_icon_setting"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="头像"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<FrameLayout
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_alignRight="@+id/arrow_info"
android:layout_width="50dp"
android:layout_height="50dp">
<com.Imy.Fuli.View.CircleImageView
android:id="@+id/my_uer_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/user_default_photo"
app:civ_border_color="@color/white"
app:civ_border_width="2dp" />
</FrameLayout> <ImageView
android:id="@+id/arrow_info"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
<include layout="@layout/fragment_me_having_line"></include>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
<LinearLayout
android:orientation="vertical"
android:background="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/personal_info_name_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="昵称"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<ImageView
android:id="@+id/right_arrow_name"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:id="@+id/personal_info_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Imy"
style="@style/text_style"
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/right_arrow_name"
android:layout_toStartOf="@+id/right_arrow_name" /> </RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="24dp"
android:background="@color/halving_line"/>
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/personal_info_area_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="地区"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<ImageView
android:id="@+id/right_arrow_area"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:id="@+id/personal_info_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="@style/text_style"
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/right_arrow_area"
android:layout_toStartOf="@+id/right_arrow_area" /> </RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="24dp"
android:background="@color/halving_line"/>
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/personal_info_sex_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="性别"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<ImageView
android:id="@+id/right_arrow_sex"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:id="@+id/personal_info_user_sex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/text_style"
android:layout_marginBottom="1dp"
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/right_arrow_sex"
android:layout_toStartOf="@+id/right_arrow_sex" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="24dp"
android:background="@color/halving_line"/>
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/personal_info_age_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="年龄"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<ImageView
android:id="@+id/right_arrow_birthday"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:id="@+id/personal_info_age_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="@style/text_style"
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/right_arrow_birthday"
android:layout_toStartOf="@+id/right_arrow_birthday" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
</LinearLayout> <include layout="@layout/fragment_me_having_line"></include>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
<RelativeLayout
android:background="@drawable/selector_fragment_me_item_bg"
android:id="@+id/personal_info_signature_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:paddingTop="1dp"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:textColor="@color/color_grey_e0555555"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dp"
android:text="个性签名"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/collect_icon"
android:layout_toEndOf="@+id/collect_icon" />
<ImageView
android:id="@+id/right_arrow_signature"
android:layout_marginRight="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/right_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_marginRight="15dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/right_arrow_signature"
android:layout_toStartOf="@+id/right_arrow_signature"
android:layout_width="200dp"
android:layout_height="wrap_content">
<TextView
android:id="@+id/personal_info_signature"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="介绍下自己吧"
style="@style/text_style"
/>
</RelativeLayout> </RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/halving_line"/>
</LinearLayout> </LinearLayout>
</com.Imy.Fuli.View.SpecialScrollView>
初始化:
private void iniID() {
mSpecialScrollView = (SpecialScrollView) findViewById(R.id.sp_scrollview);
mImage = (ImageView) findViewById(R.id.infor_icon_bg);
mSpecialScrollView.setParallaxImage(mImage);
}
快过年了 码代码的心思都没了.~ 哎呀 布局文件 可无视. 懒得写demo了.
顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析的更多相关文章
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- js+jquery+html实现在三种不通的情况下，点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)
源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
- js图片放大境效果
放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1 ...
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- Android -- 自定义ScrollView实现放大回弹效果
1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果 ...
- iOS----实现scrollView或者scrollView的子类下拉图片放大的效果
代码是通过Tableview来说明的,用在其他情况下同样适用 - (void)viewDidLoad { [super viewDidLoad]; _imageview = [[UIImageView ...
随机推荐
- BZOJ 1507 Editor
Description Input 输入文件editor.in的第一行是指令条数t,以下是需要执行的t个操作.其中: 为了使输入文件便于阅读,Insert操作的字符串中可能会插入一些回车符,请忽略掉它 ...
- BZOJ 3572 世界树
Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生不息.持 ...
- 【HDOJ】1484 Basic wall maze
BFS. /* 1484 */ #include <iostream> #include <queue> #include <string> #include &l ...
- POJ-1330--Nearest Common Ancestors(离线LCA)
LCA离线算法 它需要一次输入所有的询问,然后有根节点开始进行深度优先遍历(DFS),在深度优先遍历的过程中,进行并查集的操作,同时查询询问,返回结果. 题意: 求A ,B两点的最近公共祖先 分析: ...
- ZOJ-1508Intervals(差分约束)
题意: 有一个序列,题目用n个整数组合 [ai,bi,ci]来描述它,[ai,bi,ci]表示在该序列中处于[ai,bi]这个区间的整数至少有ci个.如果存在这样的序列,请求出满足题目要求的最短的序列 ...
- 基于物联网操作系统HelloX的智慧家庭体系架构
基于物联网操作系统HelloX的智慧家庭体系架构 智慧家庭是物联网的一个分支应用,是一个被广泛认同的巨大IT市场空间.目前市场上已经有很多针对智慧家庭的产品或解决方案,但与移动互联网不同,智慧家庭至今 ...
- super返回不过来
class Fruit { String color = "未确定颜色"; //定义一个方法,该方法返回调用该方法的实例 public Fruit getT ...
- 解决weblogic Managed Server启动非常慢的情况
jdk版本:1.7.0_79 查看控制台日志停留在如下地方: . . JAVA Memory arguments: -Xms2048m -Xmx4096m -XX:MaxPermSize=512m . ...
- 【转】Android自定义Adapter的ListView的思路及代码
原文网址:http://www.jb51.net/article/37236.htm Android自定义Adapter的ListView的思路及代码,需要的朋友可以参考一下 在开发中,我们经常使 ...
- openSession和getCurrentSession的比较
在比较openSession和getCurrentSession这两个方法之前,我们先认识一下这两个方法. 在进行配置信息管理时,我们一般进行一下简单步骤: Configuration cfg = n ...