我在使布局看起来不错时遇到了麻烦。
为了了解基础知识,我决定创建一个简单的计算器应用程序。
因此,我使用嵌套在LinearLayout中的GridLayout将Button放置在文本字段下。
这是我的布局来源。
<?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>
如何使这种布局充满屏幕?
并让我的应用看起来像这样
希望能快速得到答案。
[编辑]:所以,现在情况好多了,但是我遇到了新的问题。现在我的主要活动看起来像这样
我认为很好,但是:
另外,新的布局代码是:
<?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
,在跨行的每一列之间放置一个View会导致GridLayout扩展整个View。
要使用此功能,您的支持库版本需要此依赖项
compile "com.android.support:gridlayout-v7:<support library number>"
color.xml
<color name="calcAccent">#ef6c00</color>
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句