Android实现京东上滑效果

2024-04-02 19:04:59 700人浏览独家记忆

摘要

本文实例为大家分享了Android实现京东上滑效果的具体代码，供大家参考，具体内容如下前言：现在很多app首页的结构都有头部广告，上滑固定toolbar及侧滑广告位等展示，典型的

本文实例为大家分享了Android实现京东上滑效果的具体代码，供大家参考，具体内容如下

前言：

现在很多app首页的结构都有头部广告，上滑固定toolbar及侧滑广告位等展示，典型的比如招商银行app，支付宝、哈罗单车、京东、苏宁金融也有类似的效果。具体如下，左侧为有广告位存在的情况，右侧无顶部广告位的样式：

效果说明：头部广告一般在节假日有活动的时候展示，页面上滑会有固定标题栏展示，靠底部右侧有一个小的广告位，滑动主屏幕时，广告位会向右侧收起，屏幕不滚动时，广告位显示。本文旨在为实现这种效果提供一种方式，欢迎有其他想法的小伙伴评论交流，接下来将分三块分别实现顶部广告位，滑动固定toolbar及侧滑广告位效果。

顶部广告位：

分析：有广告位图片和没广告位图片的区别在于下方白色内容区域在图片下方还是在顶部4个功能项的下方，一种方式：根据是否有广告位动态调整margin高度；方式二：使用约束布局，根据情况改变白色区域内容相对谁来布局

实现：

这里我们使用第二种方式实现：

外层父布局为ConstraintLayout，里面内容包含三部分：

1. 底部背景ImageView控件A，有图片时设置src，无图时设置background；

2. 四个功能选项部分B，即无图时白色区域的约束对象；

3. 白色内容区域C，无图时约束对象为B，有图时约束对象为A；

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
 
<ImageView
    android:id="@+id/iv_bg_header"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@drawable/shape_gradient_yellow"
    android:contentDescription="@null"
    android:scaleType="fitXY"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
 
<LinearLayout
    android:id="@+id/ll_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="12dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="12dp"
    android:clickable="true"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
 
    <EditText
        android:layout_width="0dp"
        android:layout_height="32dp"
        android:layout_weight="1"
        android:background="@drawable/shape_edit_text_stroke_white"
        android:drawableStart="@drawable/vector_search"
        android:drawablePadding="4dp"
        android:drawableTint="@color/color_icon"
        android:hint="请输入内容"
        android:importantForAutofill="no"
        android:paddingStart="8dp"
        android:textColorHint="@color/color_icon"
        android:textSize="14sp"
        tools:ignore="TextFields" />
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:contentDescription="@null"
        android:src="@drawable/vector_custom_service"
        android:tint="@color/color_icon" />
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:contentDescription="@null"
        android:src="@drawable/vector_message"
        android:tint="@color/color_icon" />
 
</LinearLayout>
 
<LinearLayout
    android:id="@+id/ll_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:orientation="horizontal"
    android:paddingTop="20dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/ll_search">
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/vector_code"
        android:drawablePadding="8dp"
        android:gravity="center_horizontal"
        android:text="收/付款"
        android:textColor="@color/color_white" />
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/vector_shopping"
        android:drawablePadding="8dp"
        android:gravity="center_horizontal"
        android:text="购物"
        android:textColor="@color/color_white" />
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/vector_setting"
        android:drawablePadding="8dp"
        android:gravity="center_horizontal"
        android:text="设置"
        android:textColor="@color/color_white" />
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/vector_function"
        android:drawablePadding="8dp"
        android:gravity="center_horizontal"
        android:text="全部功能"
        android:textColor="@color/color_white" />
 
</LinearLayout>
 
<include
    android:id="@+id/ll_services"
    layout="@layout/layout_services"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/ll_header" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

展示广告位的情况下

ivBgHeader.setBackgroundResource(0);
ivBgHeader.setImageResource(R.mipmap.ic_ad_banner);
ivBgHeader.setOnClickListener(v -> Toast.makeText(getActivity(), "拍一拍", Toast.LENGTH_SHORT).show());
ConstraintSet c = new ConstraintSet();
c.clone(clHeader);
c.connect(llServices.getId(), ConstraintSet.TOP, ivBgHeader.getId(), ConstraintSet.BOTTOM, Utils.dip2pixel(getActivity(), 20));
c.applyTo(clHeader);

不展示广告位情况下：

