Android RecyclerView StaggeredG
2022-03-02 本文已影响0人
没有了遇见
瀑布流.png
GridLayoutManager 用于实现网格布局 但是遇到子条目宽高不一致的需求 GridLayoutManager 处理起来就不那么舒服了这个时候就要用到 StaggeredGridLayoutManager交错的网格布局管理器了
StaggeredGridLayoutManager 继承于GridLayoutManager 用于处理交错的网格布局
StaggeredGridLayoutManager: 交错的网格布局管理器,用来处理错位的瀑布流需求 如上图
实现:
1. 主体代码
package com.wu.material.activity.rv
import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.recyclerview.widget.DefaultItemAnimator
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.SimpleItemAnimator
import androidx.recyclerview.widget.StaggeredGridLayoutManager
import com.bumptech.glide.Glide
import com.wu.material.R
import com.wu.material.databinding.ActivityStaggeredBinding
/**
* @author wkq
*
* @date 2022年03月01日 9:19
*
*@des
*
*/
class StaggeredGridLayoutManagerActivity : AppCompatActivity() {
var binding: ActivityStaggeredBinding? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView<ActivityStaggeredBinding>(this, R.layout.activity_staggered)
initView()
}
var mAdapter: DemoAdapter? = null
private fun initView() {
mAdapter = DemoAdapter(this)
//一行分多少份
var staggeredGridLayoutManager = StaggeredGridLayoutManager(2, RecyclerView.VERTICAL)
binding!!.rvContent.layoutManager = staggeredGridLayoutManager
//处理 刷新闪烁,以及 添加闪烁(带兼容)
(binding!!.rvContent.getItemAnimator() as DefaultItemAnimator).supportsChangeAnimations = false
(binding!!.rvContent.getItemAnimator() as SimpleItemAnimator).supportsChangeAnimations = false
binding!!.rvContent.getItemAnimator()!!.setChangeDuration(0)
binding!!.rvContent.adapter = mAdapter
addData()
binding!!.btAdd.setOnClickListener {
addData()
}
}
fun addData() {
var listData = ArrayList<String>()
listData.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648703608&t=95791a95a7cef403ce51a595a97e74a6")
listData.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648703608&t=f335964873e513f059e338c9cc5bbd87")
listData.add("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F68%2Fc8%2F7d%2F68c87deaf34b1b521135181ebfb12633.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648703608&t=5b154bbc15f5611cfe37e0bd42a1baa4")
//刷新数据
mAdapter!!.addItems(listData)
}
// 自定义Adapter
class DemoAdapter(mContext: Context) : RecyclerView.Adapter<DemoViewHolder>() {
var mContext: Context? = null
var listData = ArrayList<String>()
init {
this.mContext = mContext
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DemoViewHolder {
var view = LayoutInflater.from(mContext).inflate(R.layout.item_staggered, parent, false)
var viewHolder = DemoViewHolder(view)
return viewHolder
}
override fun onBindViewHolder(holder: DemoViewHolder, position: Int) {
var imageView= holder.getTextView()
var layoutParams=imageView.layoutParams
if (position%2==0){
layoutParams.height=400
}else{
layoutParams.height=660
}
imageView.layoutParams=layoutParams
Glide.with(mContext!!).load(listData.get(position)).into(imageView)
}
override fun getItemCount(): Int {
return listData.size
}
fun addItems(items: ArrayList<String>) {
listData.addAll(items)
//刷新数据
notifyItemInserted(listData.size)
}
}
// 自定义Holder
class DemoViewHolder(view: View) : RecyclerView.ViewHolder(view) {
var rootView: View? = null
init {
rootView = view
}
fun getTextView(): ImageView {
var tvContent = rootView!!.findViewById<ImageView>(R.id.tv_content)
return tvContent
}
}
}
2. 布局xml
2.1 activity 的xml activity_staggered.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />
<Button
android:id="@+id/bt_add"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:text="添加数据"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
2.2 adapter 子布局的xml item_staggered.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="wrap_content"
android:layout_margin="10dp"
android:background="@color/colorPrimary">
<ImageView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="120dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
注意:
- 上拉加载下拉刷新的闪烁问题
- 添加数据的刷新问题
- 滑动的闪烁问题
总结:
StaggeredGridLayoutManager 用于实现错位的网格布局,但是错位的网格布局中间有许多的闪烁问题需要具体问题具体分析,以后遇到再做更新
