顶部图片放大回弹效果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 ...
随机推荐
- TF-IDF与余弦相似性的应用
类似的算法已经被写成了工具,比如基于Java的Classifier4J库的SimpleSummariser模块.基于C语言的OTS库.以及基于classifier4J的C#实现和python实现.
- seajs打包部署工具spm的使用总结
相信使用seajs的好处大家都是知道的,接触seajs好像是在半年前,当时还不知道页面阻塞问题,这里不带多余的话了. seajs实现了模块化的开发,一个网站如果分了很多很多模块的话,等开发完成了,发现 ...
- Hadoop完全分布式集群安装
转载请注明原地址,谢谢! 本文目的是教大家配置Hadoop的完全分布式的集群,除了完全分布式还有两种分别是单节点和伪分布式部署.伪分布式只需要一台虚拟机,配置的东西也相对较少,大多用作代码调试,大家稍 ...
- Borg Maze poj 3026
Description The Borg is an immensely powerful race of enhanced humanoids from the delta quadrant of ...
- Replicate String in C#
My original posting on string repetition caused a couple responses, and is currently among the Top P ...
- 深入浅出 Java Concurrency (2): 原子操作 part 1
转:http://www.blogjava.net/xylz/archive/2010/07/01/324988.html 从相对简单的Atomic入手(java.util.concurrent是基于 ...
- macbookpro2011 光驱坏了如何安装windows7
由于光驱坏了试了网络上的很多方法,2011年款是无法识别到光驱的,即使做了USB的windows驱动盘也无济于事,结果去了电脑城,一位技术员最终用一个U盘装着windowsPE,从PE中安装windo ...
- github继续折腾
又在折腾github了,本来以前在neworiginou这个github上上传过项目的: 现在想在另一个github上joely上传项目,发现按以前的流程做个测试,居然没能上传成功! 经发现,以前的n ...
- uboot从SD卡烧写内核和文件系统
环境:ubuntu 13.04一.首先制作sd启动盘: 插入SD卡 sudo dd iflag=dsync oflag=dsync if=tiny210v2-uboot.binof=/dev/m ...
- HDOJ 2015 偶数求和
Problem Description 有一个长度为n(n<=100)的数列,该数列定义为从2开始的递增有序偶数,现在要求你按照顺序每m个数求出一个平均值,如果最后不足m个,则以实际数量求平均值 ...