创建5列的网格布局
问题描述:
我想了解android布局的基本知识。所以,正因为如此,我决定创建2个视图的计算器应用程序:基础和科学。创建5列的网格布局
所以,我完成创建一个基本的布局,现在想多一个排,像战俘,开方,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="÷"
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
答
嗯,因为没有人回答,我已经通过我自己解决了这个。
该问题出现在硬编码按钮的网格单元格编号中,也出现在对网格不完全理解的情况下:layout_columnWeight & grid: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="÷"
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!
希望这个答案可以帮助别人。