FlexboxLayout 的横向、纵向间距(子项 / 行之间的空隙),用 dividerDrawableVertical / dividerDrawableHorizontal + showD...

1. 核心属性说明

纵向间距(水平排列时,子项左右间距)
app:showDividerVertical="middle":只在子项之间显示
app:dividerDrawableVertical="@drawable/spacing_16dp":纵向间距 Drawable
横向间距(换行时,行与行之间的上下间距)
app:showDividerHorizontal="middle":只在行之间显示
app:dividerDrawableHorizontal="@drawable/spacing_8dp":横向间距 Drawable

2. 完整示例

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    <!-- 纵向(子项左右)间距 16dp -->
    app:showDividerVertical="middle"
    app:dividerDrawableVertical="@drawable/spacing_16dp"
    <!-- 横向(行之间)间距 8dp -->
    app:showDividerHorizontal="middle"
    app:dividerDrawableHorizontal="@drawable/spacing_8dp">

    <!-- 子项 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标签1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标签2"/>
    <!-- 更多子项... -->

</com.google.android.flexbox.FlexboxLayout>

3. 间距 Drawable 定义(drawable/spacing_16dp.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 透明,仅占空间 -->
    <solid android:color="@android:color/transparent"/>
    <!-- 纵向间距:宽度 = 16dp,高度任意 -->
    <size android:width="16dp" android:height="1dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <!-- 横向间距:高度 = 8dp,宽度任意 -->
    <size android:width="1dp" android:height="8dp"/>
</shape>

二、代码动态设置

FlexboxLayout flexboxLayout = findViewById(R.id.flexbox);

// 纵向间距(子项左右)
flexboxLayout.setShowDividerVertical(FlexboxLayout.SHOW_DIVIDER_MIDDLE);
flexboxLayout.setDividerDrawableVertical(
    ContextCompat.getDrawable(this, R.drawable.spacing_16dp));

// 横向间距(行之间)
flexboxLayout.setShowDividerHorizontal(FlexboxLayout.SHOW_DIVIDER_MIDDLE);
flexboxLayout.setDividerDrawableHorizontal(
    ContextCompat.getDrawable(this, R.drawable.spacing_8dp));
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,054评论 0 0
  • CSS样式规则 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解...
    wrootlflvl阅读 2,065评论 0 2
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    桃花兰岛主阅读 615评论 0 1
  • # CSS样式规则overflow 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,088评论 0 1
  • 安卓常用控件及其常用属性 TextView android:id 这是唯一地标识控件的ID。 android:ca...
    icechao阅读 1,203评论 0 16

友情链接更多精彩内容