這次範例的完成品如下。
這次所有的圖片都放在 google driver、one driver、dropbox、google photo、imgur以及 blogger這六個地方,完全沒有上傳到 app inventor中。所以圖片在載入的時候會比較慢一些。
畫面編排的部份如下。
一個圖片配一個標籤,最下方則是一個圖片更新的按鈕。
式碼的部份沒有什麼很特別的地方,先來介紹一下怎麼取得這些圖片的外鏈。
先介紹 google driver的部份。
圖片上傳到 google driver之後,在圖片的上方點擊滑鼠右鍵,點擊取得連結。
在跳出來的視窗中,我們可以看到圖片的連結,但這不能拿來當外鏈圖片用。
在這裡,我們把圖片的 id給複製一下。圖片 id就是上圖中反藍的部份。
接下來把圖片 id組合成下圖最下方的網址。
組合成這個樣子,https://lh3.googleusercontent.com/u/0/d/圖片id,這樣就是我們需求的格式了。
接著說明 onedrive的部份。
圖片上傳到 one drive之後,點擊一下圖片。
這時候會跳出來一個新的視窗。
我們點擊一下檢示原始影像按鈕。
這時候,又會再跳出一個沒有工具列的視窗。
在圖片上,點擊滑鼠右鍵,點擊複製圖片位置。
然後把這個網址複製到記事本上,刪除網址最後面的 ?psid=x。
接著是 dropbox的外鏈圖片的取法。
滑鼠移動到右方,僅限您的字樣會變成複製連結。我們點一下之後,就會自動的把連結複製下來。
同樣的,我們開啟記事本。修改一下連結的格式。
把網址修改成這樣,https://dl.dropboxusercontent.com/s/9fuvak6s1v21sbr/31.png
imgur的外鏈取得方式。首先我們先上傳圖片。
在跳出來的視窗中的圖片上按滑鼠右鍵,點擊複製圖片位址。
google photo的外鏈取得方法。
點擊圖片之後,按下分享按鈕。
點擊建立連結。
再點擊建立連結。
複製這一個連結。
打開這一個 embed google photo這個網站,把我們剛才複製下來的連結貼到對話框中,點擊 generate。
複製這一個連結。
它會長的像這樣……很長一串。
最後來介紹 blogger的外鏈圖片取得。
發布一個新文章,然後把圖片都上傳上去之後,點擊文頁頁面的檢示按鈕。
點擊一下圖片。
在圖片上方按滑鼠右鍵,點擊複製圖片位址。
這裡要注意一下,要複製的圖片位置這裡,下方是有幻燈片的。
不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!