android模仿UC首页天气效果
android模仿UC首页天气效果
亓斌哥哥 发表于3年前
android模仿UC首页天气效果
  • 发表于 3年前
  • 阅读 488
  • 收藏 3
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 也只是仿了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重写,肯定还有不完美的地方,希望在以后再看到现在的代码时,能使劲的鄙视一下自己。

共有 人打赏支持
亓斌哥哥
粉丝 29
博文 34
码字总数 12346
作品 13
×
亓斌哥哥
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: