APP Inventor必須考慮不同手機尺寸的可能狀況。本文以音樂播放器為例，介紹如何技巧性的定義水平及垂直配置，建立螢幕初始化事件，設計響應式手機App介面。

前兩章都有成功設計好具備特定功能的App，雖然可以用，但可能對於外人操作來說不易理解。如同上一章第四節所述，App Inventor除了自己學習開發使用之外，在本質上是分享給所有手機裝置持有者使用，因此有必要設計一套親切舒服、容易上手的使用者介面。本章即以手機基本功能之一：音樂播放為例，介紹App Inventor如何設計使用者界面。

一、音樂播放介面

萬事起頭難，可以先參考一下目前流行的範例，不但是站在巨人的肩膀上，也是對於自己程式設計功力的肯定。如圖所示，左邊蘋果為iPhone Xs Max OS 12.4音樂播放應用程式，右邊為小米MI9 MIUI 10.2.31的音樂App，兩者共通點是一張專輯圖片和幾個基本的按紐圖標。

二、Excel繪製圖標

在按紐圖標部份，有很多種取得方法，其中之一為辦公室最普遍常用的Excel編圖工具，這本書並非專門介紹Excel，在此僅順帶一提。

三、水平佈局元件

前往App Inventor網站，新建一個名為「ZanzanMusic」的專案，於「元件面板」中，「介面配置」便是關於設計使用者界面的元件集成。在這裡將「水平配置」加入到「工作面板」中：「水平佈局元件可以放置於其中的元件自左向右水平排列。」在此打算像第一步驟所看到的一樣，將播放按紐都放在同一個水平框框裡。

四、嵌套框架設計

除了播放按紐，還希望專輯圖片置於正中央，如此可以想像，需要一個和螢幕一樣大的框架，在此框架內，有一個置中的相片框，在相片框下是一列水平排列的圖標，所以總共三個框架，後面兩個小框架是放在前面大框架的上面。

像這樣框架、層次、父子的概念，是在設計程式界面時主要思考的點，其實如果有過網頁排版設計的經驗，會發現兩者在本質上是相同的，只不過操作實現的方法不同。App Inventor本來就注重簡便性，所以排版方式很直覺，拖曳一個「水平配置」、再拖曳一個「垂直配置」，然後在「工作面板」中，將「水平配置」拉到「垂直配罝」裡面，如此即實現了兩層框架，仔細看「元件清單」的樹狀結構，其實不難理解是三層框架，尚有最底層的「Screen1」。

除了框架之間層次關係，另外一個是元件本身的位置大小，此為透過屬性來作設定。如圖所示，將「元件屬性」的「水平對齊」設定為「置中：3」、「垂直對齊」設定為「置中：2」，這是該元件（「水平配置1」）相對於其上層框架（「垂直配置1」）的位置，在「高度」和「寛度」有「自動」、「填滿」、「像素」、「比例」，這是該元件（「水平配置1」）本身的大小設定。

五、初始化螢幕寛度

第一步驟的iPhone Xs Max OS 12.4音樂播放應用程式，專輯圖片顯然為正方形，看起來似乎簡單，但當我們也想將Andriod的「ZanzanMusic」專輯圖片（「水平配置1」）也設定為正方形，很快會發現「自動」、「填滿」、「像素」、「比例」四個選項都不太適合，似乎只要把高度寛度的「像素」設定為相同即可，但我們都知道安卓手機的尺寸差異相當大（現在連蘋果iPhone手機尺寸同樣如此），當程計設定固定等高等寛像素，如此會造成不同安卓手機的使用體驗有異，更麻煩的是，可能大手機看起來圖片小、小手機看起來圖片被切割，從這裡程式設計之不易，可見一斑。

縱然目前手機尺寸不一，但大多是高寛比接近於2:1，利用此特性，可以先得到螢幕的寛度，然後將專輯圖片（「水平配置1」）的高寛都設定等同於螢幕寛度，如此即適當地解決問題。

有此思惟後，接下來是如何在App Inventor的程式語言實現，如下「工作面板」截圖因應而生，相信在前兩章的基礎上，讀者不難理解此程式計之用意。

六、元件屬性規劃

在前兩章和本節到上一步驟為止，皆是以截圖說明元件屬性的設定，但隨著程式範例益加複雜，顯然已不再可行。在此開始以文字表列的方式陳述，讀者如有興趣練習，也請按照下表分別為每項元件進行屬性設定。

七、手機App測試

手機模擬測試，一如預期！

APP Inventor設計操作介面

這一節花了些篇幅介紹在APP Inventor如何設計介面，用到了諸如水平配置、垂直配置、層次框架、螢幕寬度等技巧，最終只得到一個相對置中對齊的圖片，距離一開始想設計的音樂播放介面，似乎仍有一大段距離。

從這裡可以瞭解到程式設計不是那麼容易，然而，同樣回到本節第一步驟所謂的「萬事起頭難」，一旦打下了基礎、跨出了第一步，接下來要再繼續延伸發展，困難度就會降低，下一節開始讀者應該就能有此體會。

每天學習，每天充電：AppInventor文章合集。