如何实现适配屏幕的网格布局并维持圆形Drawable与文字适配

嘿，我来帮你搞定这个多屏幕下圆形背景变形和文字适配的问题，咱们一步步拆解：

一、确保圆形Shape Drawable始终保持正圆 #

核心逻辑是让承载圆形背景的TextView在任何屏幕上都保持正方形——因为Shape的oval会自动填充正方形的View，自然形成正圆。结合你用的7列GridLayout，具体操作如下：

1. 配置GridLayout的列分布
   推荐使用AndroidX的GridLayout（比传统GridLayout更灵活），设置固定7列，让每个子View平分父容器宽度：

   <androidx.gridlayout.widget.GridLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:columnCount="7"
       android:rowCount="1">
       <!-- 7个TextView子项 -->
   </androidx.gridlayout.widget.GridLayout>
   

2. 强制TextView为正方形
   给每个TextView设置宽度平分，高度匹配宽度：

   <TextView
       android:id="@+id/tv_day"
       android:layout_width="0dp"
       android:layout_columnWeight="1"
       android:layout_height="0dp"
       android:layout_rowWeight="1"
       android:background="@drawable/circle_bg"
       android:gravity="center"
       android:text="日"/>
   

   这里layout_columnWeight="1"让TextView平分列宽，layout_rowWeight="1"让高度和宽度强制相等，确保View是正方形，背景的oval自然就是正圆。

3. 简化圆形Shape Drawable
   你的circle_bg.xml不需要固定宽高，让它填充TextView即可：

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
       <solid android:color="#E0F7FA"/> <!-- 填充色 -->
       <stroke android:width="1dp" android:color="#00ACC1"/> <!-- 边框色 -->
   </shape>
   

二、根据圆形大小适配文字尺寸 #

要让文字始终在圆形内，且大小随圆形尺寸变化，有两种可靠方案：

方案1：用系统自带的自动缩放TextView #

Android 8.0+支持AutoSizeTextView，直接在布局中配置就能自动适配：

<TextView
    <!-- 其他属性不变 -->
    android:autoSizeTextType="uniform"
    android:autoSizeMinTextSize="10sp"
    android:autoSizeMaxTextSize="28sp"
    android:autoSizeStepGranularity="2sp"/>

• autoSizeTextType="uniform"：开启文字自动缩放
• autoSizeMinTextSize/autoSizeMaxTextSize：限制文字大小范围
• autoSizeStepGranularity：缩放的步长

如果需要兼容低版本，直接用androidx.appcompat.widget.AppCompatTextView即可向下兼容。

方案2：自定义TextView精确控制 #

如果需要更精细的比例控制（比如文字占圆形宽度的70%），可以自定义TextView重写onMeasure：

public class CircleTextView extends AppCompatTextView {
    private static final float TEXT_RATIO = 0.7f; // 文字宽度占圆形宽度的70%

    public CircleTextView(Context context) {
        super(context);
        init();
    }

    public CircleTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setGravity(Gravity.CENTER);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int viewSize = Math.min(getMeasuredWidth(), getMeasuredHeight());
        setMeasuredDimension(viewSize, viewSize); // 强制View为正方形

        // 计算合适的文字大小
        float maxTextSize = viewSize * TEXT_RATIO;
        TextPaint paint = getPaint();
        String text = getText().toString();
        float textWidth = paint.measureText(text);
        float textSize = getTextSize();

        if (textWidth > maxTextSize) {
            textSize = maxTextSize * textSize / textWidth;
            setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
        }
    }
}

使用时直接在布局中替换为这个自定义View就行。

三、额外注意事项 #

• 绝对不要给TextView设置固定宽高值，全部用权重或动态计算，保证跨屏幕的适配性。
• 如果GridLayout是多行布局，可以调整layout_rowWeight或者用ConstraintLayout嵌套来控制宽高比。

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