使用5列创建网格布局

Question

我试图了解Android布局的基础知识。因此，我决定用2种视图创建计算器应用程序：基本和科学。

所以，我完成了一个基本的布局，现在尝试用pow，sqrt，ln等操作创建另一行的科学布局。

我在为现有布局添加新列时遇到了麻烦：当我尝试添加新按钮时，它超出了屏幕。

所以，问题是：如何使用5列进行网格布局而不使用硬编码按钮的宽度？

我的代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100"
    tools:context="android.calcandroid.MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        ></include>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20">

        <TextView
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="0"
            android:gravity="bottom|end"
            android:singleLine="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textSize="48sp"
            android:background="#e3e7ea"
            android:paddingBottom="32dp"
            android:padding="16dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="80">

        <android.support.v7.widget.GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            grid:useDefaultMargins="false"
            grid:alignmentMode="alignBounds"
            grid:columnCount="7"
            grid:rowCount="9">

            <!-- Row 1 -->
            <Button
                android:text="C"
                android:background="@drawable/shape"
                grid:layout_row="0"
                grid:layout_column="0"
                style="@style/calcAction"
                android:textStyle="bold"
                android:textColor="@color/calcAccent"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <ImageButton
                android:background="@drawable/shape"
                android:src="@android:drawable/ic_input_delete"
                grid:layout_row="0"
                grid:layout_column="2"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1" />

            <Button
                android:background="@drawable/shape"
                android:text="&#247;"
                grid:layout_row="0"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                grid:layout_column="4"/>

            <Button
                android:background="@drawable/shape"
                android:text="x"
                grid:layout_row="0"
                grid:layout_column="6"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcAction"/>

            <!-- Row 2 -->
            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="1"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <Button
                android:background="@drawable/shape"
                android:text="7"
                grid:layout_row="2"
                grid:layout_column="0"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"/>

            <Button
                android:background="@drawable/shape"
                android:text="8"
                grid:layout_row="2"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="9"
                grid:layout_row="2"
                grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="-"
                grid:layout_row="2"
                grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <!-- Row 3 -->

            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="3"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <Button
                android:background="@drawable/shape"
                android:text="4"
                grid:layout_row="4"
                grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="5"
                grid:layout_row="4"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="6"
                grid:layout_row="4"
                grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="+"
                grid:layout_row="4"
                grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="7"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <!-- Row 4 -->

            <Button
                android:background="@drawable/shape"
                android:text="1"
                grid:layout_row="6"
                grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="2"
                grid:layout_row="6"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                grid:layout_row="6"
                grid:layout_column="4"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:text="3"
                style="@style/calcNumber"/>

            <Button
                grid:layout_row="6"
                grid:layout_column="6"
                grid:layout_rowSpan="3"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:background="@color/calcAccent"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textColor="@color/primary_material_light"
                android:textStyle="bold"
                android:textSize="22sp"
                android:gravity="center_vertical|center_horizontal"
                android:padding="8dp"
                android:text="="
                style="@style/calcNumber"/>
            <!-- Row 5 -->

            <Button
                android:background="@drawable/shape"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                grid:layout_row="8"
                grid:layout_column="0"
                grid:layout_columnSpan="3"
                style="@style/calcNumber"
                android:text="0"/>

            <Button
                android:background="@drawable/shape"
                grid:layout_row="8"
                grid:layout_column="4"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"
                android:text="."/>

            <!-- Horizontal Grid -->
            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>


        </android.support.v7.widget.GridLayout>

    </LinearLayout>

</LinearLayout>

4列的外观如何：4 columns

Answer 1

好吧，没有人回答，我自己解决了这个问题。

问题在于硬编码按钮的网格单元编号以及我对网格的不完全理解：layout_columnWeight＆amp;格：layout_rowWeight

所以我删除了硬编码值，这里是完整的解决方案代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100"
    tools:context="android.calcandroid.MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        ></include>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20">

        <TextView
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="0"
            android:gravity="bottom|end"
            android:singleLine="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textSize="48sp"
            android:background="#e3e7ea"
            android:paddingBottom="32dp"
            android:padding="16dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="80">

        <android.support.v7.widget.GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            grid:useDefaultMargins="false"
            grid:alignmentMode="alignBounds"
            grid:columnCount="5"
            grid:rowCount="5">

            <!-- Row 1 -->
            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="ln"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcAction"/>

            <Button
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:text="C"
                android:background="@drawable/shape"
                android:layout_width="0dp"
                android:layout_height="0dp"
                style="@style/calcAction"
                android:textStyle="bold"
                android:textColor="@color/calcAccent"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:src="@android:drawable/ic_input_delete"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="&#247;"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="x"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcAction"/>

            <!--  Row 2 -->

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="log"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="7"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="8"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="9"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="-"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <!-- Row 3 -->

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="\u221A"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="5"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="6"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="+"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <!-- Row 4 -->

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="^"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="1"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:text="3"
                style="@style/calcNumber"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_vertical"
                grid:layout_rowSpan="2"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:background="@color/calcAccent"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textColor="@color/primary_material_light"
                android:textStyle="bold"
                android:textSize="22sp"
                android:gravity="center_vertical|center_horizontal"
                android:padding="8dp"
                android:text="="
                style="@style/calcNumber"/>

            <!-- Row 5 -->

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                android:text="!"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                grid:layout_columnSpan="2"
                style="@style/calcNumber"
                android:text="0"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                grid:layout_gravity="fill_horizontal"
                android:gravity="center"
                android:background="@drawable/shape"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"
                android:text="."/>

        </android.support.v7.widget.GridLayout>

    </LinearLayout>

</LinearLayout>

截图：pretty nice!

希望这个答案对某人有所帮助。