Android - 瀑布流佈局

阿新 • • 發佈：2021-12-05

Android - RecyclerView (實現瀑布流)

開發工具 android studio
開發語言 java
build gradle增加依賴

implementation 'androidx.recyclerview:recyclerview:1.1.0

layout/activity_main.xml （主頁面）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/list"/>

</LinearLayout>

使用androidx.recyclerview.widget.RecyclerView

layout/list_item.xml (瀑布流item)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tx"
        android:textSize="30sp"
        android:background="#ff00ff"
        android:layout_margin="10dp"
        />

</LinearLayout>

這裡瀑布流每個元素為 text 文字，可根據具體業務進行設定更復雜的頁面元素

Bean.java (瀑布流元素的資料物件)

package com.example.myapplication;

public class Bean {
    private String name; //名稱
    private int height; //高度

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }


    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

MyAdapter.java (自定義介面卡)

package com.example.myapplication;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private List<Bean> data; //資料集合
    private Context context;//上下文物件

    public MyAdapter(List<Bean> data, Context context) {
        this.data = data;
        this.context = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //獲取 layout list_item.xml
        View view = View.inflate(context, R.layout.list_item, null);
        return new MyViewHolder(view); //返回 holder ,用於管理當前瀑布流元素
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        //設定文字元素內容
        holder.tx.setText(data.get(position).getName());
        //設定元素高度
        holder.tx.setHeight(data.get(position).getHeight());
    }

    /***
     * 返回資料總條數
     * @return
     */
    @Override
    public int getItemCount() {
        return data == null ? 0 : data.size();
    }

    //管理瀑布流元素類
    public class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView tx;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            //獲取文字節點
            tx = itemView.findViewById(R.id.tx);
        }
    }
}

MainActivity.java

(程式啟動)

package com.example.myapplication;


import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    //頁面資料
    private final List<Bean> data = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化頁面資料
        for (int i = 0;i<100;i++){
            Bean bean = new Bean();
            bean.setName("hello" + i);
            bean.setHeight((int) (Math.random() * 300 + 200));
            data.add(bean);
        }

        /***
         * recyclerview 需要 manager ,確定佈局方式 可以為GridLayoutManager，LinearLayoutManager 等佈局方式的Manager
         * StaggeredGridLayoutManager 是一個瀑布流方式的manager
         */

        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        RecyclerView recyclerView = findViewById(R.id.list);
        MyAdapter myAdapter = new MyAdapter(data,this);
        //新增 adapter
        recyclerView.setAdapter(myAdapter);
        //新增 manager
        recyclerView.setLayoutManager(manager);
    }
}