仿Boss直聘我的界面滑动效果

好久没有写博客了,最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下。先看下仿的效果。

  

 

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

activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.appbar.AppBarLayout
        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">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/mCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <include
                android:id="@+id/topview"
                layout="@layout/layout_top_view"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <include layout="@layout/layout_content" />
    <TextView
        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" />
    <androidx.appcompat.widget.Toolbar
        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" />
</androidx.coordinatorlayout.widget.CoordinatorLayout> 

layout_top_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">
    <RelativeLayout
        android:id="@+id/top_view_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/top_view">
        <TextView
            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" />
        <de.hdodenhof.circleimageview.CircleImageView
            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" />
    </RelativeLayout>
    <LinearLayout
        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">
        <TextView
            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" />
        <TextView
            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" />
        <TextView
            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" />
        <TextView
            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" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/cardview"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal|bottom">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/boss_card_bg" />
    </LinearLayout>
</LinearLayout>

 

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/boss_user_bottom" />

</androidx.core.widget.NestedScrollView>

 

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

AppBarLayoutOverScrollViewBehavior

package com.zwl.mybossdemo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import com.google.android.material.appbar.AppBarLayout;

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 ValueAnimator recoveryValueAnimator;
    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) {
                recoveryValueAnimator = ValueAnimator.ofFloat(0, 1f).setDuration(200);
                recoveryValueAnimator.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);
                    }
                });
                recoveryValueAnimator.start();
            } else {
                abl.setBottom(mLimitHeight);
                abl.setScrollY(0);
            }
        }
    }


}

其实代码很简单 ,所以就不在讲解了,主要就是通过监听滑动距离来设置空间的属性,这里附上github链接,可以直接下再看下。

github项目

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您可以使用flutter_boss这个项目作为参考,它是一个基于Flutter的模仿Boss直聘的应用程序。 如果您想实现在Vue项目的移动端页面上加上左右滑动效果,您可以使用vue-touch库来实现。vue-touch是一个用于Vue.js的手势库,它可以方便地实现各种手势操作,包括左右滑动效果。您可以在您的Vue项目中引入vue-touch库,并按照它的文档说明来使用。 请注意,根据您引用的内容,滑动效果是通过模仿实现的,即使用虚假函数来模拟函数的调用,而不是真正执行相关操作。 希望这些信息对您有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [用大前端技术实现的一款仿Boss直聘app(已开源)](https://blog.csdn.net/hejjunlin/article/details/90310767)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [工作中使用到的单词(软件开发)](https://blog.csdn.net/sxzlc/article/details/104872052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue实现移动端左右滑动效果的方法](https://download.csdn.net/download/weixin_38720402/12949404)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值