ivBgHeader.setBackgroundResource(R.drawable.shape_gradient_yellow);
ivBgHeader.setImageResource(0);
ivBgHeader.setOnClickListener(null);
ConstraintSet c = new ConstraintSet();
c.clone(clHeader);
c.connect(llServices.getId(), ConstraintSet.TOP, llHeader.getId(), ConstraintSet.BOTTOM, Utils.dip2pixel(getActivity(), 20));
c.applyTo(clHeader);

侧滑广告位：

分析：首页的滑动布局为NestedScrollView控件实现的，NestedScrollView并没有像RecyclerView一样提供滑动状态的监听，所以关于滑动状态需要我们去判断，更准确可以说是监听状态的改变结果，而不是监听状态的过程，状态结果分两种：静止和滑动。NestedScrollView提供了onScrollChanged回调方法，在内部View滑动时会走到这个回调，所以走这个回调肯定是滑动中状态，如何判断静止状态呢？通常是使用定时器或是handler发送消息的方式去监听。

实现：

自定义View继承NestedScrollView，在内部将状态提供给外部去使用

public class ObservableScrollView extends NestedScrollView {
 
    public static final int STATE_IDLE = 1;
    public static final int STATE_SCROLL = 2;
 
    public int currentState = STATE_IDLE;
    private boolean isOnActionDown = false;
 
    private ScrollStateChangeListener scrollStateChangeListener;
    private Handler mHandler;
    private static final int MSG_IS_SCROLL = 1;
 
    public ObservableScrollView(@NonNull Context context) {
        this(context, null);
    }
 
    public ObservableScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public ObservableScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mHandler = new Handler(Looper.getMainLooper()) {
            @Override
            public void handleMessage(@NonNull Message msg) {
                super.handleMessage(msg);
                if (currentState == STATE_SCROLL) {
                    currentState = STATE_IDLE;
                    if (null != scrollStateChangeListener) {
                        scrollStateChangeListener.onScrollChange(ObservableScrollView.this, currentState);
                    }
                }
            }
        };
    }
 
    @Override
    protected void onScrollChanged(int x, int y, int oldX, int oldY) {
        super.onScrollChanged(x, y, oldX, oldY);
        if (isOnActionDown)
            return;
        mHandler.removeCallbacksAndMessages(null);
        mHandler.sendEmptyMessageDelayed(MSG_IS_SCROLL, 500);
        setStatus();
    }
 
    private void setStatus() {
        if (currentState == STATE_IDLE) {
            currentState = STATE_SCROLL;
            if (null != scrollStateChangeListener) {
                scrollStateChangeListener.onScrollChange(this, currentState);
            }
        }
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                isOnActionDown = false;
                mHandler.sendEmptyMessageDelayed(MSG_IS_SCROLL, 500);
                break;
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                mHandler.removeCallbacksAndMessages(null);
                setStatus();
                isOnActionDown = true;
                break;
        }
        return super.onTouchEvent(ev);
    }
 
    public void addOnScrollChangeListener(ScrollStateChangeListener scrollStateChangeListener) {
        this.scrollStateChangeListener = scrollStateChangeListener;
    }
 
    public interface ScrollStateChangeListener {
        void onScrollChange(ObservableScrollView view, int newState);
    }
 
    public void onDestroy() {
        if (null != mHandler) {
            mHandler.removeCallbacksAndMessages(null);
        }
    }
}

外部使用：

scrollView.addOnScrollChangeListener(new ObservableScrollView.ScrollStateChangeListener() {
            @Override
            public void onScrollChange(ObservableScrollView view, int newState) {
                if (newState == STATE_IDLE) {
                    ivSideScroll.animate().translationX(0);
                } else {
                    ivSideScroll.animate().translationX(200);
                }
            }
        });

固定顶部效果：

分析：监听scrollView滑动变化量，分别在上滑和下滑时做固定内容部分的透明度值变化

实现：

scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // 向上滑动，超过100像素则透明度开始由0 -> 1 
                if (scrollY - oldScrollY > 0) {
                    float alpha = Math.min(1, (scrollY - 100) / 50f);
                    llFixedHeader.setAlpha(alpha);
                }
 
                // 向下滑动，小于100像素则透明度开始 1 -> 0
                if (scrollY - oldScrollY < 0) {
                    float alpha = Math.max(0, (scrollY - 100) / 50f);
                    llFixedHeader.setAlpha(alpha);
                }
            }
        });

最终实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Android实现京东上滑效果

本文链接: https://www.lsjlt.com/news/152219.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Android实现京东上滑效果

本文实例为大家分享了Android实现京东上滑效果的具体代码，供大家参考，具体内容如下前言：现在很多app首页的结构都有头部广告，上滑固定toolbar及侧滑广告位等展示，典型的...

