Android 瀑布流列表(类似于ListView)

最新推荐文章于 2025-07-28 09:30:52 发布

孺子-小哥

最新推荐文章于 2025-07-28 09:30:52 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： Android RecyclerView

本文链接：https://blog.youkuaiyun.com/d18865556765/article/details/52599711

Android 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在Android中使用RecyclerView实现瀑布流布局，以展示不同大小的图片，提供一种不同于传统ListView的视觉效果。内容涵盖主布局设计及关键实现步骤。

实现目标：图片并列展示，但大小不同。区别于ListView的相同大小图片。

主布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.jreduch12.RecyclerActivity">
<android.support.v7.widget.RecyclerView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/rv">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>

图片和文字格式布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:id="@+id/iv"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/tv"/>
</LinearLayout>

代码：（应用butterknife插件，可省略findViewbyId步骤）

package com.example.administrator.jreduch12;

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

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import butterknife.Bind;
import butterknife.ButterKnife;

public class RecyclerActivity extends AppCompatActivity {

    @Bind(R.id.rv)
    RecyclerView rv;
    private List<Map>list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);
        getSupportActionBar().hide();
        ButterKnife.bind(this);
        list=new ArrayList<>();
        initData();
        MyAdapter myAdapter=new MyAdapter(list);
        StaggeredGridLayoutManager sgm=
                new StaggeredGridLayoutManager(2,
                        StaggeredGridLayoutManager.VERTICAL);
        //瀑布流管理器。2行，排列方式为竖直排列。
        rv.setLayoutManager(sgm);
        rv.setAdapter(myAdapter);
        DividerItemDecoration itemDecoration=
                new DividerItemDecoration(this,
                        DividerItemDecoration.VERTICAL_LIST);
        //设置分割线
        rv.addItemDecoration(itemDecoration);
    }
    public void initData(){
        HashMap map=new HashMap();
        map.put("img",R.mipmap.bg);
        map.put("text","图片1");
        list.add(map);

        map=new HashMap();
        map.put("img",R.mipmap.beijing);
        map.put("text","图片2");
        list.add(map);

        map=new HashMap();
        map.put("img",R.mipmap.fifthpicture);
        map.put("text","图片3");
        list.add(map);

        map=new HashMap();
        map.put("img",R.mipmap.fourthpicture);
        map.put("text","图片4");
        list.add(map);

        map=new HashMap();
        map.put("img",R.mipmap.secondpicture);
        map.put("text","图片5");
        list.add(map);

        map=new HashMap();
        map.put("img",R.mipmap.sixthpicture);
        map.put("text","图片6");
        list.add(map);
    }
    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{
        private List<Map>mapList;
        public MyAdapter(List<Map>mapList){
            this.mapList=mapList;
        }

        @Override
        public int getItemCount() {
            return mapList.size();
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           View view= LayoutInflater.from(getBaseContext())
                    .inflate(R.layout.recycler_test, parent,false);
            MyViewHolder viewHolder=new MyViewHolder(view);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            Map map= mapList.get(position);
            holder.imageView.setImageResource((Integer) map.get("img"));
            holder.textView.setText( map.get("text").toString());
        }
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView  textView;
        public MyViewHolder(View itemView) {
            super(itemView);
            imageView= (ImageView) itemView.findViewById(R.id.iv);
            textView= (TextView) itemView.findViewById(R.id.tv);
        }
    }
}

实现效果：