顶部图片放大回弹效果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 ...
随机推荐
- Qt之自定义托盘（两种方法）
http://www.cnblogs.com/swarmbees/p/5789482.html http://www.cnblogs.com/swarmbees/p/5812031.html
- Oracle 多版本控制
SESSION 1: SQL> create table t 2 as 3 select * from all_users; Table created. SQL> variable x ...
- java学习之常量与进制
java中的常量包括以下几类: 1.整型常量,比如:3,5,89,99 2.浮点型常量:比如1.23,5.98,3.1415926 3,字符常量:'a','c','1'(需要注意的一点是字符常量只能包 ...
- 杂题 UVAoj 107 The Cat in the Hat
The Cat in the Hat Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...
- android.process.acore和system进程
从源码看来,android.process.acore进程应该是一些基本功能的载入程序. android-4.3_r2.2中,它包括以下项目: 1.UserDictionaryProvider < ...
- HDOJ 2053 Switch Game
Problem Description There are many lamps in a line. All of them are off at first. A series of operat ...
- WCF分布式事务
原文地址:http://developer.51cto.com/art/201002/185426.htm 我们作为一个开发人员,应该能够顺应技术的不断发展,不断的去掌握新技术.那么,对于WCF的掌握 ...
- [Locked] Two Sum
Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascending or ...
- Python文件中文编码问题
读写中文 需要读取utf-8编码的中文文件,先利用sublime text软件将它改成无DOM的编码,并且在第一行写: # encoding: utf-8 然后用以下代码: with codecs.o ...
- 《University Calculus》-chaper8-无穷序列和无穷级数-p级数
Q:定义p级数有如下形式,讨论p级数的敛散性.(p>o) 我们以p = 1作为分界点,因为实践表明这个分界点是最优区分度的.那么下面我们进行分情况讨论. 在这之前,我们有必要先引入一个检验敛散性 ...