如何制作2列大小不同的网格?

时间:2018-10-31 15:11:05

标签: android android-layout android-gridlayout

这使我疯狂了几个小时。 我只想定义一个包含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>

VS for Mac设计器的结果是:

enter image description here

但是在运行时,我看不到左侧每一行的控件。请注意,文本是在运行时更改的,只有一行包含内容。

enter image description here

2 个答案:

答案 0 :(得分:0)

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

<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>

答案 1 :(得分:0)

我同意另一个答案,那就是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>