如何设置高度等于其宽度？

Posted 2023-03-05

【中文标题】如何设置高度等于其宽度？

【英文标题】：How to set the height equal to its width?

【发布时间】：2021-10-08 18:54:24

【问题描述】：

我想做一个棋盘游戏，比如国际象棋（8x8 单元棋盘）。 作为目标，我希望我的应用程序可以在多个智能手机上运行，​​例如屏幕点（= 720px X 1280px、1024px X 1920px、1024 X 2340px）。

附图是我的游戏板，通过输入px值使其高度等于宽度。在这个结果中，1024px X 1920px 和 1024 X 2340px 都可以。

当然，不适用于 720 像素 X 1280 像素的智能手机。

你能给我你的技术来控制 TableLayout 的高度等于它的宽度吗？

<TableLayout
    android:id="@+id/TableLayout"
    android:layout_
    android:layout_
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

enter image description here

【参考方案1】：

对于固定数量的框/网格，我建议使用GridLayout 或RecyclerView 和GridLayoutManager。以下是 2 X 2 情况下的 GridLayout 示例：

<GridLayout
    android:layout_
    android:layout_
    android:columnCount="2">                    //specify number of column each row

    <TextView
        android:layout_columnWeight="1"         //【important!! Not "layout_rowWeight"!!】
        android:gravity="center"                //center content
        android:text="Sam"
        android:textColor="@color/black"
        android:textSize="30sp" />

    <TextView
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="Sam"
        android:textColor="@color/black"
        android:textSize="30sp" />

    <TextView
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="Sam"
        android:textColor="@color/black"
        android:textSize="30sp" />

    <TextView
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="Sam"
        android:textColor="@color/black"
        android:textSize="30sp" />

</GridLayout>

但是，您会注意到它的高度不等于宽度，这是因为我们使用match_parent 表示GridLayout 来占据屏幕的整个宽度，但我们使用wrap_content 表示它的高度。那么，将match_parent 设置为高度？不好。使用硬编码dp？不好。好吧，原来ConstraintLayout 有一个惊人的属性，叫做layout_constraintDimensionRatio：

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <GridLayout
        android:layout_
        android:layout_                 //must be 0dp for either width or height
        app:layout_constraintDimensionRatio="1:1"   //make the ratio 1:1
        android:columnCount="2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        ...

    </GridLayout>       

</androidx.constraintlayout.widget.ConstraintLayout>

你去。

【讨论】：

我成功了。谢谢你。无论宽度是 720px 还是 1080px，我都能让它填满整个屏幕。 android:layout_rowWeight="1" 和 android:layout_columnWeight="1" 都是必需的。也许是因为我同时使用了TextView和ImageView，总共100多个。我真的很高兴我问了这个问题来堆栈溢出。近期我将在 Google Play 上发布一款名为“火水树地”的象棋类游戏。如果你看到它，如果你能玩它，我会很高兴。感谢您的帮助，我取得了很大的进步。索洛菲亚