【XML-ConstraintLayout】写一个类似九宫格的桌面图标集_constraintlayout实现grid效果-优快云博客

本文链接：https://blog.youkuaiyun.com/dandelionela/article/details/82350562

本文介绍使用ConstraintLayout实现手机桌面图标集时遇到的问题及解决方案。通过调整属性app:layout_constraintHorizontal_chainStyle从'spread'到'spread_inside'，解决了图标数量显示不正确的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本想用新出的ConstraintLayout布局来代替一层一层的嵌套LinearLayout或者RelativeLayout或者GridLayout来实现一个类似九宫格或16宫格的手机桌面图标集，在写第一行四个图标均匀分布的时候，用一下代码，总发现有两个图标被挤没了：

    <Button
        android:id="@+id/btn_main_1_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="1:1"                        // 约束比例，为保证Button是个正方形
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"                       // 约束分布，为保证4个Button均匀分布
        app:layout_constraintLeft_toLeftOf="parent"                      // 约束定位
        app:layout_constraintRight_toLeftOf="@id/btn_main_1_2" />        // 约束定位

    <Button
        android:id="@+id/btn_main_1_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_main_1_1"
        app:layout_constraintRight_toLeftOf="@id/btn_main_1_3" />

    <Button
        android:id="@+id/btn_main_1_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_main_1_2"
        app:layout_constraintRight_toLeftOf="@id/btn_main_1_4" />

    <Button
        android:id="@+id/btn_main_1_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_main_1_3"
        app:layout_constraintRight_toRightOf="parent" />

结果4个图标变两个：

也是怪怪的，谁能回答一下为什么？

经过尝试，把：

app:layout_constraintHorizontal_chainStyle="spread"

改为：

app:layout_constraintHorizontal_chainStyle="spread_inside"

之后，可以正常显示4个图标：

百思不得姐~记录一下