看到墨迹天气的“我”页面比较炫酷,处于好奇,就写了一个demo模仿一下。
1,实现效果
实现的效果分三个部分来说明,首先是下拉到最大高度,个人信息界面会产生一个回弹的效果,然后是滚动到顶部,个人信息界面收缩,并且产生登录按钮会重新出现,黄色的消息按钮会平移到最右边。最后是在这两种状态之间,控件会根据滚动的距离来判断变换成前面两种状态中的一种状态。
2,实现思路
首先根据三种状态切割UserInfoView控件的三种高度,
“userinfo_min_height” 100dp
“userinfo_common_height” 200dp
“userinfo_max_height” 300dp
分别为最大高度(弹性高度),普通高度和最小高度。
(1)弹性效果
@Override
public boolean onTouchEvent(MotionEvent ev) {
int scrollY = getScrollY();
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
if (scrollY < MIN_SCROLLY + (MAX_SCROLLY- MIN_SCROLLY)/4) {
smoothScrollTo(0, MIN_SCROLLY);
}else if(scrollY <MAX_SCROLLY){
smoothScrollTo(0,MAX_SCROLLY);
}
return true;
}
return super.onTouchEvent(ev);
}
(2)中间过程动画处理
public void onChange(int range) {
mRange = range * STANDARD_RANGE / MAX_RANGE;
if (mRange <= HEAD_GONE_VALUE) { mRl_center.setVisibility(VISIBLE); int alpha = 255 - 255 * (mRange) / HEAD_GONE_VALUE; mIv_head.setAlpha(alpha); mTv_username.setTextColor(Color.argb(alpha, 255, 255, 255)); float scale = (float) mRange / STANDARD_RANGE; mRl_center.setScaleX((1 - scale)*0.3f+0.7f); mRl_center.setScaleY((1 - scale)*0.3f+0.7f); // mTv_username.setScaleX(1-scale); // mTv_username.setScaleY(1-scale); } else { mRl_center.setVisibility(INVISIBLE); } if (mRange >= STANDARD_RANGE - HEAD_GONE_VALUE) { mTv_username_top.setVisibility(VISIBLE); int alpha = 255 * (STANDARD_RANGE - mRange) / HEAD_GONE_VALUE; mTv_username_top.setTextColor(Color.argb(255 - alpha, 255, 255, 255)); } else { mTv_username_top.setVisibility(INVISIBLE); } int x = mRange * (MOVE_FINAL_X - MOVE_INIT_X) / STANDARD_RANGE + MOVE_INIT_X; mIv_share.setX(x);
}