CoordinatorLayout、AppBarLayout、RecyclerView上拉模糊效果

CoordinatorLayout、AppBarLayout、RecyclerView上拉模糊效果，顶部图片列表模糊，名称固定在顶部



RvDemo13Fragment 类：

package com.example.androidkotlindemo2.recyclerview.demo13

import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.marginTop
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.OnScrollListener
import com.example.androidkotlindemo2.MyApp
import com.example.androidkotlindemo2.R
import com.example.androidkotlindemo2.bean.Item8Bean
import com.example.androidkotlindemo2.bean.Item8HeaderBean
import com.example.androidkotlindemo2.databinding.RecyclerViewDemo12MainBinding
import com.example.androidkotlindemo2.databinding.RecyclerViewDemo13MainBinding
import com.example.androidkotlindemo2.databinding.RecyclerViewDemo8MainBinding
import com.example.androidkotlindemo2.recyclerview.demo12.RVDemo12Adapter
import com.example.androidkotlindemo2.recyclerview.demo12.RvDemo12Fragment
import com.example.androidkotlindemo2.recyclerview.demo8.RvDemo8Fragment
import com.example.androidkotlindemo2.utils.LogUtils
import com.google.android.material.appbar.AppBarLayout

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2024/6/1 10:43
 * Description : CoordinatorLayout、AppBarLayout、RecyclerView上拉模糊效果
 * AppBarLayout的七种ScrollFlags参考：https://blog.csdn.net/willway_wang/article/details/96720903
 */
class RvDemo13Fragment : Fragment() {

    private lateinit var binding : RecyclerViewDemo13MainBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = RecyclerViewDemo13MainBinding.inflate(inflater, container, false)
        return binding.root
    }


    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        var headerAdapter = RVDemo13HeaderAdapter(R.layout.recycler_view13_header_item, getDataList())
        var layoutManager = GridLayoutManager(MyApp.myApp.baseContext, 2, GridLayoutManager.VERTICAL, false)
        binding.rv13HeaderRecyclerView?.let {
            it.adapter = headerAdapter
            it.layoutManager = layoutManager
        }


        var data = getData()
        var adapter = RVDemo13Adapter(R.layout.recycler_view13_item, data)
        var linearLayoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.VERTICAL, false)
        binding.rvDemo13Main?.let {
            it.layoutManager = linearLayoutManager
            it.adapter = adapter


        }

        binding.rvDemo13Main.let {
            it.addOnScrollListener(object : OnScrollListener(){
                override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                    super.onScrollStateChanged(recyclerView, newState)
                }
                override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                    super.onScrolled(recyclerView, dx, dy)
                    //从上往下滑动，设置透明度可见
                    if(dy < 0){
                        binding.rv13AppbarLayout.alpha = 1f
                    }
                }
            })
        }

        binding.rv13AppbarLayout.addOnOffsetChangedListener { appBarLayout, verticalOffset ->
            var headerHeight = appBarLayout.height.toFloat()
            var reverseHeaderHeight = headerHeight + verticalOffset
            var heightScale = (reverseHeaderHeight) / headerHeight

            LogUtils.i(TAG, "addOnOffsetChangedListener verticalOffset : ${verticalOffset}, reverseHeaderHeight : ${reverseHeaderHeight} , heightScale : ${heightScale}")

            AppBarLayout.LayoutParams.SCROLL_FLAG_NO_SCROLL
            //向上滚动，设置模糊效果
            //binding.rv13HeaderRecyclerView?.alpha = heightScale
            appBarLayout?.alpha = heightScale

        }

    }

    private fun getDataList() : MutableList<Item8HeaderBean>{
        //1级列表
        var list = mutableListOf<Item8HeaderBean>()
        var imgs1 = intArrayOf(R.mipmap.demo_farms, R.mipmap.demo_fruits, R.mipmap.demo_pets, R.mipmap.demo_fishs)
        for(i in imgs1.indices){
            var item8Bean = Item8HeaderBean(imgs1[i])
            list.add(item8Bean)
        }
        return list
    }

    private fun getData() : MutableList<Item8Bean>{
        //1级列表
        var list = mutableListOf<Item8Bean>()
        var imgs1 = intArrayOf(R.mipmap.base_banner0, R.mipmap.base_banner1, R.mipmap.base_banner2,
            R.mipmap.base_banner3, R.mipmap.base_banner4, R.mipmap.base_banner5,
            R.mipmap.base_banner6, R.mipmap.base_banner7, R.mipmap.base_banner8, R.mipmap.base_banner9)

        repeat(5){
            for(i in imgs1.indices){
                var item8Bean = Item8Bean(i, "头信息Header:${i}", imgs1[i])
                list.add(item8Bean)
            }
        }

        return list
    }

    companion object {
        const val TAG = "RvDemo13Fragment"
    }


}