99+

2022-11-13
Android实现京东首页效果

本文实例为大家分享了Android实现京东首页效果的具体代码，供大家参考，具体内容如下 1.效果图： 2.布局源码链接 <?xml version="1.0" ...

99+

2022-11-12
Android TabLayout实现京东详情效果

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Lib...

99+

2022-06-06

tablayout Android
Android如何实现京东首页效果

这篇文章主要介绍了Android如何实现京东首页效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。本文实例为大家分享了Android实现京东首页效果的具体代码，供大家参考，具...

99+

2023-06-15
JavaScript实现京东秒杀效果

本文实例为大家分享了JavaScript实现京东秒杀效果的具体代码，供大家参考，具体内容如下首先先利用html和css搭出架子： * { ...

99+

2022-11-12
Android仿京东首页画轴效果

记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关操作,刚开始看到这个效果,想法是动态的去改...

99+

2022-06-06

首页 Android
JS实现京东放大镜效果

本文实例为大家分享了JS实现京东放大镜效果的具体代码，供大家参考，具体内容如下需要实现的效果图如下： ①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个...

99+

2022-11-13
Android 仿京东侧滑筛选实例代码

简单介绍这个demo写的是仿京东的侧滑筛选页面，点击进入筛选后进入二级筛选，两次侧滑的筛选，还包括ListView+CheckBox滑动冲突，ListView+ GridV...

99+

2022-06-06

Android
android小程序上滑下滑效果怎么实现

今天小编给大家分享一下android小程序上滑下滑效果怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先看gif图：...

99+

2023-06-29
Android仿京东金融首页头像效果

1.介绍看下效果图，gif录的有些卡顿，在真机上运行效果很好。 2.实现很有意思的一个效果，原理其实很简单，就是通过监听ScrollView在Y轴的滑动距离，然后在代码中...

99+

2022-06-06

首页金融 Android
Android仿京东首页轮播文字效果

京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果实现思路上图只是一个大概的思...

99+

2022-06-06

首页轮播 Android
Android仿京东、天猫下拉刷新效果

说到下拉刷新，相信大家都不陌生，现在基本上每个项目都会用到。我们公司的项目一直都是使用SwipeRefreshLayout，官方的Material Design风格，好用少Bug。现在下拉刷新大概有下面几种实现方式：一种是直接包在ListV...

99+

2023-05-31

android 下拉刷新 roi
怎么用JavaScript实现京东秒杀效果

本篇内容介绍了“怎么用JavaScript实现京东秒杀效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！首先先利用html和cs...

99+

2023-06-25
利用JavaScript实现仿京东放大镜效果

功能实现 1、鼠标经过小图片盒子，黄色的遮挡层和大图片显示，离开时就隐藏2个盒子功能 2、黄色遮挡层跟着鼠标走把鼠标的坐标给盒子，不断地进行赋值操作把鼠标地坐标给遮挡层不合适，因...

99+

2022-11-13
View Controller Transition实现京东加购物车效果

这篇文章中我们主要来叙述一下上述动画效果的实现方案。主要涉及 View Controller 转场动画的知识。我搭建了个人站点，那里有更多内容，请多多指教。点我哦！！！Presenting a View Controller显示一个 Vie...

99+

2023-05-31

android view controller
Android实现平滑翻动效果

本文实例为大家分享了Android实现平滑翻动效果的具体代码，供大家参考，具体内容如下效果 1.activity加implements implements GestureD...

99+

2022-11-12
Android中使用TextView实现高仿京东淘宝各种倒计时效果

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东、淘宝、唯品会等各种电商APP的活动倒计时。最近公司一直加班也没来得及时间去整理，今天难得休息想把这个分享给大家，...

99+

2022-06-06

倒计时淘宝 Android
如何利用JavaScript实现仿京东放大镜效果

这篇文章主要介绍如何利用JavaScript实现仿京东放大镜效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！功能实现鼠标经过小图片盒子，黄色的遮挡层和大图片显示，离开时就隐藏2个盒子功能黄色遮挡层跟着鼠标走把鼠标的...

99+

2023-06-29
js如何模仿京东快报向上滚动效果

这篇文章给大家分享的是有关js如何模仿京东快报向上滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实例如下：<!doctype html> <h...

99+

2022-10-19
Android中Fab(FloatingActionButton)实现上下滑动的渐变效果

前言 Promoted Actions是指一种操作按钮，它不是放在actionbar中，而是直接在可见的UI布局中（当然这里的UI指的是setContentView所管辖的范围...

99+

2022-06-06

渐变效果 fab Android