高仿墨迹天气“我”页面

来源：互联网发布：金属重量计算器软件编辑：程序博客网时间：2024/05/02 01:01

看到墨迹天气的“我”页面比较炫酷，处于好奇，就写了一个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);}
下载地址：http://download.csdn.net/detail/huweigoodboy/9095985

1 0