Android仿Boss直聘我的界面滑动效果-技术圈

最近在使用boss投简历的时候，看到boss的我的界面蛮有意思的，就想如何去实现它，可能是职业病吧，所以就打算仿一下。先看下仿的效果。

其实我们拿到这个效果的时候，看到滑动，折叠等效果就应该想到了Material design，那么我们现在就可以基本的布局下。

activity_main.xml布局

    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">
            android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorAccent"        app:layout_behavior="com.zwl.mybossdemo.AppBarLayoutOverScrollViewBehavior">
                    android:id="@+id/mCollapsingToolbarLayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/colorAccent"            app:layout_scrollFlags="scroll|exitUntilCollapsed">
                            android:id="@+id/topview"                layout="@layout/layout_top_view"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.9" />

        
    

    

            android:id="@+id/name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="30dp"        android:layout_marginTop="30dp"        android:elevation="5dp"        android:gravity="center"        android:text="大白"        android:textColor="@android:color/white"        android:textSize="28sp"        android:textStyle="bold"        android:typeface="monospace" />            android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:alpha="0"        android:background="@color/colorAccent"        app:layout_collapseMode="pin" />

layout_top_view.xml

   xmlns:app="http://schemas.android.com/apk/res-auto"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:background="@color/colorAccent"   android:orientation="vertical"   android:paddingTop="40dp"   app:layout_collapseMode="parallax">

          android:id="@+id/top_view_id"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:layout_above="@+id/top_view">

                  android:id="@+id/jianli"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_below="@+id/name"           android:layout_marginLeft="30dp"           android:paddingTop="35dp"           android:paddingBottom="15dp"           android:text="我的在线简历 "           android:textColor="@android:color/white" />
                  android:id="@+id/me_icon"           android:layout_width="60dp"           android:layout_height="60dp"           android:layout_alignParentRight="true"           android:layout_marginRight="30dp"           android:layout_marginBottom="10dp"           android:src="@drawable/boss_avatar_7" />   
          android:id="@+id/top_view"       android:layout_width="match_parent"       android:layout_height="80dp"       android:layout_alignParentBottom="true"       android:gravity="center_vertical"       android:orientation="horizontal"       android:padding="15dp">
                  android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="1"           android:gravity="center"           android:text="301\n沟通过"           android:textColor="@android:color/white"           android:textSize="16sp" />
                  android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="1"           android:gravity="center"           android:text="301\n沟通过"           android:textColor="@android:color/white"           android:textSize="16sp" />
                  android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="1"           android:gravity="center"           android:text="301\n沟通过"           android:textColor="@android:color/white"           android:textSize="16sp" />
                  android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="1"           android:gravity="center"           android:text="301\n沟通过"           android:textColor="@android:color/white"           android:textSize="16sp" />
   

          android:id="@+id/cardview"       android:layout_width="match_parent"       android:layout_height="120dp"       android:layout_gravity="center_horizontal"       android:gravity="center_horizontal|bottom">
                  android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:src="@drawable/boss_card_bg" />

layout_content.xml 这里就是一个图片截取Boss的

   xmlns:app="http://schemas.android.com/apk/res-auto"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:background="@android:color/white"   android:clickable="true"   android:scrollbars="none"   app:layout_behavior="@string/appbar_scrolling_view_behavior">
          android:layout_width="match_parent"       android:layout_height="wrap_content"       android:src="@drawable/boss_user_bottom" />

上面的activity_main.xml中可以看到我自定义了一个AppBarLayout的behavior，AppBarLayoutOverScrollViewBehavior其实所有的效果都是这这里去实现的。

AppBarLayoutOverScrollViewBehavior

public class AppBarLayoutOverScrollViewBehavior extends AppBarLayout.Behavior {   private int mAppBarHeight;   private View mCardView;   private boolean isAnimate;   private float mTotalDy;   private float mLastScale;   private int mLastBottom;   private int mCardViewHeight;   private int mLimitHeight;   private View mToolBar;   private float scaleValue = 2f / 3;// 显示卡片的三分之一 所以抛出三分之二   private View mNameTitle;
   public AppBarLayoutOverScrollViewBehavior() {   }
   public AppBarLayoutOverScrollViewBehavior(Context context, AttributeSet attrs) {       super(context, attrs);   }

