android 模仿uc标签页,android模仿UC首页天气效果

这个效果写了两边才搞出来，写第一遍的时候是凭着自己对这个效果的记忆去写的，重写了ScrollView,在初始化完毕给它强制添加了一个View，并设置paddingtop为-view的高度隐藏它，然后通过onTouch事件一点点的显示。

等效果出来了，看着好像和记忆中的效果有点差距，这是才打开UC又对比了一下,结果：人家是从头部开始显示，而我的是从底部开始显示，导致的结果就是：我的像是普通的滑动显示，一点档次都没有。

那好吧，重写！

要从上面开始显示，那就只能默认的时候是下面的view全覆盖上面的view(暂且称之为cardview吧)，然后通过拖拽来设置下面view的margintop，达到逐渐显示cardview的效果，有了思路，那就开干！

先来看看效果吧：

既然是用FrameLayout，那我先定义一个CardView继承自FrameLayout。然后强制在最上面添加一个cardview就ok，代码：

public class CardView extends FrameLayout {

private static final float TEXT_MAX_SIZE = 50f; // 文字最带值

private ViewGroup mCardView; // 上面的cardlayout

private View mFirstChild; // 该布局下的第一个子view

private TextView mCardText; // 文字

private int mCardHeight; // cardlayout的高度

private int mStartY; // 开始拖拽的y值

private int mNowMarginTop; // 保存当前的margintop

private boolean isShown; // 记录cardlayout是否显示

public CardView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public CardView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

// 获取cardLayout

mCardView = (ViewGroup) LayoutInflater.from(context).inflate(

R.layout.card_layout, null);

mCardText = (TextView) mCardView.findViewById(R.id.card_text);

// 设置默认属性

mCardText.setTextSize(0.0f);

mCardView.setAlpha(0.0f);

// 测量一下cardlayout

measureView(mCardView);

// 测量后获取高度

mCardHeight = mCardView.getMeasuredHeight();

// 添加到当前布局中

addView(mCardView, 0);

}

// 测量view

private void measureView(View view) {

ViewGroup.LayoutParams lp = view.getLayoutParams();

if(null == lp) {

lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 250);

view.setLayoutParams(lp);

}

int widthMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, lp.width);

int height = lp.height;

int heightMeasureSpec;

if(height > 0) {

heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

}else {

heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);

}

view.measure(widthMeasureSpec, heightMeasureSpec);

}

// 当布局加载完毕后

// 这时getChildCount()才能取出值

// 在前面getChildCount()为0

// 因此这里开始才能使用getChildAt()

@Override

protected void onFinishInflate() {

super.onFinishInflate();

if(getChildCount() <= 0) {

System.err.println("no child was found!");

return;

}

// 获取第一个布局文件中定义的第一个子view

// 为什么是1呢？ 因为我们上面手工添加了一个。

mFirstChild = getChildAt(1);

}

// 滑动时，设置效果和属性

private void setCurrent(int topMargin) {

// 如果超过了cardlayout的高度

// 则最大就是cardlayout的高度

if(topMargin > mCardHeight) {

topMargin = mCardHeight;

}

// 同样，小于0了，最小就是0

if(topMargin <= 0) {

topMargin = 0;

}

// 根据现在的topmargin设置cardlayout的alpha

mCardView.setAlpha(topMargin/(float)mCardHeight);

// 根据现在的topmargin设置文本的大小

mCardText.setTextSize(topMargin/(float)mCardHeight * TEXT_MAX_SIZE);

// 获取子view的layoutparams

FrameLayout.LayoutParams lp = (LayoutParams) mFirstChild.getLayoutParams();

if(null == lp) {

lp = new FrameLayout.LayoutParams(

FrameLayout.LayoutParams.MATCH_PARENT,

FrameLayout.LayoutParams.WRAP_CONTENT);

}

// 设置margintop

lp.topMargin = topMargin;

mFirstChild.setLayoutParams(lp);

mNowMarginTop = topMargin;

invalidate(); // 刷新界面

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

mStartY = (int) event.getY(); // 当按下时，记录按下的y值

break;

case MotionEvent.ACTION_MOVE:

int nowY = (int) event.getY(); // 移动时，获取y

// 如果当前不是显示状态

if(!isShown) {

setCurrent(nowY - mStartY); // 非显示状态->显示状态：使用这个逻辑

}else {

setCurrent(mCardHeight-(mStartY - nowY)); // 显示状态->非显示状态：使用这个逻辑

}

break;

case MotionEvent.ACTION_UP:

mStartY = 0; // 抬起的时候，重新设置mStartY

// 抬起了，cardlayout只有两种状态

// 显示/不显示

// 如果现在的margin值大于cardlayout高度的二分之一，则全显示

// 否则不显示

if(mNowMarginTop >= mCardHeight / 2) {

setCurrent(mCardHeight);

isShown = true;

}else {

setCurrent(0);

isShown = false;

}

break;

}

return true;

}

}

需要说明的有两点：

1、在CardView中，我们需要获取他的第一个子View(因为要改变他的margintop值来显示动态添加的那个view)。在哪获取呢？如果在构造方法中获取或报异常，因为这时候layout还没有加载完成，那我们就在layout加载完毕后获取吧，正好有个可以重写的方法：

protected void onFinishInflate()

我们在这里要做的工作很简单就是获取他的第一个view。

2、重写onTouchEvent方法,根据滑动的距离来显示card，在ACTION_MOVE中分了两种情况：“由无到有”和“由有到无”。然后不断的调用自定义方法：setCurrent来改变效果，注释里面写的很清楚了。

这里我们在ACTION_UP通过判断当前显示的是不是已经过半，如果过半，抬起的时候就全显示出来，如果没过半，就还原默认。

总结：

1、想了想slidemenu应该用这种方式也可以实现吧。

2、刚开始接触View重写，肯定还有不完美的地方，希望在以后再看到现在的代码时，能使劲的鄙视一下自己。