欢迎回来Android入门教程的第十期,那么经过前两期教程,或许你已经掌握了RecyclerView的工作流程,那么这一期来介绍一下RecyclerView的流布局。

上期传送门:#9 Android入门教程 – RecyclerView(2) – LovelyCat的小站 (lovelycatv.cn)

下期传送门:#11 Android入门教程 – 多Activity与数据传输 – LovelyCat的小站 (lovelycatv.cn)

说起流布局,你能想到有哪些应用?最常见的如淘宝的商品信息卡片、快手的视频流布局等。那么要使用流布局非常简单,还记得在前两期中,我们为RecyclerView指定了LinearLayoutManager,所以以此类推吗,只要给它指定流布局的布局管理器即可实现。下面回到主类中:

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(linearLayoutManager);

我们将上述代码换成下面这一句:

recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

那么第一个参数spanCount就是列数,后一个参数想必不用我多说了吧,讲线性布局的时候已经介绍过了。

这里我沿用了前一期的多样式布局,只将两个布局的顶级LinearLayout的width改为了wrap_content随内容宽度。

由于代码变更很简单,就不再贴重复代码了,下面可以直接来看实机运行效果啦:

可以看到,现在的ReyclerView变成了流布局的形式,那么本期到此特别短,那下面就来改造这两个布局加长一下吧~

上面两种布局的代码如下所示,布局是共用的,只不过组件的id修改了。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardElevation="3dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:src="@drawable/bg1"
            android:scaleType="centerCrop"/>
        <LinearLayout
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/reitem_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="视 频 已 失 效"
                android:textColor="#000"
                android:textSize="16sp"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:padding="3dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="8万点赞"
                    android:textColor="#FF6C00"
                    android:textSize="13sp"
                    android:background="#FFD9CF"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</androidx.cardview.widget.CardView>

那么本期教程就到此结束啦,感谢观看!


0 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注