   @Override   public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {       boolean handled = super.onLayoutChild(parent, abl, layoutDirection);       if (null == mCardView) {           mCardView = parent.findViewById(R.id.cardview);       }       if (null == mToolBar) {           mToolBar = parent.findViewById(R.id.toolbar);       }       if (null == mNameTitle) {           mNameTitle = parent.findViewById(R.id.name);       }
       init(abl);       return handled;   }

   @Override   public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY) {       if (velocityY > 100) {           isAnimate = false;       }       return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);   }

   @Override   public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target, int type) {       super.onStopNestedScroll(coordinatorLayout, abl, target, type);       //恢复位置       if (abl.getBottom() > mLimitHeight) {           recovery(abl);       }   }

   @Override   public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes, int type) {       //开始滚动了 就动画归位       isAnimate = true;       return super.onStartNestedScroll(parent, child, directTargetChild, target, nestedScrollAxes, type);   }

   @Override   public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) {       if (mCardView != null && ((dy <= 0 && child.getBottom() >= mLimitHeight) || (dy > 0 && child.getBottom() > mLimitHeight))) {           scrollY(child, target, dy);       } else {           setViewAlpha(child, dy);           super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);       }   }

   /**    * 初始化数据    *    * @param appBarLayout    */   private void init(final AppBarLayout appBarLayout) {       appBarLayout.setClipChildren(false);       //整个AppbarLayout高度       mAppBarHeight = appBarLayout.getMeasuredHeight();       //卡片的高度       mCardViewHeight = mCardView.getMeasuredHeight();       //折叠正常的高度       mLimitHeight = mAppBarHeight - (int) (mCardViewHeight * scaleValue);
       //默认1s折叠       appBarLayout.postDelayed(new Runnable() {           @Override           public void run() {               ValueAnimator anim = ValueAnimator.ofFloat(0, 1f).setDuration(200);               anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                   @Override                   public void onAnimationUpdate(ValueAnimator animation) {                       float value = (float) animation.getAnimatedValue();                       appBarLayout.setBottom((int) (mAppBarHeight - value * mCardViewHeight * scaleValue));                   }               });               anim.start();           }       }, 1000);
   }

   /**    * 混动    *    * @param child    * @param target    * @param dy    */   private void scrollY(AppBarLayout child, View target, int dy) {       mTotalDy += -dy;       mTotalDy = Math.min(mTotalDy, mLimitHeight);       mLastScale = Math.max(1f, 1f + (mTotalDy / mLimitHeight));       mLastBottom = mLimitHeight + (int) (mCardViewHeight * scaleValue * (mLastScale - 1));       child.setBottom(mLastBottom);       target.setScrollY(0);   }

   /**    * 根据滑动设置 toolbar  名字显示效果    *    * @param target    * @param dy    */   private void setViewAlpha(View target, int dy) {       float percent = Math.abs(target.getY() / mLimitHeight);       if (percent >= 1) {           percent = 1f;       }       //设置toolbar的透明度       mToolBar.setAlpha(percent);
       //设置名字缩放       mNameTitle.setScaleX(Math.max(0.8f, 1 - percent));       mNameTitle.setScaleY(Math.max(0.8f, 1 - percent));
       //设置名字平移       int offset = mNameTitle.getTop() - mToolBar.getTop();       mNameTitle.setTranslationY(-offset * percent);   }
   /**    * 恢复位置    *    * @param abl    */   private void recovery(final AppBarLayout abl) {       if (mTotalDy >= 0) {           mTotalDy = 0;           if (isAnimate) {               ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1f).setDuration(200);               valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                   @Override                   public void onAnimationUpdate(ValueAnimator animation) {                       float value = (float) animation.getAnimatedValue();                       int offsetY = abl.getBottom() - mLimitHeight;                       abl.setBottom((int) (abl.getBottom() - (value * offsetY)));                       abl.setScrollY(0);                   }               });               valueAnimator.start();           } else {               abl.setBottom(mLimitHeight);               abl.setScrollY(0);           }       }   }}

其实代码很简单，所以就不在讲解了，主要就是通过监听滑动距离来设置控件的属性。

源码地址：

https://github.com/dalong982242260/MyBossDemo

到这里就结束啦。