如何在ChipGroup中实现Chip水平分布对齐及多行混合布局
3个Chip水平分布实现方案
ChipGroup默认不支持自动分散对齐子控件,要实现起始、居中、末尾对齐的水平分布效果,可按如下方式修改:
- 给ChipGroup设置
app:singleLine="true"、android:layout_width="match_parent",移除原有app:chipSpacingHorizontal配置 - 在第1、2个Chip后各插入1个
Space控件,给两个Space都设置android:layout_width="0dp"、android:layout_height="match_parent"、android:layout_weight="1",即可自动撑满剩余空间,实现三个Chip的分布效果
多行混合布局实现方案
你目前用LinearLayout包裹TextView实现换行的方案可正常运行,还有更简洁的原生方案:
Material Components 1.2.0及以上版本的ChipGroup支持子项强制换行属性,只需给需要另起一行的子控件添加app:layout_chip_newLine="true"属性即可,无需额外嵌套布局:
- 给TextView添加该属性,即可让其单独占第二行
- 给第4个Chip也添加该属性,即可让第三行的3个Chip单独成行
- 如果需要控制行间距,可直接给对应子项设置
android:layout_marginVertical属性即可
修改后完整布局代码
<com.google.android.material.chip.ChipGroup android:id="@+id/chipGroup" android:layout_width="match_parent" android:layout_height="wrap_content" app:singleSelection="true"> <!-- 第一行3个Chip --> <com.google.android.material.chip.Chip android:id="@+id/chip_1" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="8:30 AM" app:chipCornerRadius="7dp" /> <Space android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <com.google.android.material.chip.Chip android:id="@+id/chip_2" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="9:00 AM" app:chipCornerRadius="7dp" /> <Space android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <com.google.android.material.chip.Chip android:id="@+id/chip_3" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="9:30 AM" app:chipCornerRadius="7dp" /> <!-- 第二行TextView 强制换行 --> <TextView android:id="@+id/TextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:fontFamily="@font/poppins_bold" android:text="TextView" android:textSize="18sp" app:layout_chip_newLine="true" /> <!-- 第三行3个Chip 强制换行 --> <com.google.android.material.chip.Chip android:id="@+id/chip_4" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="8:30 AM" app:chipCornerRadius="7dp" app:layout_chip_newLine="true" /> <Space android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <com.google.android.material.chip.Chip android:id="@+id/chip_5" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="8:30 AM" app:chipCornerRadius="7dp" /> <Space android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <com.google.android.material.chip.Chip android:id="@+id/chip_6" style="@style/CustomChipChoice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" android:text="8:30 AM" app:chipCornerRadius="7dp" /> </com.google.android.material.chip.ChipGroup>
内容的提问来源于stack exchange,提问作者lawayben
相关产品推荐
相关产品推荐

