顶部图片放大回弹效果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 ...
随机推荐
- 专家解读Linux操作系统内核中的GCC特性
专家解读Linux操作系统内核中的GCC特性 Linux内核使用GNU Compiler Collection (GCC)套件的几个特殊功能.这些功能包括提供快捷方式和简化以及向编译器提供优化提示 ...
- 物联网传输协议MQTT
MQTT是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提供可靠的网络服务.MQTT是专门针对物联网开发的轻量级传输协议.MQTT协议针对低 ...
- GIT,VAGRANT及COREOS
搞了COREOS才高大上啊. 测试DOCKER安装. 就是WIN下面GIT显得土豪..
- JavaScript encodeURI() 函数
encodeURI() 函数可把字符串作为 URI 进行编码. -------------------------------------------------------------------- ...
- zabbix 默认item采集使用被动模式 需要改为主动模式
数据采集的工作模式可以分为被动模式(服务器端到客户端采集数据) 主动模式(客户端主动上报数据到服务器端) 服务器配置: DBHost=192.168.32.55 DBName= zabbix DBUs ...
- Windows下Vundle插件BundleSearch命令出现错误解决方案
纯粹参考他人博文,已证明解决方案正确,转载时请注明参考链接!!! 参考链接: http://www.tuicool.com/articles/e2aiEn 在Windows下使用Vim时,用Vundl ...
- 动态规划(水题)：COGS 261. [NOI1997] 积木游戏
261. [NOI1997] 积木游戏 ★★ 输入文件:buildinggame.in 输出文件:buildinggame.out 简单对比时间限制:1 s 内存限制:128 MB S ...
- 【贪心】Codeforces 704B & 705D Ant Man
题目链接: http://codeforces.com/problemset/problem/704/B 题目大意: 给N个点,起点S终点T,每个点有X,A,B,C,D,根据I和J的X坐标可得I到J的 ...
- 老罗android开发视频教程学习完了
让我学到了android的文件结构,事件窗口数据传递,百度地图开发很感谢
- PHPExcel内存泄漏问题
使用 PHPExcel 来生成 excel 文档是比较消耗内存的,有时候可能会需要通过一个循环来把大数据切分成若干个小的 excel 文档保存来避免内存耗尽. 然而 PHPExcel 存在 circu ...