微信首页下拉效果很炫酷，作为一个安卓开发人员忍不住就要尝试一下了~
效果图
实现的大致思路：使用recyclerview实现，将标题栏以上包括标题栏在内作为一个header添加到recyclerview上，下拉过程中动态改变header的高度即可。也就是说把拉出小程序页面实际上就是把header扩充到全屏高度，展示的是内容就是在header当中布局的内容。这里我们将标题栏纳入header中的一部分是比较关键的。
效果实现 ：
1.首先自定义view继承Recyclerview
public class WechatRecyclerView extends RecyclerView
2.然后添加一个header。我这里采用了BRAVH快速添加一个header，并将headerview传入我们自定义的RecyclerView
View view = LayoutInflater.from(this).inflate(R.layout.headview, null);
mAdapter.addHeaderView(view);
mRv.setHeadView(view);
public void setHeadView(View view) {
this.headView = view;
setHeaderHeight(HEIGHT_INITIAL);
// 省略部分代码
}
这里将header的初始高度设置为标题栏高度，即要让初始状态下 header只显示标题。
header的布局比较讲究。当header处于最大高度时，我们让标题栏处于屏幕的最底部，为了实现这个效果将标题栏布局写到headerview的底部。这里看一下headerview的布局，包含一个内部的recyclerview，layout_title是标题布局，将其布局到底部。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EDEDED"
>
<RelativeLayout
android:id="@+id/bglayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#322F44"
android:alpha="0"
>
<LinearLayout
android:id="@+id/layout_behand"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:clickable="true"
>
<TextView
android:layout_margin="20dp"
android:textSize="16sp"
android:text="小程序"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:textColor="#fff"
/>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:id="@+id/rv_inside"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:layout_above="@+id/layout_title"
android:id="@+id/layout_ball"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<View
android:id="@+id/ball3"
android:layout_gravity="center"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/bg_oval">
</View>
<View
android:id="@+id/ball2"
android:layout_gravity="center"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/bg_oval">
</View>
<View
android:id="@+id/ball1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/bg_oval"
android:layout_gravity="center">
</View>
</FrameLayout>
<LinearLayout
android:id="@+id/layout_title"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="60dp"
>
<TextView
android:layout_marginLeft="16dp"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#2D2D2D"
android:gravity="center_vertical"
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="微信"/>
</LinearLayout>
</RelativeLayout>
3.实现下拉头部高度变化肯定考虑重写一下RecyclerView的ontouchevent，ACTION_MOVE事件：
case MotionEvent.ACTION_MOVE:
if (status == STATUS_DOWN) { //header落下状态
if (getChildAt(0).getTop() < 0) { //判断在布局落下状态后是否又进行了滑动
isDrag = true;
}
setBalllayoutHeight(TOTALDISTANCE + (float) (getChildAt(0).getTop()));
return super.onTouchEvent(e);
}
//header非落下状态
if (!canScroll()) {
if (lastY == 0) {
lastY = dy;
return true;
} else {
if (dy - lastY > 0) { //下拉
if (headView.getHeight() < Util.getScreenHeight(getContext())) {
setHeaderHeightBy((int) ((dy - lastY) / DUMP)); //下拉过程添加一个阻尼效果
lastY = dy;
}
return true;
} else { //上拉
if (headView.getHeight() >= HEIGHT_INITIAL) {
setHeaderHeightBy((int) (dy - lastY));
lastY = dy;
return true;
}
}
}
}
break;
这里考虑两种情况：一个是header初始状态即非落下的状态。这时列表滚动到头部后进行下拉操作，header高度发生变化，这里先判断列表是否滚动至顶部：
private boolean canScroll() {
return canScrollVertically(-1);
}
然后判断如果下拉调用setHeaderHeightBy方法，调整header的高度，限制最大不能超过一屏高度。
public void setHeaderHeightBy(int dy) {
ViewGroup.LayoutParams layoutParams = headView.getLayoutParams();
layoutParams.height = layoutParams.height + dy > Util.getScreenHeight(getContext()) Util.getScreenHeight(getContext()) : layoutParams.height + dy;
headView.setLayoutParams(layoutParams);
}
header展开过程中发生上拉仍然调用setHeaderHeightBy方法，此时传入的值为负。
无论上拉还是下拉都要return true，即滑动事件完全由自己来处理，不交由系统处理。
第二种情况是 header到最大高度，即标题栏落至底部状态。这时进行上拉操作时，我们把事件交给系统处理，return super.onTouchEvent(e); 为什么这么做呢。观察一下效果图 ，注意这里的上拉操作其实是一个平推操作，即header上移过程没有高度的变化。所以使用系统的滑动机制是最合适的方式。
ACTION_MOVE事件之后是ACTION_UP：
case MotionEvent.ACTION_UP:
lastY = 0;
if (status == STATUS_NORMARL) {
if (headView.getHeight() < HEIGHT_SHOWBALL_END + HEIGHT_INITIAL) {
excuteAnnimation(headView.getHeight(), HEIGHT_INITIAL, false);
} else {
excuteAnnimation(headView.getHeight(), MAXHEIGHT, true);
}
} else if (status == STATUS_DOWN) {
if (findViewHolderForAdapterPosition(1) != null) { //position为1的位置可见时，即title不在最下部，弹回顶部
// findViewHolderForAdapterPosition(1).itemView.getLocationOnScreen(location);
int distance = TOTALDISTANCE + getChildAt(0).getTop();
excuteBackAnimation(distance);
} else { //如果title在最下部，并且之前没有进行滑动动作，回弹顶部，否则认为是人为又滑动到底部，此时不回弹
if (!isDrag) {
excuteAnnimation(headView.getHeight(), HEIGHT_INITIAL, true);
}
}
isDrag = false;
return true;
}
break;
ACTION_UP事件主要是执行下拉和回弹的动画效果。这里也是分两种情况。一个是header在初始状态下拉，判断是否到达临界点，执行回弹或者落下动画
private void excuteAnnimation(int height, int desheight, final boolean changeStatus) {
ValueAnimator animator;
animator = ValueAnimator.ofInt(height, desheight);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
setHeaderHeight((Integer) animation.getAnimatedValue());
}
})；
}
excuteAnnimation方法内也是调用setHeaderHeight不断设置新的header高度，重绘界面体现出滑动的效果。
第二种情况是header在落下状态回弹至顶部。这种情况对应ACTION_MOVE的第二种情况。这里也要平推上去，不同的是我们要自己来完成了。
private void excuteBackAnimation(final int distance) {
ValueAnimator animator = ValueAnimator.ofInt(distance, 0);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue();
if (lastValue == 0) {
lastValue = distance;
}
scrollBy(0, lastValue - value);
lastValue = value;
//省略部分代码
}
});
}
- 处理滑动事件冲突
当header处于落下状态时，我们需要滑动内部的recyclerview。此时滑动事件被外部recyclerview拦截。这里做一下判断，复写onInterceptTouchEvent，在header落下时不拦截事件。
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
if (status == STATUS_DOWN) {
return false;
}
return super.onInterceptTouchEvent(e);
}
这里也许会有疑问，我们底部的titlebar是需要拦截滑动事件进行拖拽和回弹，怎么解决呢。其实这里无需做处理，只要titlebar的布局控件默认不会消耗事件即ontouchevent默认返回false，事件自然会流向我们的父布局了，依然会回调父布局的ontouchevent。而不需要拦截事件的区域设置clickable属性为true，事件就不会流向父布局了。
5 更多动画效果实现
滑动过程中涉及的动画比较多，我也是经过反复调试才达到一个比较理想的状态。这里不再一一阐述了。 更多细节可以看下源码。
最后
这个demo只是大致还原了新版微信首页的效果，但欠缺很多细节的处理，不够完美，主要是给大家提供一个思路吧。
再最后
S9 ig加油！！！
网友评论