阿旺師磨書坊: 手機 App 程式設計- AppInventor2-使用滑桿改變圖片的大小

(2022/06/13 修改)

題目

使用滑桿(slider)改變圖片的大小。

素材

範例圖片:

說明:原始圖片為阿旺師拍攝，尺寸是350x197，上傳到Google 網站，再下載卻變成 320x180。

執行畫面

初始畫面:

移動滑桿:

移動滑桿到最右邊:

進入 Appinventor

Google 輸入 appinventor,選 MIT　App Inventor ,選「Create Apps」。

網址為 :http://ai2.appinventor.mit.edu/

建立新專案

Projects , 選「Start new project」。

輸入專案的名稱，名稱只能使用大小寫字母、數字及「 _」符號，名稱的第一個字元必須是英文字母，很像 Visual Basic 命名規則，但不能使用中文字。
我輸入 : slideimage，按「OK」。

Designer(畫面編排)

在 Layout(介面配置) 選單下面選「HorizontalArrangement」(水平配置元件)，可以把圖片固定在一個區域內，避免在作圖片縮放時，下面的 Label、Slider 元件也跟著移來移去。(也可以把二個以上的元件放在同一列，如果沒有先放 HorizontalArrangement元件，每一個元件是佔一列)

選 HorizontalArrangement1 此元件，右邊的 Properties (屬性)視窗，有很多此元件的屬性可改。

AlignHorizontal: Center， AlignVertical: Center。讓水平配置內的元件(如圖片)水平居中，垂直居中。
Width 改成 Fill parent (填滿，實際寬度將包含此元件的父元件的寬度來自動決定)。以此例來說，父元件是　Screen1。
Height:200 pixels(範例圖片的高度為 197)。

在 User Interface (使用者介面) 選單，選 Image (圖像)元件，拖曳到工作面板區內，此元件名稱預設為 Image1。

選 Image1此元件，右邊的 Properties (屬性)視窗，有很多此元件的屬性可改。

Picture(圖片):None(表示沒有圖片)，按下面的 Upload File(上傳文件)，按「選擇檔案」，選一張圖片上傳，如「school.jpg」。

結果如下:

在 Layout 選單下面選「HorizontalArrangement」(介面配置)元件，拖曳到工作面板區，此元件名稱預設為 HorizontalArrangement2。
選 HorizontalArrangement2 此元件，

Width : Fill parent(填滿)。

在 User Interface 選單下面選「Label」(標籤)元件，拖曳到 HorizontalArrangement2 內。
此物件名稱預設為 Label1。屬性設定如下:

Fontsize(字體大小) : 20。
Text (文字): 滑桿值。
TextColor(文字顏色): Red (紅色)。

再拖曳一個 Label 元件到 HorizontalArrangement2 內。當 HorizontalArrangement2 內出現藍色條狀，再放下 Label 元件，元件名稱預設為 Label2。

Label2 屬性設定如下:

Fontsize : 20。
Text : (可清空成空字串或不改)。
TextColor: Red。

如果沒有 HorizontalArrangement2 此元件，二個 Label 元件就無法並排放在一起。

拖曳 Slider(滑桿) 元件到 HorizontalArrangement2 的上面。當 HorizontalArrangement1 和 HorizontalArrangement2 中間出現藍色條狀，再放下 Slider 元件，此元件名稱預設為 Slider1。