Android ScrollView向上滑动 顶部显现控件并悬浮

场景:在一些界面最上面会放置一些特定的显眼的大入口按钮,当界面想上滑动的时候,大入口会向上滑消失在屏幕上方,这时在顶部悬浮显现出小的入口按钮,并固定在屏幕顶部。类似于支付宝的首页顶部。
在这里插入图片描述
实现:xml布局中有两部分,一是ScrollView包裹的部分,二是向上滑动时在顶部逐渐浮现出来的小按钮部分。通过滚动ScrollView小按钮部分慢慢显现直至完全遮住大按钮。当ScrollView向下滑动时,顶部小按钮慢慢消失,并显露出大按钮。
API23之后ScrollView实现了滚动监听setOnScrollChangeListener,但个人认为一是在里面实现一些效果坐标值一有变动立马计算,计算量太大,不划算(可以用handler等计时器解决)。二是不支持API23以下。所以决定重写ScrollView,利用重写onTouchEvent获取Y方向上的坐标,通过自定义回调函数实现Y坐标值的监听,如图。
在这里插入图片描述

一、xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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.hjqjl.testdemo.widget.MyScrollView
        android:id="@+id/scrollView_scrollview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/ll_scrollview_title"
                android:layout_width="match_parent"
                android:layout_height="150dp">

                <Button
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="111111" />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="222222" />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="333333" />

            </LinearLayout>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="aaaaaaaaaaaaaaaaaaaaaaaaa"
                android:textSize="100sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="bbbbbbbbbbbbbbbbbbb"
                android:textSize="80sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="cccccccccccccccccccccccccccc"
                android:textSize="70sp" />
        </LinearLayout>
    </com.hjqjl.testdemo.widget.MyScrollView>

    <LinearLayout
        android:id="@+id/ll_scrollview_small_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center_vertical"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/scrollView_scrollview">

        <Button
            android:id="@+id/iv_home_small_barcode"
            android:layout_width="75dp"
            android:layout_height="55dp"
            android:layout_marginStart="30dp"
            android:text="111" />

        <Button
            android:id="@+id/iv_home_small_scancode"
            android:layout_width="75dp"
            android:layout_height="55dp"
            android:layout_marginStart="30dp"
            android:text="222" />

        <Button
            android:id="@+id/iv_home_small_quan"
            android:layout_width="75dp"
            android:layout_height="55dp"
            android:layout_marginStart="30dp"
            android:text="333" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

二、自定义MyScrollView实现对Y坐标的监听。

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

import androidx.annotation.NonNull;

/*
 * ScrollView并没有实现滚动监听,所以我们必须自行实现对ScrollView的监听,
 * 我们很自然的想到在onTouchEvent()方法中实现对滚动Y轴进行监听
 * ScrollView的滚动Y值进行监听
 */
public class MyScrollView extends ScrollView {
    private OnScrollListener onScrollListener;
    /**
     * 主要是用在用户手指离开MyScrollView,MyScrollView还在继续滑动,我们用来保存Y的距离,然后做比较
     */
    private int lastScrollY;

    /**
     * 松开手指后MyScrollView停止的位置
     */
    private int StopY;

    private boolean scrollStop = false;//手指离开屏幕,并且屏幕停止滑动

