App Inventor 2介面設計:不同的尺寸手機自動調整響應

App Inventor 2設計Android手機應用程式時,必須考慮不同安卓手機的尺寸差異,本文先介紹以表格配置布局按鈕及標籤,再以文字和數學變數建立自動響應式的介面。

上一節介紹元件面板中的「介面配置」,示範使用了「水平配置」、「垂直配置」,並且成功藉由等同於螢幕寛度的方式,解決不同手機尺寸的困擾。然而,除了手機尺寸不同,在同一界面上通常會有好多個按鈕和圖標,想要整齊美觀地進行多按鈕圖標佈局,必須應用現在本節即將介紹的另一個同樣常用基本的「表格配置」。

一、按鈕介面配置

回到上一節第一步驟的音樂播放界面,上一首、播放、下一首三個按紐是水平布置在同一個高度上、分散均勻地隔開,看起來相當清爽。如果想要也設計出像這樣的佈局,有兩種辦法,一個是和上一節類似,先計算手機螢幕的寛度,然後分別設定三個按紐寛度和間隔距離,另一個是想法較為簡單,既然有三個按紐、按紐左右會有四個間隔,可以想像總共就是有七個格子,在手機下螢幕下方放一個長條,長條裡平均分割成一行七列的表格,然後把三個按紐放在第2、4、6的格子上,如此不是同樣可以達到目的。

為實現上述第二種方法,於「元件面板」中的「介面配置」,先再拉三個「水平配置」到上一節的「垂直配置」下面,這樣等於沿用上一段的觀念,垂直地將手機螢幕分開四個區段,預計把專輯圖片放在第一段,打算把按紐放在第三段,所以在「水平配置3」中放入「表格配置1」,依序再放入四個標籤三個按紐,如此即實現上一段的一行七列表格佈局。如截圖所示App Inventor關於表格配置的說明:「放在本元件中的元件按照表格方式排列(行數列數可自訂)」,相信只要經過本節範例簡單操作,便能理解表格配置的作用。

有了介面佈局之後,再將圖片拉到水平配置及按紐的「圖像」屬性中,可以看到App Inventor會自動調整適應圖片的長寛比例,在正方形的表格中,圖片便是正常顯示,在上下的水平配置中,圖片便會被拉長扭曲。從這個角度也可以見得App介面配置的重要性。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 1

二、App元件屬性

沿用上一節的元件屬性清單,同樣把各項元件屬性設定列出來,供讀者參考,不過隨著本書App越來越複雜,不方便將所有元件及元件屬性都詳列出來,例如這裡的「標籤2」到「標籤4」、「按紐2」到「按紐3」不特別說明。另外注意上個步驟的截圖中,最下方有「標籤5」和「標籤6」,於專案中僅作為測驗,其屬性皆為預設值,沒有特別設置,在這裡也就不再列為清單說明。

特別要提出來的,是把「表格配置1」中的所有標籤按紐的「高度」及「寛度」都設定「40像素」,如同上一步驟截圖所示,在這裡是用絶對值的方式,強制將每個表格元件(框框)設定為正方形。另外也注意到要把每個標籤按紐的「文字」屬性清空。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 3

三、使用變數方塊

上一節於「畫面編排」中介紹了介面配置這個重要工具,這一節切到「程式設計」,要介紹另一個重要工具:變數。

國中數學都有接觸過二元一次方程式,每個方程式一開始都是設x,y為變數,依照題目不同,這些變數代表不同的人物東西,例如可能鷄兔同籠裡的東物、或者是兩人相遇到達的距離時間等。於學習方程式過程中,應該能體會到設x,y變數這個概念,不但大大了提高解題的方便性和效率性,也增進對於抽象數學的理解。

