手機螢幕比例調整相當重要，因為不同型號的長寬尺寸差異大，可能造成操作介面的問題，本文教你如何利用變數自動計算，建立1個響應式的版面設計。
上一節介紹元件面板中的「介面配置」，示範使用了「水平配置」、「垂直配置」，並且成功藉由等同於螢幕寛度的方式，解決不同手機尺寸的困擾。然而，除了手機尺寸不同，在同一界面上通常會有好多個按鈕和圖標，想要整齊美觀地進行多按鈕圖標佈局，必須應用現在本節即將介紹的另一個同樣常用基本的「表格配置」。
一、按鈕介面配置
回到上一節第一步驟的音樂播放界面，上一首、播放、下一首三個按紐是水平布置在同一個高度上、分散均勻地隔開，看起來相當清爽。如果想要也設計出像這樣的佈局，有兩種辦法，一個是和上一節類似，先計算手機螢幕的寛度，然後分別設定三個按紐寛度和間隔距離，另一個是想法較為簡單，既然有三個按紐、按紐左右會有四個間隔，可以想像總共就是有七個格子，在手機下螢幕下方放一個長條，長條裡平均分割成一行七列的表格，然後把三個按紐放在第2、4、6的格子上，如此不是同樣可以達到目的。
為實現上述第二種方法，於「元件面板」中的「介面配置」，先再拉三個「水平配置」到上一節的「垂直配置」下面，這樣等於沿用上一段的觀念，垂直地將手機螢幕分開四個區段，預計把專輯圖片放在第一段，打算把按紐放在第三段，所以在「水平配置3」中放入「表格配置1」，依序再放入四個標籤三個按紐，如此即實現上一段的一行七列表格佈局。如截圖所示App Inventor關於表格配置的說明：「放在本元件中的元件按照表格方式排列(行數列數可自訂)」，相信只要經過本節範例簡單操作，便能理解表格配置的作用。
有了介面佈局之後，再將圖片拉到水平配置及按紐的「圖像」屬性中，可以看到App Inventor會自動調整適應圖片的長寛比例，在正方形的表格中，圖片便是正常顯示，在上下的水平配置中，圖片便會被拉長扭曲。從這個角度也可以見得App介面配置的重要性。
二、App元件屬性
沿用上一節的元件屬性清單，同樣把各項元件屬性設定列出來，供讀者參考，不過隨著本書App越來越複雜，不方便將所有元件及元件屬性都詳列出來，例如這裡的「標籤2」到「標籤4」、「按紐2」到「按紐3」不特別說明。另外注意上個步驟的截圖中，最下方有「標籤5」和「標籤6」，於專案中僅作為測驗，其屬性皆為預設值，沒有特別設置，在這裡也就不再列為清單說明。
特別要提出來的，是把「表格配置1」中的所有標籤按紐的「高度」及「寛度」都設定「40像素」，如同上一步驟截圖所示，在這裡是用絶對值的方式，強制將每個表格元件（框框）設定為正方形。另外也注意到要把每個標籤按紐的「文字」屬性清空。
三、使用變數方塊
上一節於「畫面編排」中介紹了介面配置這個重要工具，這一節切到「程式設計」，要介紹另一個重要工具：變數。
國中數學都有接觸過二元一次方程式，每個方程式一開始都是設x,y為變數，依照題目不同，這些變數代表不同的人物東西，例如可能鷄兔同籠裡的東物、或者是兩人相遇到達的距離時間等。於學習方程式過程中，應該能體會到設x,y變數這個概念，不但大大了提高解題的方便性和效率性，也增進對於抽象數學的理解。
設定變數在程式設計有異曲同工的作用。以App Inventor這一節實際範例來說，將「方塊」中「內件方塊」的「變數」抽屜拉開，第一個便是「初始化全域變數（變數名）為」， 其說明為「建立全域變數，並透過後方的程式方塊來設定初始值」，在前兩章的基礎上，我們不難建立起x,y兩個變數，「螢幕寛度」（x）為「Screen1」的「寛度」、「螢幕高度」（y）為「Screen1」的「高度」，這樣的變數設定，反映了上一節的界面佈局思惟。
四、合併文字變數
接下來再使用「內件方塊」中的「文字」方塊，抽屜拉開，第一類型方塊可以直接「輸入文字內容」，第二類型方塊可以「合併所有輸入項為同一個文字」。運用前兩章所學過的App Inventor拼圖式的程式設計方法，將「標籤5」和「標籤6」的「文字」屬性設定為「合併文字」，此合併文字第一段為直接輸入的文字方塊（「手機高度為」），第二段為變數引用（「取global螢幕高度」）。
五、測試手機寬高
實際於手機模擬測試，除了上一節的置中圖片，扭曲的按紐圖片和正常的按紐圖片一如預期﹐在下方還可以看到「手機寛度為319」、和「手機高度為632」，所以可以得知手機的長寛比例為2:1。另外本節將表格裡的標籤按紐的高度寛度設定為40像素，總共寛度為40Ｘ7＝280，所以並沒有超出本款手機的寛度。
六、數學內件方塊
變數除了是文字或文字合併之外，可想見還有可能是數字和數字計算，所以在「內件方塊」也有一類是「數學」。以這一節的專案為例，由於各款安卓手機大小比例不同，希望將標籤按紐由絶對值（「40像素」）更改成相對值（「Screen1.寛度/8」），在這裡因為總共有三個圖標按紐、四個間隔標籤，統一以1/8作為正方形邊長，如此在手機上顯示的三按紐會是置中而分散對齊。
前面兩章在專案的每個設計階段都有詳盡步驟的圖文說明，不過隨著所介紹的專案益加複雜，勢必無法再一步一步的操作示範，如同上一節第六步驟所述，於「畫面編排」是以表列清單的方法說明，在這裡，於「程式設計」會是以拼塊截圖的方式呈現，相信讀者有了前兩章的熟練度基礎上，即使所操作的方塊不同，應該不難自行拼湊程式。
另外先前圖片都是填滿整個手機寛度，其實在真正的App中比較少看到這樣全屏佔滿的情況，多半留有間隔較為美觀。因此將「圖片寛度」設定為「screen1.寛度x0.8」。
最後編寫「Screen1.初始化」事件，讓App在啟動時即設定好各按紐標籤圖片的佈局，這裡重點是高度寛度不再取絶對值、而是採取變數值的方法，如此一來不但可以使用App自動適應不同手機尺寸，二來在程式架構上更有邏輯性及效率性，舉例而言，假設往後想再修改界面佈局，只要修改變數設定，即可全局地調整高度寛度，比如說把「/8」、「＊0.8」改成「/6」、「＊0.6」）。
七、音樂播放器介面
於手機模擬測驗，除了播放進度條可能超出目前App Inventor的功能之外，幾乎已經剛開始上一節第一步驟的目標界面完成一致了。
App Inventor響應式介面設計
本章到這一節為止，已經大致介紹App Inventor中關於介面配置的元件使用，成功設計出符合一般手機App模樣的操作界面，重點在於相對大小和表格配置。可想見常用的App像是照片、電話、簡訊、筆記等，在佈局上可能風格模塊不同、可能複雜程度不同，但在本章第一節和第二節的基礎上，應該都可以發揮延伸出來，本書在接下來會陸續介紹不同的App應用，同時也會分享相關的介面配置如何設計。期許讀者也可以開始規劃自己理想中的App模樣！
贊贊小屋程式設計自學：
Linux教學、Python教學、HTML自學入門、手機App製作教學、Synology NAS教學。