    //必须有三个构造器,不然报错
    public MyScrollView(Context context) {
        super(context, null);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * 设置滚动接口
     *
     * @param onScrollListener 滚动回调接口
     */
    public void setOnScrollListener(OnScrollListener onScrollListener) {
        this.onScrollListener = onScrollListener;
    }
    /**
     * 滚动的回调接口
     */
    public interface OnScrollListener {
        /**
         * 回调方法, 返回MyScrollView滑动的Y方向距离
         */
        void onScroll(int scrollY);
    }

    /**
     * 用于用户手指离开MyScrollView的时候获取MyScrollView滚动的Y距离,然后回调给onScroll方法中
     */
    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(@NonNull Message msg) {
            int scrollY = MyScrollView.this.getScrollY();

            //此时的距离和记录下的距离不相等,在隔5毫秒给handler发送消息
            if (lastScrollY != scrollY) {
                lastScrollY = scrollY;
                handler.sendMessageDelayed(handler.obtainMessage(), 5);
            } else {
                scrollStop = true;
                StopY = scrollY;
            }
            if (onScrollListener != null) {
                onScrollListener.onScroll(scrollY);
            }
            return false;
        }
    });

    /**
     * 重写onTouchEvent, 当用户的手在MyScrollView上面的时候,
     * 直接将MyScrollView滑动的Y方向距离回调给onScroll方法中,当用户抬起手的时候,
     * MyScrollView可能还在滑动,所以当用户抬起手我们隔5毫秒给handler发送消息,在handler处理
     * MyScrollView滑动的距离
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (onScrollListener != null) {
            onScrollListener.onScroll(lastScrollY = this.getScrollY());
        }
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                handler.sendMessageDelayed(handler.obtainMessage(), 20);
                break;
        }
        return super.onTouchEvent(ev);
    }

    public void performScroll() {
        onScrollListener.onScroll(0);
//        handler.sendMessageDelayed(handler.obtainMessage(), 20);
    }

    public void setScrollStop(boolean scrollStop) {
        this.scrollStop = scrollStop;
    }

    public boolean isScrollStop() {
        return scrollStop;
    }

    public int getStopY() {
        return StopY;
    }
}

三、在Activity中实现对ScrollView的滚动监听,并实现相应的效果。

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;

import com.hjqjl.testdemo.R;
import com.hjqjl.testdemo.widget.MyScrollView;

public class ScrollViewActivity extends AppCompatActivity {
    private MyScrollView scrollView;
    private LinearLayout llSVTitle;
    private LinearLayout llSVSmallTitle;
    private int mTitleHeight;
    private int mSmallTitleHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrollview);
        scrollView = findViewById(R.id.scrollView_scrollview);
        llSVTitle = findViewById(R.id.ll_scrollview_title);
        llSVSmallTitle = findViewById(R.id.ll_scrollview_small_title);

        scrollView.setOnScrollListener(new MyScrollView.OnScrollListener() {
            @Override
            public void onScroll(int scrollY) {
                mTitleHeight = llSVTitle.getHeight();
                mSmallTitleHeight = llSVSmallTitle.getHeight();
                float cha = mTitleHeight - mSmallTitleHeight;//为正数

                //自动跳转到指定位置
                if (scrollView.isScrollStop()) {
                    scrollView.setScrollStop(false);
                    if (scrollView.getStopY() < (cha / 2)) {//手离开触摸屏的时候,当悬浮小按钮位于大按钮中线上部的时候,ScrollView滚动到大按钮的顶部
                        scrollView.smoothScrollTo(0, 0);
                        scrollY = 0;
                    } else if (scrollView.getStopY() < cha) {//手离开触摸屏的时候,当悬浮小按钮位于大按钮中线下部的时候,ScrollView滚动到大按钮的底部
                        scrollView.smoothScrollTo(0, (int) cha);
                        scrollY = (int) cha;
                    }
                }

                if (scrollY == 0) {
                    llSVSmallTitle.setVisibility(View.GONE);
                } else if (scrollY > 0) {
                    llSVSmallTitle.setVisibility(View.VISIBLE);
                }

                //设置透明度
                if (scrollY <= cha) {
                    float mAlpha = scrollY / cha;
                    if (mAlpha < 0) {
                        mAlpha = 0;
                    } else if (mAlpha > 1) {
                        mAlpha = 1;
                    }
                    llSVSmallTitle.setAlpha(mAlpha);
                } else {
                    llSVSmallTitle.setAlpha(1);
                }
            }
        });
    }
}

源码地址:https://gitee.com/hjqjl/WhDemo

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值