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介面設計:不同的尺寸手機自動調整響應 15
《人人都學得會的App Inventor 2初學入門》
App Inventor 2介面設計:不同的尺寸手機自動調整響應 17
歡迎加入Line社群,口袋裡的VBA小教室!
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.