uview 瀑布流_RecyclerView 瀑布流布局

本文介绍了如何使用uview实现RecyclerView的瀑布流布局。关键在于Item布局的高度不能固定,需设置为wrap_content,以便适应不同长度的内容,形成错落有致的效果。通过调整数据源,可以创建长短不一的瀑布流形式。
摘要由CSDN通过智能技术生成

最后一个布局样式是瀑布流的布局,其实和网格布局几乎一样的,网格布局是规规矩矩的,而瀑布流就是有长有短的那种,有错位和落差感,有时候太规矩的不好看,有一点错位显得更加美观。

? ? 瀑布流的?RecyclerView Item 布局文件要注意了,不能写固定的一个高度,否则就没有效果了。比如,我们得这样改:

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="8dp"

app:cardCornerRadius="8dp"

app:cardElevation="4dp">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="8dp">

android:id="@+id/img_recy_item_3_pic"

android:layout_width="match_parent"

android:layout_height="120dp"

android:scaleType="centerCrop" />

android:id="@+id/tv_recy_item_3_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/img_recy_item_3_pic"

android:layout_centerInParent="true"

android:layout_marginTop="8dp"

android:textSize="16sp" />

? ? 注意上面的代码,cardview 的高度不能固定,以及下面的 textview 高度也都不能固定值,都要写为 wrap_content,适配器就不需要修改了,要改的地方就是数据格式还有?RecyclerView 的布局管理样式。

我们添加数据要改为这样,名称有长的有短的,才能形成长短不一的瀑布流的形式。

private void addStaggeredData() {

Map map = null;

Random random = new Random();

String[] str = {

"瀑布流\n",

"瀑布流\n瀑布流\n",

"瀑布流\n瀑布流\n瀑布流\n",

"瀑布流\n瀑布流\n瀑布流\n瀑布流\n",

};

for (int i = 0; i < 30; i++) {

int n = random.nextInt(pics.length);

map = new HashMap<>();

map.put("pic", pics[n]);

map.put("name", names[n] + "\n" + str[random.nextInt(str.length)]);

staggeredData.add(map);

}

}

---------------------

来源:oschina

链接:https://my.oschina.net/u/4410397/blog/3428799

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp 中可以使用 `u-grid` 组件实现瀑布流布局。以下是一个简单的例子: 1. 在页面中引入 `u-grid` 组件: ```html <template> <u-grid :list="images" :column-num="2"> <template v-slot="{ item }"> <img :src="item.url" style="width: 100%;" /> </template> </u-grid> </template> ``` 2. 在页面中定义图片列表数据: ```js <script> export default { data() { return { images: [ { url: 'https://picsum.photos/id/1/300/200' }, { url: 'https://picsum.photos/id/2/300/400' }, { url: 'https://picsum.photos/id/3/300/200' }, { url: 'https://picsum.photos/id/4/300/500' }, { url: 'https://picsum.photos/id/5/300/200' }, { url: 'https://picsum.photos/id/6/300/300' }, { url: 'https://picsum.photos/id/7/300/400' }, { url: 'https://picsum.photos/id/8/300/200' }, { url: 'https://picsum.photos/id/9/300/600' }, { url: 'https://picsum.photos/id/10/300/200' }, { url: 'https://picsum.photos/id/11/300/400' }, { url: 'https://picsum.photos/id/12/300/200' }, { url: 'https://picsum.photos/id/13/300/300' }, { url: 'https://picsum.photos/id/14/300/400' }, { url: 'https://picsum.photos/id/15/300/200' }, { url: 'https://picsum.photos/id/16/300/500' }, { url: 'https://picsum.photos/id/17/300/200' }, { url: 'https://picsum.photos/id/18/300/300' }, { url: 'https://picsum.photos/id/19/300/400' }, { url: 'https://picsum.photos/id/20/300/200' } ] } } } </script> ``` 这样就可以实现一个简单的瀑布流布局。你可以根据需要调整列数和图片数据。注意,`u-grid` 组件需要引入 `uview-ui` 库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值