时间:2021-05-20
先看效果:
效果不错吧!
进入主题之前,先了解ImageView的scaleType的center_crop,网络上说的已经很清楚了 : 以下抄自网络:
1.Android:scaleType=”centerCrop”
以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理。
均衡的缩放图像(保持图像原始比例),使图片的两个坐标(宽、高)都大于等于 相应的视图坐标(负的内边距)。图像则位于视图的中央。 在XML 中可以使用的语法:android:scaleType=”centerCrop”。
不说废话,直接进入主题!!
思路
1.先将topView的布局和listview平级,然后将topview以及topview包裹的imageView中传listview,即一般是activity的layout
2.重写listView的ontoucEvent()方法,但不做任何拦截,只在action时,控制imageView以及topView的高度,使其重新layout然后重新布局就可以了。
3.以上是大概思路,这里具体分析:当action_down时记录其初始位置,action_move时得到dy,通过dy来判断是上啦还是下拉:
(1)dy>0,则是下拉,不断重新设置topView和imageView的高度,又因为imageView的scaleType=center_crop,所以图片会按照这个规则进行等比拉伸,当到达图片最大时就会有不断放大的过程
当松开手或者手指移出屏幕外时(action_up|action_outside|action_cancel)时让其回到初始位置,并伴着回弹过程,这里通过自定义动画让其具备回弹效果
(2)dy<0,则是上拉,上推的过程,由于topView和Imageview不具备滚动的效果,所以上推也是通过控制topView和ImageView的高度,并且当TopVIew和ImageView滑出屏幕时就不在更改高度防止不断的绘制,提高性能。
ok,大体思路就这样。具体分析代码如下:
实现:
activity的xml
stretch_act.xml:
看看StretchListView:
/*** * @param topView * @param imgResId 图片id */ public void setTopView(View topView, int imgResId) { if (null != topView) { this.topView = topView; imageView = (ImageView) topView.findViewById(imgResId); } }通过这个对外的方法,将topView以及ImageView的id传进来
分析:重新ListView的onTouchEvent():
ACTION_DOWN: case MotionEvent.ACTION_DOWN: startY = ev.getRawY(); if (!hadInit) {//初始化,只要初始化一次就够了 childAt0Top = getChildAt(0).getTop(); ivInitHeight = imageView.getHeight(); hadInit = true; } break;只是进行一些初始化操作:
1. startY:相对于屏幕顶部的高度
2. childAt0Top,获取listview的第一个view的top距离、
3. ivInitHeight:获取ImageView的初始高度,即刚进来时的高度
ACTION_MOVE:
当下拉时:主要条件如下:
1.dy > 0 && 0 == getFirstVisiblePosition() && childAt0Top ==
getChildAt(0).getTop()
意思是当下拉时,并且listview的第一个位置显示全了,才能下拉放大图片,这是避免,listview已经发生滚动了,需要回到初始位置才能下拉放大,否则会出现,立即下拉放大,体验不好
2.当上拉时 主要条件
if (translationY <= 0 && currHeight > 0)
currHeight>0:当前ImageView的高度,如果已经滚动到顶部或者超出,则不再进行滚动,防止已经滚出屏幕不可视了,还在进行滚动。
translationY<=0: 这个值是滚动的距离,这个距离不能超过ImageView的高度,由于上拉时dy是负值,所以要判断是否小于0;其主要方法如下:
ACTION_UP:
case MotionEvent.ACTION_OUTSIDE: case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: if (isChangedHeight) { if (imageView.getHeight() > ivInitHeight) {// (1)手指从上往下拉:下拉 ResetAnimation resetAnimation = new ResetAnimation(ivInitHeight, imageView, topView); resetAnimation.setDuration(200); imageView.startAnimation(resetAnimation); } else {//(2)手指从下往上拉:上拉。。。这个不用处理。。。因为上拉后松开让其topview固定 } isChangedHeight = false; } break;isChangedHeight:当发生ImageView发生改变,并且是下拉时,这是松开手或者手指移出屏幕,则让其回弹到初始位置;这里是通过自定义动画来改变其变化的高度,达到回弹效果 代码如下
/** * 自定义回弹动画,使imageView和topView过渡回弹到初始位置 */ static class ResetAnimation extends Animation { private View topView; private int topCurrHeight; private ImageView ivStretch; private int ivInitHeight; private int ivCurrHeight; public ResetAnimation(int ivInitHeiht, ImageView ivStretch, View topView) { this.ivInitHeight = ivInitHeiht; this.ivCurrHeight = ivStretch.getHeight(); this.topCurrHeight = topView.getHeight(); this.ivStretch = ivStretch; this.topView = topView; } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { int dy = (int) ((ivCurrHeight - ivInitHeight) * interpolatedTime); Log.d(TAG, "anim dy = " + dy); ivStretch.getLayoutParams().height = ivCurrHeight - dy; topView.getLayoutParams().height = topCurrHeight - dy; topView.requestLayout(); } }其实主要是applyTransformation(float interpolatedTime, Transformation t) 这个方法
主要是通过这个渐变因子interpolatedTime来控制,其值范围是(0~1) 所以计算渐变的高度如下
int dy = (int) ((ivCurrHeight - ivInitHeight) * interpolatedTime);
然后一定要记得调用topView.requestLayout(),让其重新布局绘制。这样就完成了,所有代码,也就一百行代码左右,是不是很简单。而且通过这个demo,可以很好的拓展到scrollview中。
注意:
网上有些demo是通过overScrollBy()这个方法中搞事情,因为
其自带dy,还有一些其它的参数,应有尽有。但是由于android系统是开源的导致有些系统是无法回调这个方法的,以至于无法实现回弹效果(比如:vivoX5)等等。所以在onTouchEvent()搞事情才是王道
ok!,以上有什么问题,请不吝指正!!!
Demo:android个人主页下拉回弹
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
qq详细资料在个人主页,方法如下: 1、打开手机,进入QQ,左滑进入个人主页; 2、在个人主页里点击自己的头像,即可查看详情资料。 QQ(TencentQ
截止2020年6月10日,QQ的最新版是v8.3.6.4590,详细资料在个人主页里可以查看,方法如下: 1、打开手机,进入QQ,左滑首页进入个人主页。 2
个人主页网站有它自身的优势,一方面制作比较简便,另一方面可以提高制作能力。个人主页网站制作有什么设计原则呢?个人主页网站可以的达到什么作用呢?一个图文并茂的个人
知乎最近浏览别人能看到。知乎个人主页大致分为5个版面:“个人资料”、“个人回答”、“个人主页”、“搜索用户问题和答案”、“关注人和被关注信息”和“关注话题”。
知乎可以看到别人的浏览记录。知乎个人主页大致分为5个版面:“个人资料”、“个人回答”、“个人主页”、“搜索用户问题和答案”、“关注人和被关注信息”和“关注话题”