RVDemo13Adapter类：

package com.example.androidkotlindemo2.recyclerview.demo13

import com.chad.library.adapter.base.BaseQuickAdapter
import com.chad.library.adapter.base.viewholder.BaseViewHolder
import com.example.androidkotlindemo2.R
import com.example.androidkotlindemo2.bean.Item8Bean
import com.example.androidkotlindemo2.bean.ItemBean
import com.example.androidkotlindemo2.utils.LogUtils

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2024/5/25 10:35
 * Description :
 */
class RVDemo13Adapter(layoutResId : Int, data : MutableList<Item8Bean>) : BaseQuickAdapter<Item8Bean, BaseViewHolder>(layoutResId, data) {

    override fun convert(holder: BaseViewHolder, item: Item8Bean) {

        var position = holder.layoutPosition
        LogUtils.i("RVDemo8Adapter", "position : ${position}, ")
        holder.setText(R.id.rv13_item_name, item.name)
        holder.setBackgroundResource(R.id.rv13_item_img, item.imgId)

    }

}

RVDemo13HeaderAdapter类：

package com.example.androidkotlindemo2.recyclerview.demo13

import com.chad.library.adapter.base.BaseQuickAdapter
import com.chad.library.adapter.base.viewholder.BaseViewHolder
import com.example.androidkotlindemo2.R
import com.example.androidkotlindemo2.bean.Item8Bean
import com.example.androidkotlindemo2.bean.Item8HeaderBean
import com.example.androidkotlindemo2.bean.ItemBean
import com.example.androidkotlindemo2.utils.LogUtils

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2024/5/25 10:35
 * Description :
 */
class RVDemo13HeaderAdapter(layoutResId : Int, data : MutableList<Item8HeaderBean>) : BaseQuickAdapter<Item8HeaderBean, BaseViewHolder>(layoutResId, data) {

    override fun convert(holder: BaseViewHolder, item: Item8HeaderBean) {

        var position = holder.layoutPosition
        holder.setBackgroundResource(R.id.rv13_header_item_img, item.imgId)

    }

}

recycler_view_demo13_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:id="@+id/rv13_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/rv13_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <!--app:layout_scrollFlags="scroll" 滚动-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv13_header_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"/>

        <!--enterAlways 固定在顶部, 不管RecyclerView是否有值-->
        <TextView
            android:id="@+id/rv13_header_title"
            app:layout_scrollFlags="scroll|enterAlways"
            android:minHeight="50dp"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/red"
            android:gravity="right|center_vertical"
            android:text="名称"
            android:paddingRight="20dp"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_demo13_main"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

recycler_view13_header_item.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_marginVertical="6dp"
    android:layout_marginHorizontal="10dp"
    android:layout_height="wrap_content">


    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/rv13_header_item_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/base_banner1"/>

</RelativeLayout>

recycler_view13_item.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/gray_c0c0c0"
    android:layout_marginHorizontal="20dp"
    android:layout_marginVertical="6dp"
    android:layout_height="120dp">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/rv13_item_name"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginVertical="6dp"
        android:textColor="@color/yellow"
        android:textSize="28sp"
        android:text="item" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/rv13_item_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rv13_item_name"
        android:background="@mipmap/base_banner1"/>

</RelativeLayout>