RecyclerView实现多种布局样式

本文介绍如何使用 Android 的 RecyclerView 实现列表、网格和瀑布流布局效果,并提供了代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、添加依赖

compile 'com.android.support:recyclerview-v7:25.3.0'

2、布局

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

item

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
    <ImageView
        android:layout_centerInParent="true"
        android:background="@mipmap/ic_launcher"
        android:id="@+id/item_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"/>
    <TextView
        android:layout_marginTop="10dp"
        android:text="标题"
        android:id="@+id/item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/item_iv"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:textSize="18sp"/>
</RelativeLayout>

3、代码

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    //图片数组
    private int[] mListIcons = new int[]{R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round
    };
    //标题数组
    private String[] mListTitle = new String[]{"标题1","标题2","标题3","标题4","标题5","标题6","标题7","标题8",
            "标题9","标题10","标题11","标题12","标题13","标题14","标题15","标题16","标题17","标题18","标题19","标题20"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv = (RecyclerView) findViewById(R.id.rv);
        initData();
    }

    private void initData() {
        //样式,boolean代表展示的方向
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        rv.setLayoutManager(linearLayoutManager);
        //数据
        rv.setAdapter(new RecyclerView.Adapter() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View view = View.inflate(parent.getContext(), R.layout.rv_item, null);
                RecyclerView.ViewHolder viewHolder = new RvViewholder(view);
                return viewHolder;
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                //进行数据设置
                RvViewholder myViewholder = (RvViewholder) holder;
                //设置图片
                myViewholder.itemIv.setImageResource(mListIcons[position]);
                //设置标题数据
                myViewholder.itemTv.setText(mListTitle[position]);
            }

            @Override
            public int getItemCount() {
                return mListIcons.length;
            }

            class RvViewholder extends RecyclerView.ViewHolder {

                public ImageView itemIv;
                public TextView itemTv;

                /**
                 * 初始化控件
                 */
                public RvViewholder(View itemView) {
                    super(itemView);
                    itemIv = (ImageView) itemView.findViewById(R.id.item_iv);
                    itemTv = (TextView) itemView.findViewById(R.id.item_tv);
                }
            }
        });
    }
}

可以通过new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);设置横向或者纵向列表
效果图:
这里写图片描述
4、改变样式,实现GridView样式

//创建一个竖横的listView
//LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
//创建一个竖横的gridView
GridLayoutManager layoutManager = new GridLayoutManager(this, 3 ,GridLayoutManager.VERTICAL,false);
rv.setLayoutManager(layoutManager);

效果图:
这里写图片描述
5、瀑布流样式

StaggeredGridLayoutManager layout = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
rv.setLayoutManager(layout);

代码已上传GitHub

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值