設定變數在程式設計有異曲同工的作用。以App Inventor這一節實際範例來說,將「方塊」中「內件方塊」的「變數」抽屜拉開,第一個便是「初始化全域變數(變數名)為」, 其說明為「建立全域變數,並透過後方的程式方塊來設定初始值」,在前兩章的基礎上,我們不難建立起x,y兩個變數,「螢幕寛度」(x)為「Screen1」的「寛度」、「螢幕高度」(y)為「Screen1」的「高度」,這樣的變數設定,反映了上一節的界面佈局思惟。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 5

四、合併文字變數

接下來再使用「內件方塊」中的「文字」方塊,抽屜拉開,第一類型方塊可以直接「輸入文字內容」,第二類型方塊可以「合併所有輸入項為同一個文字」。運用前兩章所學過的App Inventor拼圖式的程式設計方法,將「標籤5」和「標籤6」的「文字」屬性設定為「合併文字」,此合併文字第一段為直接輸入的文字方塊(「手機高度為」),第二段為變數引用(「取global螢幕高度」)。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 7

五、測試手機寬高

實際於手機模擬測試,除了上一節的置中圖片,扭曲的按紐圖片和正常的按紐圖片一如預期﹐在下方還可以看到「手機寛度為319」、和「手機高度為632」,所以可以得知手機的長寛比例為2:1。另外本節將表格裡的標籤按紐的高度寛度設定為40像素,總共寛度為40X7=280,所以並沒有超出本款手機的寛度。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 9

六、數學內件方塊

變數除了是文字或文字合併之外,可想見還有可能是數字和數字計算,所以在「內件方塊」也有一類是「數學」。以這一節的專案為例,由於各款安卓手機大小比例不同,希望將標籤按紐由絶對值(「40像素」)更改成相對值(「Screen1.寛度/8」),在這裡因為總共有三個圖標按紐、四個間隔標籤,統一以1/8作為正方形邊長,如此在手機上顯示的三按紐會是置中而分散對齊。

前面兩章在專案的每個設計階段都有詳盡步驟的圖文說明,不過隨著所介紹的專案益加複雜,勢必無法再一步一步的操作示範,如同上一節第六步驟所述,於「畫面編排」是以表列清單的方法說明,在這裡,於「程式設計」會是以拼塊截圖的方式呈現,相信讀者有了前兩章的熟練度基礎上,即使所操作的方塊不同,應該不難自行拼湊程式。

另外先前圖片都是填滿整個手機寛度,其實在真正的App中比較少看到這樣全屏佔滿的情況,多半留有間隔較為美觀。因此將「圖片寛度」設定為「screen1.寛度x0.8」。

最後編寫「Screen1.初始化」事件,讓App在啟動時即設定好各按紐標籤圖片的佈局,這裡重點是高度寛度不再取絶對值、而是採取變數值的方法,如此一來不但可以使用App自動適應不同手機尺寸,二來在程式架構上更有邏輯性及效率性,舉例而言,假設往後想再修改界面佈局,只要修改變數設定,即可全局地調整高度寛度,比如說把「/8」、「*0.8」改成「/6」、「*0.6」)。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 11

七、音樂播放器介面

於手機模擬測驗,除了播放進度條可能超出目前App Inventor的功能之外,幾乎已經剛開始上一節第一步驟的目標界面完成一致了。

App Inventor 2介面設計:不同的尺寸手機自動調整響應 13

App Inventor響應式介面設計

本章到這一節為止,已經大致介紹App Inventor中關於介面配置的元件使用,成功設計出符合一般手機App模樣的操作界面,重點在於相對大小和表格配置。可想見常用的App像是照片、電話、簡訊、筆記等,在佈局上可能風格模塊不同、可能複雜程度不同,但在本章第一節和第二節的基礎上,應該都可以發揮延伸出來,本書在接下來會陸續介紹不同的App應用,同時也會分享相關的介面配置如何設計。期許讀者也可以開始規劃自己理想中的App模樣!

每天學習,每天充電:AppInventor文章合集

App Inventor 2介面設計:不同的尺寸手機自動調整響應 17
歡迎加入Line社群,口袋裡的VBA小教室!