Kotlin之瀑布流效果

截图

首先引入recyclerview、cardview、和刷新库refresh-layout-kernel、refresh-header-classics

    implementation 'androidx.recyclerview:recyclerview:1.2.0'//添加recyclerView
    implementation 'androidx.cardview:cardview:1.0.0'//添加cardView
    implementation 'com.scwang.smart:refresh-layout-kernel:2.0.3'//添加刷新库
    implementation 'com.scwang.smart:refresh-header-classics:2.0.3'//添加经典刷新头

页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <com.scwang.smart.refresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/mRecycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </com.scwang.smart.refresh.layout.SmartRefreshLayout>
</LinearLayout>

向RecyclerView添加数据

    private var page = 1
    private var mList: ArrayList<String>? = null


        mList = ArrayList()
        initData()

       //使用Recycler
        val layoutManager = StaggeredGridLayoutManager(2, 
        StaggeredGridLayoutManager.VERTICAL)
        mRecycler.layoutManager = layoutManager
        val adapter = RecyclerAdapter(mList!!)
        mRecycler.adapter = adapter


    private fun initData() {
        mList!!.add("我的关注")
        mList!!.add("通知开关\n\n")
        mList!!.add("我的徽章")
        mList!!.add("意见反馈\n\n\n")
        mList!!.add("我要投稿")
        mList!!.add("我的关注")
        mList!!.add("通知开关\n\n")
        mList!!.add("我的徽章")
        mList!!.add("意见反馈\n\n\n")
        mList!!.add("我要投稿")
        mList!!.add("我的关注")
        mList!!.add("通知开关\n\n")
        mList!!.add("我的徽章")
        mList!!.add("意见反馈\n\n\n")
        mList!!.add("我要投稿")
    }
//防止item乱跳错位
layoutManager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_NONE
        //防止第一页出现空白
        mRecycler.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                super.onScrollStateChanged(recyclerView, newState)
                layoutManager.invalidateSpanAssignments()
            }
        })

刷新和加载更多

        //刷新
        refreshLayout.setOnRefreshListener {
            mList!!.clear()
            initData()
            adapter.notifyDataSetChanged()
            refreshLayout.finishRefresh(true);//刷新完成
        }

        //加载更多
        refreshLayout.setOnLoadMoreListener {
            page++
            initData()
            adapter.notifyDataSetChanged()
            refreshLayout.finishLoadMore(true)//加载完成
        }

RecyclerAdapter代码

class RecyclerAdapter(private val textList: ArrayList<String>) :
    RecyclerView.Adapter<RecyclerAdapter.MyViewHolder>() {

    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): MyViewHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.recycler_item, parent, false)
        return MyViewHolder(view)
    }

    override fun getItemCount(): Int = textList.size ?: 0

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val textpos = textList[position]
        holder.title.text = textpos
        holder.itemView.setOnClickListener {
            Toast.makeText(holder.itemView.context, "${holder.title.text}", Toast.LENGTH_SHORT)
                .show()
        }
    }

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val title: TextView = itemView.findViewById(R.id.mine_title)
    }
}

recycler_item代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
    android:layout_marginLeft="2.5dp"
    android:layout_marginTop="5dp"
    android:layout_marginRight="2.5dp"
    app:cardBackgroundColor="@color/colorPrimaryDark"
    app:cardCornerRadius="8dp"
    app:cardElevation="0dp">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/mine_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:textColor="@android:color/white"
            android:textSize="16dp"
            tools:ignore="MissingConstraints"
            tools:text="测试一下" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

App代码

public class App extends Application{
    //static 代码段可以防止内存泄露
    static {
        //设置全局的Header构建器
        SmartRefreshLayout.setDefaultRefreshHeaderCreator(new DefaultRefreshHeaderCreator() {
            @Override
            public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
                layout.setPrimaryColorsId(R.color.colorPrimary, android.R.color.white);//全局设置主题颜色
                return new ClassicsHeader(context);//.setTimeFormat(new DynamicTimeFormat("更新于 %s"));//指定为经典Header,默认是 贝塞尔雷达Header
            }
        });
        //设置全局的Footer构建器
        SmartRefreshLayout.setDefaultRefreshFooterCreator(new DefaultRefreshFooterCreator() {
            @Override
            public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
                //指定为经典Footer,默认是 BallPulseFooter
                return new ClassicsFooter(context).setDrawableSize(20);
            }
        });
    }
}

配置文件AndroidManifest.xml中的application标签中引用

android:name=".App"

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用Kotlin语言实现瀑布流效果的示例代码: 1. 在build.gradle文件中添加以下依赖: ``` implementation 'com.android.support:recyclerview-v7:28.0.0' ``` 2. 创建一个RecyclerView,在XML布局文件中添加以下代码: ``` <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager" app:spanCount="2" app:gapStrategy="balanced" android:padding="8dp"/> ``` 3. 创建一个Adapter类,继承RecyclerView.Adapter,并实现以下方法: ``` class CustomAdapter(private val dataList: List<String>) : RecyclerView.Adapter<CustomViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder { val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false) return CustomViewHolder(view) } override fun onBindViewHolder(holder: CustomViewHolder, position: Int) { holder.bind(dataList[position]) } override fun getItemCount(): Int { return dataList.size } } ``` 4. 创建一个ViewHolder类,继承RecyclerView.ViewHolder,并实现以下方法: ``` class CustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { fun bind(item: String) { val textView = itemView.findViewById<TextView>(R.id.itemText) textView.text = item } } ``` 5. 在Activity或Fragment中,设置RecyclerView的Adapter和LayoutManager,并传入数据进行显示: ``` val dataList = listOf( "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" ) recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL) recyclerView.adapter = CustomAdapter(dataList) ``` 这样,就可以在RecyclerView中实现瀑布流效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

举儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值