【Android】网络布局 && 瀑布流布局

三三是该溜子

发布于 2025-08-21 08:36:30

13900

代码可运行

文章被收录于专栏：该溜子的专栏该溜子的专栏

运行总次数：0

代码可运行

三三要成为安卓糕手

一：网络布局

网络状布局，由照片和分割线构成

二：GridRecyclerViewActivity类

1：代码分析

Grid 美[ɡrɪd] 网格

这里的代码很熟练了

创建循环视图——>包含设置适配器、布局管理器、分割item装饰

设置适配器之前——>先创建适配器实例

下面的代码还是非常清晰的

public class GridRecyclerViewActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.recycler_view);

        //一行显示两个item
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);
        recyclerView.setLayoutManager(gridLayoutManager);

		//创建数据，创建适配器实例
        ArrayList<Integer> imsResIds = createData();
        GridAdapter gridAdapter = new GridAdapter(imsResIds);
		
		//设置分割线
        DividerItemDecoration verticalDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
        DividerItemDecoration horizontalDecoration = new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL);
        recyclerView.addItemDecoration(verticalDecoration);
        recyclerView.addItemDecoration(horizontalDecoration);
        
        recyclerView.setAdapter(gridAdapter);


    }
    private ArrayList<Integer> createData() {
        ArrayList<Integer> imsResIds = new ArrayList<>();
        imsResIds.add(R.drawable.ic_article_1);
        imsResIds.add(R.drawable.ic_article_2);
        imsResIds.add(R.drawable.ic_article_3);
        imsResIds.add(R.drawable.ic_article_4);
        imsResIds.add(R.drawable.ic_article_5);
        imsResIds.add(R.drawable.ic_article_6);
        imsResIds.add(R.drawable.ic_article_7);
        imsResIds.add(R.drawable.ic_article_8);
        imsResIds.add(R.drawable.ic_article_9);
        imsResIds.add(R.drawable.ic_article_10);
        imsResIds.add(R.drawable.ic_article_11);
        imsResIds.add(R.drawable.ic_article_12);
        imsResIds.add(R.drawable.ic_article_13);
        imsResIds.add(R.drawable.ic_article_14);
        imsResIds.add(R.drawable.ic_article_15);
        imsResIds.add(R.drawable.ic_article_16);
        imsResIds.add(R.drawable.ic_article_17);
        imsResIds.add(R.drawable.ic_article_18);
        imsResIds.add(R.drawable.ic_article_19);
        imsResIds.add(R.drawable.ic_article_20);
        return imsResIds;
    }
}

2：new GridLayoutManager(this, 3);

创建网络布局管理器

第一个参数为上下文对象，
第二个参数代表网格的列数，即指定 RecyclerView 中的数据项将以每行 3 列的形式展示。

三：GridAdapter类

1：MyviewHolder对应布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_article_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

高度如果设置成match_parent就会造成大片大片的空白

2：代码

网络适配器类

继承自RecyclerView.Adapter，使用泛型类GridAdapter.MyViewHolder，因为MyViewHolder是GridAdapter类的内部类所以这么写

注意重写的方法中类型修改为MyViewHolder

这两行代码：setImageResource(resId)方法接收资源 ID 作为参数，在初始化**dataList**时，刻意让列表的每个下标（position），正好等于图片资源 ID；

		Integer resId = dataList.get(position);
        holder.ivImage.setImageResource(resId);

public class GridAdapter extends RecyclerView.Adapter<GridAdapter.MyViewHolder>{
    private List<Integer> dataList;
    public GridAdapter(List<Integer> dataList){
        this.dataList = dataList;
    }
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_demo_grid, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Integer resId = dataList.get(position);
        holder.ivImage.setImageResource(resId);
    }

    @Override
    public int getItemCount() {
        return dataList.size() == 0 ? 0 : dataList.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public ImageView ivImage;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            ivImage = itemView.findViewById(R.id.iv_img);
        }

    }
}

四：瀑布流布局

效果如下：

MyViewHolder对应的xml布局

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="12dp">

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

        <ImageView
            android:id="@+id/iv_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:src="@drawable/bg_picture_2" />

        <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:text="1"
            android:textAlignment="center" />

    </LinearLayout>


