基于Android平臺利用表格布局制作簡易計算器界面
2020-04-09 04:42:13周輝奎
無線互聯(lián)科技 2020年3期
周輝奎
摘? ?要：Android程序設(shè)計中，有6大布局方法。文章重點論述了基于Android平臺利用表格布局來制作一個簡易的計算器界面，涉及詳細的操作步驟，對計算器界面進行有效美化和優(yōu)化，并做出總結(jié)。
關(guān)鍵詞：Android程序設(shè)計;表格布局;計算器界面
1? ? 布局介紹
在Android程序設(shè)計中，有6大布局方法，分別是線性布局LinearLayout、相對布局RelativeLayout、表格布局TableLayout、幀布局FrameLayout、網(wǎng)格布局GridLayout和絕對布局AbsoluteLayout。選定了布局方法，再往布局里面插入一個個的控件，當(dāng)然如果是復(fù)雜的界面，還會涉及布局之間的嵌套，也就是布局里還有布局。
Android界面開發(fā)一般是通過XML布局文件來實現(xiàn)的，比如activity_main.xml，該文件在項目文件里的路徑是E：＼ECLIPSE JAVA＼Test1＼res＼layout＼activity_main.xml。如果Android程序APP涉及多個界面，那么還要另外再新建多個相應(yīng)的布局界面。新建：右擊項目文件里的layout，選擇New—Android XML File，再輸入布局文件名，要求文件名以小寫字母開頭進行命名，其他字符只能包含小寫字母、數(shù)字0～9或下劃線，如果布局文件名包括其他字符都會報錯。最后，根據(jù)界面的特點，選擇適配的布局方法，默認的是線性布局LinearLayout（常用方法），也可以選擇相對布局RelativeLayout或者其他布局方法，從而新建好一個布局文件[1]。
新建完布局文件后，項目中可能會存在多個布局文件，設(shè)置程序運行后，首次看到的界面為某布局文件test1.xml。打開后臺Java Activity代碼，該文件位于項目文件里的路徑是在E：＼ECLIPSE JAVA＼Test1＼src＼com＼example＼test1＼MainActivity.java，修改其中的代碼setContentView（R.layout.activity_main），改成setContentView（R.layout.test）。
新建完布局文件后，就可以對布局文件進行設(shè)計。常見的設(shè)計方法有兩種：（1）利用可視化的界面Graphical Layout進行控件的拖拽，然后在屬性欄修改布局和控件的相關(guān)屬性，如寬度、高度、字體大小、文字內(nèi)容、背景顏色、文字顏色等屬性，方便、快捷。（2）利用代碼界面進行代碼的編寫，對程序的編寫能力要求較高，但是通過長期的訓(xùn)練，可以大大提升程序的編碼能力，以及軟件開發(fā)能力，所以筆者強烈建議通過代碼編寫界面來開發(fā)Android程序APP的界面。如果是初學(xué)者，建議還是先用第一種方法，利用可視化的界面進行控件的拖拽，簡單明了、方便快捷，可以增強開發(fā)設(shè)計APP界面的自信心，建議后期采用第二種方法，對自己的專業(yè)能力也是一個提高的過程。
2? ? 表格布局概述
表格布局（TableLayout）是讓控件以表格的形式來排版件的，只要將控件放在單元格中，控件就可以整齊的按行和列進行排列。如果某Android程序APP界面的排版是非常規(guī)整的，具有明顯的行和列之分，就可以選擇利用表格布局為技術(shù)來設(shè)計與制作。在TableLayout中，行數(shù)由TableRow對象控制的，即布局中有多少TableRow對象，就有多少行。在TableRow控件里再設(shè)置列，如android：layout_column=“0”，表示表示在第1列（下標(biāo)從0開始）。注意表格布局不能跨行，但可跨列android：layout_span=“列數(shù)”。
3? ? 利用Android表格布局制作計算器界面
本文以制作一個簡易的計算器界面為案例，來講解其中的制作要領(lǐng)，如圖1所示。由于計算器界面的按鈕排版布局特點是非常明顯的，排列是非常規(guī)整的，具有明顯的行和列之分，所以可以選擇利用表格布局為技術(shù)來設(shè)計與制作[2]。
將計算器界面中的按鈕全部用表格布局來制作，計算器界面的詳細制作步驟如下：
（1）先把文本控件TextView拖進來，設(shè)置好高度android：layout_height="wrap_content"和寬度android：layout_width="wrap_content"，高度和寬度都是包裹文字內(nèi)容，即文字多長則顯示多長，最后設(shè)置右對齊android：gravity="right"，設(shè)置好文本內(nèi)容android：text="90"。
（2）因為在表格布局中的每一行按鈕都是水平拉伸占滿整個屏幕的寬度，所以需在表格布局里增加一條代碼，android：stretchColumns="0，1，2，3"，其中0，1，2，3分別表示第1列到第4列全部被拉伸。
（3）因為該界面存在5行按鈕，而在表格布局中TableRow標(biāo)簽表示一行，所以表格布局代碼里有5段TableRow標(biāo)簽，即有5段
（4）因為每一行都是居中對齊的，故應(yīng)該在5段TableRow標(biāo)簽里各增加一條代碼android：gravity="center_horizontal"。
（5）因為第一行有4個按鈕，故在第一段TableRow標(biāo)簽里有4段
（6）對于第5行的“清除”按鈕，因為其占了1行4列，涉及跨列，故應(yīng)該在該TableRow標(biāo)簽里增加一條代碼android：layout_span="4"。
4? ? 對計算器界面進行美化、優(yōu)化
由于Android自帶的按鈕不夠美觀，為了制作出更好的人機交互友好界面，可以通過以下步驟對原計算器界面進行美化、優(yōu)化。
（1）可以利用Photoshop圖片設(shè)計軟件，手工制作兩張美觀點的按鈕背景圖片。
（2）除了“清除”按鈕用soil_backgroud_content2.9.png背景圖片，其他的按鈕背景圖片統(tǒng)一用cheng.jpg。
（3）兩種圖片分別存放在E：＼ECLIPSE JAVA＼Test1＼res＼drawable-hdpi＼路徑里面。
（4）調(diào)整所有按鈕的文本顏色為白色，即android：textColor="#FFFFFF"。
（5）設(shè)置“清除”按鈕的高度android：layout_height="wrap_content"和寬度android：layout_width="wrap_content"，高度和寬度都是包裹文字內(nèi)容，即文字多長則顯示多長。
（6）設(shè)置其他按鈕的高度android：layout_height="60dp"和寬度android：layout_width="60dp"。
（7）設(shè)置“清除”按鈕的背景圖片，即android： background="@drawable/soil_backgroud_content2"。
（8）設(shè)置其他按鈕的背景圖片，即android：back-ground="@drawable/cheng"。
5? ? 結(jié)語
在Android程序的界面設(shè)計中，布局方法有6種方法，應(yīng)該根據(jù)界面的不一樣特點，選擇相適合的布局方法。有時，同一個界面，可以采取多個布局方法來排版。對于一些復(fù)雜的界面，還會涉及布局之間的嵌套，應(yīng)該靈活應(yīng)變進行選擇判斷。
[參考文獻]
[1]朱生，牟星亮，單康康.基于Android平臺的應(yīng)用程序開發(fā)研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2013（10）：46-47.
[2]劉開元.（簡易）計算器的編程設(shè)計[J].數(shù)字技術(shù)與應(yīng)用，2018（2）：174-175.
