基于Android平臺利用表格布局制作簡易計算器界面

2020-04-09 04:42:13周輝奎

無線互聯科技 2020年3期

周輝奎

摘? ?要：Android程序設計中，有6大布局方法。文章重點論述了基于Android平臺利用表格布局來制作一個簡易的計算器界面，涉及詳細的操作步驟，對計算器界面進行有效美化和優化，并做出總結。

關鍵詞：Android程序設計;表格布局;計算器界面

1? ? 布局介紹

在Android程序設計中，有6大布局方法，分別是線性布局LinearLayout、相對布局RelativeLayout、表格布局TableLayout、幀布局FrameLayout、網格布局GridLayout和絕對布局AbsoluteLayout。選定了布局方法，再往布局里面插入一個個的控件，當然如果是復雜的界面，還會涉及布局之間的嵌套，也就是布局里還有布局。

Android界面開發一般是通過XML布局文件來實現的，比如activity_main.xml，該文件在項目文件里的路徑是E：＼ECLIPSE JAVA＼Test1＼res＼layout＼activity_main.xml。如果Android程序APP涉及多個界面，那么還要另外再新建多個相應的布局界面。新建：右擊項目文件里的layout，選擇New—Android XML File，再輸入布局文件名，要求文件名以小寫字母開頭進行命名，其他字符只能包含小寫字母、數字0～9或下劃線，如果布局文件名包括其他字符都會報錯。最后，根據界面的特點，選擇適配的布局方法，默認的是線性布局LinearLayout（常用方法），也可以選擇相對布局RelativeLayout或者其他布局方法，從而新建好一個布局文件[1]。

新建完布局文件后，項目中可能會存在多個布局文件，設置程序運行后，首次看到的界面為某布局文件test1.xml。打開后臺Java Activity代碼，該文件位于項目文件里的路徑是在E：＼ECLIPSE JAVA＼Test1＼src＼com＼example＼test1＼MainActivity.java，修改其中的代碼setContentView（R.layout.activity_main），改成setContentView（R.layout.test）。

新建完布局文件后，就可以對布局文件進行設計。常見的設計方法有兩種：（1）利用可視化的界面Graphical Layout進行控件的拖拽，然后在屬性欄修改布局和控件的相關屬性，如寬度、高度、字體大小、文字內容、背景顏色、文字顏色等屬性，方便、快捷。（2）利用代碼界面進行代碼的編寫，對程序的編寫能力要求較高，但是通過長期的訓練，可以大大提升程序的編碼能力，以及軟件開發能力，所以筆者強烈建議通過代碼編寫界面來開發Android程序APP的界面。如果是初學者，建議還是先用第一種方法，利用可視化的界面進行控件的拖拽，簡單明了、方便快捷，可以增強開發設計APP界面的自信心，建議后期采用第二種方法，對自己的專業能力也是一個提高的過程。

2? ? 表格布局概述

表格布局（TableLayout）是讓控件以表格的形式來排版件的，只要將控件放在單元格中，控件就可以整齊的按行和列進行排列。如果某Android程序APP界面的排版是非常規整的，具有明顯的行和列之分，就可以選擇利用表格布局為技術來設計與制作。在TableLayout中，行數由TableRow對象控制的，即布局中有多少TableRow對象，就有多少行。在TableRow控件里再設置列，如android：layout_column=“0”，表示表示在第1列（下標從0開始）。注意表格布局不能跨行，但可跨列android：layout_span=“列數”。

常用屬性：android：stretchColumns=“1”，表示第2列拉伸（拉伸后，該行所有控件占滿屏幕寬度。）若某行有多個控件被拉伸，則用逗號分開。如android：stretchColumns=“2，3”，表示第3列、第4列拉伸（拉伸后，該行所有控件占滿屏幕寬度）。

3? ? 利用Android表格布局制作計算器界面

本文以制作一個簡易的計算器界面為案例，來講解其中的制作要領，如圖1所示。由于計算器界面的按鈕排版布局特點是非常明顯的，排列是非常規整的，具有明顯的行和列之分，所以可以選擇利用表格布局為技術來設計與制作[2]。

將計算器界面中的按鈕全部用表格布局來制作，計算器界面的詳細制作步驟如下：

（1）先把文本控件TextView拖進來，設置好高度android：layout_height="wrap_content"和寬度android：layout_width="wrap_content"，高度和寬度都是包裹文字內容，即文字多長則顯示多長，最后設置右對齊android：gravity="right"，設置好文本內容android：text="90"。

（2）因為在表格布局中的每一行按鈕都是水平拉伸占滿整個屏幕的寬度，所以需在表格布局里增加一條代碼，android：stretchColumns="0，1，2，3"，其中0，1，2，3分別表示第1列到第4列全部被拉伸。

（3）因為該界面存在5行按鈕，而在表格布局中TableRow標簽表示一行，所以表格布局代碼里有5段TableRow標簽，即有5段……布局代碼，表示該表格布局文件有5行。

（4）因為每一行都是居中對齊的，故應該在5段TableRow標簽里各增加一條代碼android：gravity="center_horizontal"。

（5）因為第一行有4個按鈕，故在第一段TableRow標簽里有4段