</androidx.cardview.widget.CardView>

1：核心布局逻辑

瀑布流通常是多列布局（如 2 列或 3 列）

列宽固定： 一般是列宽固定，每列宽度由父容器平均分配，因此子项的宽度通常设置为match_parent
行高自适应：高度由自身内容（如图片、文字）决定，不同子项的高度可以不同，从而形成错落有致的 “瀑布” 效果，因此高度通常设置为 wrap_content。

2：`adjustViewBounds="true"`

这是ImageView 中的一个属性，作用是 “调整视图边界以保持图片的原始宽高比例”

前提是 ImageView 的宽或高中至少有一个设置为 wrap_content
确保图片不会因为 ImageView 的尺寸强制拉伸而变形
加了这个属性scaleType（缩放类型）属性，设置成centerCrop或者fitXY都可以

3：textAlignment

Alignment 英 [əˈlaɪnmənt] 调准，校正

第一次用到这个属性

4：fitXY和centerCrop

firXY强行拉伸图片填充满容器，大概率不是原图比例，不会裁剪；centerCrop按比例拉伸填充满容器，会裁剪掉超出部分

这就是核心区别

五：StaggeredGridRecyclerView

瀑布流布局 staggered 英 [ˈstægəd] 错列的，叉排的

public class StaggeredGridRecyclerVIewActivity extends AppCompatActivity {

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


        RecyclerView recyclerView = findViewById(R.id.recycler_view);

        //设置瀑布流布局管理器
        StaggeredGridLayoutManager staggeredGridLayoutManager =
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);

        ArrayList<Integer> data = createData();
        //设置适配器
        StaggeredGridAdapter staggeredGridAdapter = new StaggeredGridAdapter(data);
        recyclerView.setAdapter(staggeredGridAdapter);
    }
    private ArrayList<Integer> createData() {
        ArrayList<Integer> pictureResIds = new ArrayList<>();
        pictureResIds.add(R.drawable.bg_picture_1);
        pictureResIds.add(R.drawable.bg_picture_2);
        pictureResIds.add(R.drawable.bg_picture_3);
        pictureResIds.add(R.drawable.bg_picture_4);
        pictureResIds.add(R.drawable.bg_picture_5);
        pictureResIds.add(R.drawable.bg_picture_6);
        pictureResIds.add(R.drawable.bg_picture_7);
        pictureResIds.add(R.drawable.bg_picture_8);
        pictureResIds.add(R.drawable.bg_picture_9);
        pictureResIds.add(R.drawable.bg_picture_10);
        return pictureResIds;
    }

}

1：注意点

R的导包别导错了，否则找不到Recycler_view控件

2：`new StaggeredGridLayoutManager();`

第一个参数2，表示有两列

第二个参数表示垂直滚动

 //设置瀑布流布局管理器
        StaggeredGridLayoutManager staggeredGridLayoutManager =
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

六：StaggeredGridAdapter

public class StaggeredGridAdapter extends RecyclerView.Adapter<StaggeredGridAdapter.MyViewHolder>{
    private static final String TAG = "StaggeredGridAdapter";

    private List<Integer> data;
    public StaggeredGridAdapter(List<Integer> data){
        this.data = data;
    }
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_staggered_grid_picture, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Log.i(TAG, "onBindViewHolder: position =" + position);
        Integer imageId = data.get(position);
        holder.imageView.setImageResource(imageId);

        String textLabel = String.valueOf(position + 1);
        holder.textView.setText(textLabel);
    }

    @Override
    public int getItemCount() {
        return data.size() == 0 ? 0 : data.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder{

        private final ImageView imageView;
        private final TextView textView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.iv_img);
            textView = itemView.findViewById(R.id.text_view);
        }
    }
}

注意这个点int类型的数字通过String.valueOf()方法很方便的转化为字符串

七：总结

瀑布流其实也是在Recycler的范围内，几个函数的使用也都是这样，累了bro

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-21，如有侵权请联系 cloudcommunity@tencent.com 删除

drawable

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度