下拉刷新中Ultra-Pull-To-Refresh一直是我最喜欢用的了,这里自定义一个HeaderView的样式。和普通的样式略微有些区别。先看效果图
一眼看上去和普通下拉刷新样式没啥区别,但仔细看会发现下拉时的头部是盖在内容上的(为了简便,这里整个布局内容就一张图片)。而PtrFrameLayout默认布局样式是将头部放置在内容上方,下拉时从上到下逐渐显示。要实现这种头部覆盖在屏幕内容上的效果就需要我们另外想办法了。
<强>方案1:强修改库文件的,将headerView的显示位置放置在内容上方。由于PtrFrameLayout本身自己是一个ViewGroup,修改其中的onLayout的代码即可实现该样式
但是,这里考虑到这里布局修改后可能会导致的下拉刷新原本功能的一系列问题,想想还是直接放弃。
<强>方案2:强不修改库文件,HeaderView的位置不变,只是将HeaderView的内容显示到内容上面。这样的话HeaderView的内容显示就超出了其自身边界,听说在布局上加上一句神奇的代码可以实现,于是自己去尝试了下,确实真的可以,所以就选择方案2继续研究。
& lt; in.srain.cube.views.ptr.PtrFrameLayout xmlns: android=" http://schemas.android.com/apk/res/android "
android: id=癅 + id/ptr_layout_activity”
android: layout_width=" match_parent "
android: layout_height=" match_parent "
android: clipChildren=" false "比;之前
确定方案2后剩下的就是和普通自定义头部差不多的步骤。自定义一个视图实现PtrUIHandler的回调。其中用到的几张图片
首先观察下拉刷新的过程可以知道,整个下拉刷新过程中的几种状态。
状态1:开始下拉时底部显示弧线,黄色小人眼睛闭着(左1图片),此时下拉的高度不足以触发刷新操作,
状态2:下拉到可以触发刷新操作的高度后眼睛睁开(左2图片),
状态3:松手后刷新过程中的动作,动作由后面5张图轮播切换显示。
下拉刷新的距离以及状态判断处理在onUIPositionChange回调方法中
@Override
公共空间>
可拉的animationDrawable=ResourcesUtils.getDrawable (R.drawable.home_loading_2);
measureHeight=填充* 2 + animationDrawable.getIntrinsicHeight ();
之前
准备工作就绪,接下来就是重点onDraw中的方法,根据不同的状态绘制,但是这里有个麻烦的地方,上面7张图中,小黄人大小是一样的,但是后面5张图周围有了云朵背景,图片整体比前两张要大,所以在状态切换时,图片的绘制范围需要格外注意。
<强> 1。绘制弧线阶段,标志=1和2
开关(国旗){
案例1:
案例2:
复样=(int)((花束-转)* RATIO_TO_REFRESH)比;dragDistance * 2
& # 63;dragDistance * 2 + measureHeight: (int)((花束-转)* RATIO_TO_REFRESH)
+ measureHeight;//下拉弧度
mPath.reset ();
mPath。函数(0,measureHeight);
mPath.quadTo (getWidth()/2,复样,getWidth (), measureHeight);
mPath.lineTo (getWidth (), 0);
mPath。画线(0,0);
mPath.close ();
mDrawableRect.set (getWidth ()——drawable.getIntrinsicWidth ())/2,
getBsrPositionY(控制器)——drawable.getIntrinsicHeight () * 2/3,
(canvas.getWidth () + drawable.getIntrinsicWidth ())/2,
getBsrPositionY(控制器)+ drawable.getIntrinsicHeight ()/3);//绘制弧线
mPaint.setXfermode(空);
画布。drawPath (mPath mPaint);
canvas.save ();
canvas.clipPath (mPath);
drawable.setBounds (mDrawableRect);
drawable.draw(画布);
canvas.restore ();
打破;
之前
其中弧线是一条二阶贝塞尔曲线。
代码中控制器为控制点P1的Y坐标,将值表示下拉多少距离后开始绘制弧线(可以修改值来看看效果)。在这里我们的控制点X坐标在屏幕的中心(t=0.5), P0和P2的X坐标也是确定的,只需要求得对应的曲线Y轴最高点即可。又因为P0和P2Y轴坐标相同,都为measureHeight,所以这里二阶曲线的最高点左边简化计算为
