手把手教你做安豆計算器(二)-計算器介面佈局
第3節 計算器介面佈局
現在起,我們就開始正式開發“計算器”應用。這一節,我們將完成計算器的介面佈局,讓它初具計算器的模樣。
計算器介面是通過佈局檔案定義的。它位於專案的res\layout\activity_main.xml
檔案中。
這個佈局檔案通過java原始碼MainActivity.java
中的setContentView()
函式,設定到介面上。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
接下來,我們的介面佈局,就會在這個佈局檔案activity_main.xml中進行。
在修改佈局檔案的過程中,可以通過Preview
功能,來實時觀看我們修改的介面佈局效果。
3.1 上下段佈局
首先確定佈局形式。介面分為兩個大區域,上半區域顯示計算表示式和計算結果,下半區域顯示鍵盤。
- 兩個區域一上一下,呈線型排列,因此我們選擇
LinearLayout
佈局; - 通過將
LinearLayout
的android:orientation
屬性設定成vertical
來將它包含的內容以豎直方式排列; - 整個介面將盡可能佔用整個螢幕,因此使用
match_parent
指定佈局的寬度和高度。match_parent
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.anddle.calculator.MainActivity">
</LinearLayout>
- 上半區域包含了表示式區域和計算結果區域,它們也成豎直排列,所以還需要一個
LinearLayout
包含它們。上半區域佔整個介面的1/3,就要將android:layout_weight
設定成1
,android:layout_height
設定成0dp
; - 下半區域是鍵盤的顯示區域,我們也選用LinearLayout作為這個區域的佈局。下半區域佔整個介面的2/3,就要將
android:layout_weight
設定成2
,android:layout_height
設定成0dp
;
這樣的設定說明,要將父佈局剩餘的空間平均分成1+2=3份
,上半區域分得1/3
,下半區域分的2/3
。所謂空餘的空間就是:父佈局的空間,被子佈局的空間佔用後,所剩餘的空間。
佈局檔案中,我們將現實區域和鍵盤區域的高度都設定成了0dp
,說明它們在豎直方向上不佔用任何空間,但是又設定了layout_weight
,說明它們要按照父控制元件match_parent
佔用的高度來按比例分配。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.anddle.calculator.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
</LinearLayout>
3.2 顯示區域佈局
結果區域和表示式區域一上一下,各佔一半空間,用來顯示文字內容。它們可以使用TextView控制元件來實現。
- 為結果區域指定
android:id
為result_area
,android:layout_weight
設定成1
,android:layout_height
設定成0dp
; - 為表示式區域指定
android:id
為formula_area
,android:layout_weight
設定成1
,android:layout_height
設定成0dp
;
設定了id
,我們以後就可以在程式碼中,通過這id
來獲取並使用這個控制元件了。 - 包含結果區域和表示式區域的
LinearLayout
設定android:orientation
屬性為vertical
,讓它們豎直排列 - 為了祛除介面上四個邊的空白,我們還要移除最外層
LinearLayout
的android:paddingXXXX
這幾個屬性,讓整個介面填滿顯示區域。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.anddle.calculator.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"/>
<TextView
android:id="@+id/result_area"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/formula_area"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
</LinearLayout>
3.3 鍵盤區域佈局
鍵盤佈局可以進一步分成左右兩個區域,
- 左邊區域是
C
DEL
/
0-9
以及.
; - 右邊區域是
*
-
+
=
。
這兩個區域,可以同樣使用水平排列的LinearLayout
作為它們的父佈局,
- 左邊區域像個表格,可以使用
TableLayout
,讓它佔據3個單位的寬度,android:layout_weight
設定成3
,android:layout_width
設定成0dp
; - 右邊區域就是一個簡單的豎直排列的
LinearLayout
,讓它佔據1個單位的寬度,也就是android:layout_weight
設定成1
,android:layout_width
設定成0dp
;
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<TableLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
3.3.1 鍵盤左區域佈局
鍵盤按鈕分成3*5格,每一格就是一個按鈕,這就像是一個表格,所以我們選用了TableLayout
作為它們的佈局。
- 每一行用
TableRow
表示,它是與TableLayout
配合使用的佈局,用來表示表格的每一行;這裡有5行,就新增5個TableRow
; TableRow
在預設情況下,會假定android:layout_width
為match_parent
,android:layout_height
為wrap_content
,我們就簡單的在這裡設定一個android:layout_weight
為1
;
<TableLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3">
<TableRow android:layout_weight="1">
</TableRow>
<TableRow android:layout_weight="1">
</TableRow>
<TableRow android:layout_weight="1">
</TableRow>
<TableRow android:layout_weight="1">
</TableRow>
<TableRow android:layout_weight="1">
</TableRow>
</TableLayout>
鍵盤上的按鈕可以使用Android SDK提供的Button
控制元件,
- 通過
android:text
屬性為每個Button設定需要顯示的內容; - 為它們各自的
android:id
取上對應的id名字; - 每一行的
Button
還是按照相等的比例進行分配,android:layout_width
設定成0dp
,android:layout_weight
設定成1
,android:layout_height
設定成match_parent
。 - 最後一行中的‘0’按鈕,它要佔據兩列的寬度,我們可以將這個
Button
控制元件的android:layout_weight
設定成2
,就能讓它能夠佔據2格的位置了;
<TableLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3">
<TableRow android:layout_weight="1">
<Button android:id="@+id/btn_c" android:text="C"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_del" android:text="DEL"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_div" android:text="/"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:id="@+id/btn_7" android:text="7"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_8" android:text="8"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_9" android:text="9"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:id="@+id/btn_4" android:text="4"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_5" android:text="5"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_6" android:text="6"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:id="@+id/btn_1" android:text="1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_2" android:text="2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_3" android:text="3"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:id="@+id/btn_0" android:text="0"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent"/>
<Button android:id="@+id/btn_dot" android:text="."
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</TableRow>
</TableLayout>
3.3.2 鍵盤右區域佈局
最後,我們將鍵盤右邊區域的按鈕新增上。
- 讓
Button
豎直排列,就要將包裹它們的LinearLayout
設定android:orientation
成vertical
; - 這一列的
Button
還是按照相等的比例進行分配,所以android:layout_height
設定成0dp
,android:layout_weight
設定成1
,android:layout_width
設定成match_parent
。
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button android:id="@+id/btn_mul" android:text="*"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button android:id="@+id/btn_sub" android:text="-"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button android:id="@+id/btn_add" android:text="+"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button android:id="@+id/btn_equ" android:text="="
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</LinearLayout>
至此,計算器的介面佈局就完成了。
/*******************************************************************/
* 版權宣告
* 本教程只在CSDN和安豆網釋出,其他網站出現本教程均屬侵權。
*另外,我們還推出了Arduino智慧硬體相關的教程,您可以在我們的網店跟我學Arduino程式設計中購買相關硬體。同時也感謝大家對我們這些碼農的支援。
*最後再次感謝各位讀者對安豆
的支援,謝謝:)
/*******************************************************************/