使用GridLayout来处理计算器 [英] Messing up with a calculator using a GridLayout
本文介绍了使用GridLayout来处理计算器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使布局看起来不错时遇到了麻烦.
I'm facing troubles with making layouts look nice.
要了解基础知识，我决定创建一个简单的计算器应用程序.
因此，我使用嵌套在LinearLayout中的GridLayout将Button放置在文本字段下.
To understand basics, I've decided to create a simple calculator app.
So, I'm using a GridLayout nested in a LinearLayout to place Buttons under text fields.
这是我的布局来源.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="0"
android:layout_weight="30"/>
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false"
android:layout_weight="70">
<Button
android:text="C" />
<Button
android:text="BS" />
<Button
android:text="/" />
<Button
android:text="x" />
<Button
android:text="7" />
<Button
android:text="8" />
<Button
android:text="9" />
<Button
android:text="-" />
<Button
android:text="4" />
<Button
android:text="5" />
<Button
android:text="6" />
<Button
android:text="+" />
<Button
android:text="1" />
<Button
android:text="2" />
<Button
android:text="3" />
<Button
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:layout_gravity="fill"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:text="." />
</GridLayout>
</LinearLayout>
如何在屏幕上显示此布局?
How to make this layout fill the screen?
并使我的应用看起来像这样
And make my app looking like this
希望获得快速解答.
:所以，现在情况好多了，但是我遇到了新的问题.现在我的主要活动是这样
: So, now things are way better, but I got new questions. Now my main activity looks like this
我认为很好，但是:
- 如何删除键盘右侧的空白区域?
- 如何使键盘和文本视图分别占据屏幕的70％和30％?
此外，新的布局代码为:
Also, new layout code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="android.calcandroid.MainActivity">
<TextView
android:background="@drawable/shape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="@+id/gridLayout" />
<GridLayout
android:id="@+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false">
<Button
android:background="@drawable/shape"
android:text="C" />
<Button
android:background="@drawable/shape"
android:text="BS" />
<Button
android:background="@drawable/shape"
android:text="/" />
<Button
android:background="@drawable/shape"
android:text="x" />
<Button
android:background="@drawable/shape"
android:text="7" />
<Button
android:background="@drawable/shape"
android:text="8" />
<Button
android:background="@drawable/shape"
android:text="9" />
<Button
android:background="@drawable/shape"
android:text="-" />
<Button
android:background="@drawable/shape"
android:text="4" />
<Button
android:background="@drawable/shape"
android:text="5" />
<Button
android:background="@drawable/shape"
android:text="6" />
<Button
android:background="@drawable/shape"
android:text="+" />
<Button
android:background="@drawable/shape"
android:text="1" />
<Button
android:background="@drawable/shape"
android:text="2" />
<Button
android:background="@drawable/shape"
android:text="3" />
<Button
android:background="@drawable/shape"
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:background="@drawable/shape"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:background="@drawable/shape"
android:text="." />
</GridLayout>
</RelativeLayout>
推荐答案
非常接近.不确定如何处理垂直分隔线.由于某种原因，在跨越每一行的每一列之间放置一个 1dp 视图会导致GridLayout扩展整个视图.
Got pretty close. Not sure how to handle the vertical dividers. For some reason putting a 1dp View between each column that spanned each row causes the GridLayout to expand the entire View.
要使用此功能，您的支持库版本需要此依赖项
And to use this, you need this dependency for your support library version
compile "com.android.support:gridlayout-v7:<support library number>"
color.xml
color.xml
<color name="calcAccent">#ef6c00</color>
styles.xml
styles.xml
<style name="calcAction">
<item name="android:background">#f7f8fa</item>
</style>
<style name="calcNumber">
<item name="android:background">#fafbfd</item>
</style>
布局XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="@+id/gridLayout" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" 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"/>
<android.support.v7.widget.GridLayout
android:id="@+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"
grid:useDefaultMargins="false" grid:alignmentMode="alignBounds" grid:columnCount="7" grid:rowCount="9">
<!-- Row 1 -->
<Button
android:text="C"
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: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:text="÷"
grid:layout_row="0"
style="@style/calcAction"
grid:layout_columnWeight="1" grid:layout_rowWeight="1" grid:layout_column="4"/>
<Button
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:text="7" grid:layout_row="2" grid:layout_column="0"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
style="@style/calcNumber"/>
<Button
android:text="8" grid:layout_row="2" grid:layout_column="2"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="9" grid:layout_row="2" grid:layout_column="4"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
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:text="4" grid:layout_row="4" grid:layout_column="0"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="5" grid:layout_row="4" grid:layout_column="2"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="6" grid:layout_row="4" grid:layout_column="4"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
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:text="1" grid:layout_row="6" grid:layout_column="0"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="2" grid:layout_row="6" grid:layout_column="2"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="3" grid:layout_row="6" grid:layout_column="4"
style="@style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="=" grid:layout_row="6" grid:layout_column="6"
style="@style/calcNumber" android:background="@color/calcAccent"
grid:layout_rowSpan="3"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@color/primary_material_light" android:textStyle="bold" android:textSize="22sp"
android:gravity="bottom|center_horizontal" android:padding="8dp"/>
<!-- Row 5 -->
<Button
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
android:text="0"
grid:layout_row="8" grid:layout_column="0" grid:layout_columnSpan="3"
style="@style/calcNumber"/>
<Button
android:text="."
grid:layout_row="8" grid:layout_column="4"
grid:layout_columnWeight="1" style="@style/calcNumber"/>
<!-- 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>
</RelativeLayout>
这篇关于使用GridLayout来处理计算器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
