Android - 瀑布流布局

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);
      }
  }
  

• 启动效果如下