标题和状态栏滑动渐变(1)-Android

1,691 阅读2分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。

前言

滑动1.gif 以上的效果在我们日常使用的App中十分常见,其实这种效果看一眼大概就能有一个模模糊糊的思路,一般都是计算一个滑动距离,然后根据距离算出alpha值.

Code

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".big.BigActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:text="黑字"
        android:textColor="@color/black"
        android:textSize="18dp"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:background="@color/teal_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv" />
</androidx.constraintlayout.widget.ConstraintLayout>

Activity

public class BigActivity extends AppCompatActivity {

    private TextView mTv;
    private RecyclerView mRv;
    private int mCurrentfirstVisibleItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_big);
        initView();
    }

    private void initView() {

        mTv = findViewById(R.id.tv);
        mRv = findViewById(R.id.rv);

        List<String> list = new ArrayList<>();
        for (int i = 0; i < 40; i++) {
            list.add("");
        }
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(new TestAdapter(this, list));
    }

}

Adapter我就不贴了,不然这篇文章就全是水了

首先我们要知道我们滑动的一个距离,按照常理来说recyclerview应该有滑动监听,我们先按照阳间的命名来搜下试试吧

image.png

恩,不戳,就用第一个吧,别的也没法子用,第二个过时,第三个删除,第四个清除,第五个有个change,估计是判断滑动状态的

有两个回调 onScrolled,onScrollStateChanged,可以选择性的重写,不一定要全部,我这边就选择onScrolled

@Override
public void onScrolled(@NonNull @NotNull RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    Log.e("TAG", "onScrolled: "+dx+"  "+dy);
}

我们可以看到有两个看样子就是重点的参数,一个是dx,一个是dy,打印一下日志看看

滑动2.gif

每次滑动都会回调,上滑是相对整数,下滑是相对负数,嗯,可以,这边我们定义一个参数+=一下就好了.

mRv.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(@NonNull @NotNull RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
    }

    @Override
    public void onScrolled(@NonNull @NotNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        test += dy;
        Log.e("TAG", "onScrolled: "+ test);
    }
});

打印下日志

滑动3.gif

效果很棒,我们目前成功获得了recyclerview的滑动距离数据,接下来我将在下一个帖子展示如何利用滑动距离对标题栏和状态栏进行渐变