场景:在一些界面最上面会放置一些特定的显眼的大入口按钮,当界面想上滑动的时候,大入口会向上滑消失在屏幕上方,这时在顶部悬浮显现出小的入口按钮,并固定在屏幕顶部。类似于支付宝的首页顶部。
实现: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);
}
}
});
}
}