如何制作具有 2 列不同大小的网格？

Question

这让我发疯了几个小时。我只想定义一个包含 2 列的 GridLayout。第一列应占总宽度的 70%。第二栏应该拿剩下的，30%。我在这里可以找到的所有样本都是大小相等的列。此外，我希望单元格内容根据单元格大小进行调整，而不是相反。

我可能是错的，但我想我理解

android:layout_columnWeight

是管理列宽的方法吗？

到目前为止，这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnCount="2"
    android:orientation="horizontal"
    android:rowCount="5">
    <TextView
        android:layout_gravity="fill_horizontal"
        android:layout_rowSpan="1"
        android:text="@string/goals"
        fontPath="fonts/Ubuntu-Bold.ttf" />
    <ImageButton
        android:src="@drawable/baseline_settings_black_18dp"
        android:scaleType="fitCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?android:selectableItemBackground" />
    <TextView
        android:layout_gravity="fill_horizontal"
        android:text="Stabiliser mon poinds à 90kg"
        android:id="@+id/objective1" />
    <Com.Syncfusion.Gauges.SfCircularGauge.SfCircularGauge
        android:layout_column="1"
        android:layout_row="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:layout_height="50sp"
        android:layout_width="0sp"
        android:layout_gravity="fill_horizontal"
        android:id="@+id/sfCircularGaugeGoal1Score" />
    <TextView
        android:layout_gravity="fill_horizontal"
        android:text="Manger plu sain"
        android:id="@+id/objective2" />
    <Com.Syncfusion.Gauges.SfCircularGauge.SfCircularGauge
                android:layout_column="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:layout_height="50sp"
        android:layout_width="0sp"
        android:layout_gravity="fill_horizontal"
        android:id="@+id/sfCircularGaugeGoal2Score" />
    <TextView
        android:layout_gravity="fill_horizontal"
        android:text="Pratiquer des activités en famille régulièrement"
        android:id="@+id/objective3" />
    <Com.Syncfusion.Gauges.SfCircularGauge.SfCircularGauge
        android:layout_column="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:layout_height="50sp"
        android:layout_width="0sp"
        android:layout_gravity="fill_horizontal"
        android:id="@+id/sfCircularGaugeGoal3Score" />
    <TextView
        android:layout_gravity="fill_horizontal"
        android:text="Augmenter mes revenus"
        android:id="@+id/objective4" />
    <Com.Syncfusion.Gauges.SfCircularGauge.SfCircularGauge
        android:layout_column="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        android:layout_columnWeight="1"
        android:layout_height="50sp"
        android:layout_width="0sp"
        android:layout_gravity="fill_horizontal"
        android:id="@+id/sfCircularGaugeGoal4Score" />
</GridLayout>

Mac 设计器在 VS 中的结果是：

但是在运行时，我看不到左边每一行的控件。请注意，文本会在运行时更改，并且只有一行内容。

Answer 1

您可以使用带有权重和权重总和的线性布局。它根据比例动态划分屏幕。你想要什么。使用下面的 scatch 来理解模式

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tempo_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

      <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="10">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="7">

               <!--add 30% content here -->

           </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="3">

               <!--add 70% content here -->

           </LinearLayout>

      </LinearLayout>

</LinearLayout>

Answer 2

我同意另一个答案，LinearLayout 可能是正确的选择。

使用 GridLayout 的方法如下：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnCount="2"
    android:orientation="horizontal"
    android:rowCount="5">
    <TextView
        android:layout_columnWeight="7"
        android:text="1"/>
    <TextView
        android:layout_columnWeight="3"
        android:text="2"/>
    <TextView
        android:layout_columnWeight="7"
        android:text="3"/>
    <TextView
        android:layout_columnWeight="3"
        android:text="4"/>
    <TextView
        android:layout_columnWeight="7"
        android:text="5"/>
    <TextView
        android:layout_columnWeight="3"
        android:text="6"/>
    <TextView
        android:layout_columnWeight="7"
        android:text="7"/>
    <TextView
        android:layout_columnWeight="3"
        android:text="8"/>
    <TextView
        android:layout_columnWeight="7"
        android:text="9"/>
</GridLayout>

下面是使用 LinearLayout 的方法：（我编辑了另一个答案，但没有显示，因为我没有足够的声誉）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="7"
        android:orientation="vertical">
        <!--add 70% content here -->
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="vertical">
        <!--add 30% content here -->
    </LinearLayout>
</LinearLayout>

如何制作具有 2 列不同大小的网格？

How to make a grid with 2 columns with different sizes?

android

android-layout

android-gridlayout