如何调整HorizontalScrollView中ImageButton的宽度以实现GitHub贡献热力图效果

问题根源 #

• HorizontalScrollView 仅支持1个直接子控件，你直接将ImageButton作为它的子控件，且给ImageButton添加的ConstraintLayout约束属性完全不生效，布局逻辑混乱导致宽度属性被忽略
• ImageButton 原生自带默认最小宽度/最小高度限制，当你设置的layout_width小于系统默认最小值时，会被强制覆盖为默认最小值

修复方案 #

先给HorizontalScrollView加一层横向容器（这里用LinearLayout为例），再把所有方块放在容器内，同时给ImageButton关闭默认最小宽高限制，修复后的布局代码如下：

<HorizontalScrollView
    android:id="@+id/scrollView"
    android:layout_width="0dp"
    android:layout_height="295dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="60dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/time">

    <!-- 新增一层横向LinearLayout作为所有贡献格子的容器 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:padding="4dp">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="20dp"
            android:layout_height="35dp"
            android:background="@drawable/square"
            <!-- 关闭默认最小宽高限制，自定义宽高才会生效 -->
            android:minWidth="0dp"
            android:minHeight="0dp"
            <!-- 可选：去掉ImageButton默认的点击阴影、按压效果，和GitHub格子样式对齐 -->
            android:stateListAnimator="@null" />

        <!-- 其余贡献格子可直接在当前LinearLayout内添加即可 -->

    </LinearLayout>

</HorizontalScrollView>

额外优化建议 #

• 如果需要实现完整的贡献日历格子，建议用横向滑动的RecyclerView替代HorizontalScrollView，一次性加载上百个控件时性能提升明显，不会出现滑动卡顿问题
• 格子的透明度可以通过setAlpha()方法动态设置，参数取值范围为0~1，你可以根据单日提交次数换算对应的透明度值赋值即可

内容的提问来源于stack exchange，提问作者GlenXoseph