網頁

2017年10月15日 星期日

手機 App 程式設計- AppInventor2-使用滑桿改變圖片的大小

範例圖片:(350x197)
建立新專案
在上面 的 Projects , 選 「Start  new project」。

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


在  Layout 選單下面 選 「HorizontalArrangement」(水平布局)元件,可以把圖片固定放在一個區域內,避免在作圖片縮放時,下面的 Label、Slider 元件也跟著移來移去。



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

  • AlignHorizontal: Center, AlignVertical: Center。讓 水平布局內的元件(如圖片)水平置中,垂直置中。
  • Width 改成 Fill parent ((實際寬度將以所包含元件的寬度來自動決定)。
  • 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 (讓字的大小變成 20)。
  • Text : 滑桿值
  • TextColor: Red (紅色) (文字的顏色,改成 Red (紅色) )。

再拖曳一個 Label 元件到  HorizontalArrangement2 內。當  HorizontalArrangement2 內出現藍色條狀,再放下  Label 元件,元件名稱預設為 Label2。
Label2 屬性設定如下:

  • Fontsize : 20(讓字的大小變成 20)。
  • Text : (可清空成空字串或不改)。
  • TextColor: Red (紅色) 。
如果沒有 HorizontalArrangement2 此元件,二個 Label 元件就無法並排放在一起。

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

Slider1 屬性設定如下:
  • Witdh: Fill parent。
  • MaxValue :350 (滑桿值最大值 ,跟圖片的寬度 350 一樣)。
  • MinValue: 50 (滑桿值最小值) 。
  • ThumbPosition :50 (滑塊位置)

按螢幕 右上方的 Blocks, 切換到 Blocks 模式。

選 Slider1,按 「when Slider1.PositionChanged do」 此block。

選 Image1,按 「set Image1.Width to」 此block。
選 Label2,按 「set  Label2.Text to」 此block。


將「set Image1.Width to」和「set  Label2.Text to」 這二個 blocks 插入到 「when Slider1.PositionChanged do」block 內。
依照下面的說明,移動「 get thumbPosition」,放在 「set Image1.Width to」 的後面。
依此類推,移動 「get thumbPosition」,放在 「set  Label2.Text to」 的後面。
下面的 Show Warnings 都是0,表示沒有錯誤。
切換到 「Designer」模式。
Connect /Emulator

如果你沒有先啟動 aiStarter,會有下列的訊息,請先執行 aiStarter此程式。
當初在安裝 aiStarter ,若有在桌面上建立捷徑,可直接選捷徑執行。
若桌面上沒有 aiStarter 此捷徑,那就在「開始功能表/所有應用程式」 找。

 aiStarter  啟動後,再按 Connect /Emulator
若有問題,請先按 Connect / Reset Connection , 再按  Connect /Emulator
執行結果如下:
滑桿最大值用滑鼠 移動祇到   347。

按鍵盤 向下鍵,滑桿右邊會變色。
再按鍵盤 向右鍵,可調到最大值 350。

沒有留言 :

張貼留言