第五堂 計算機app與網站瀏覽app
TRANSCRIPT
![Page 1: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/1.jpg)
第五堂:計算機 APP 與網站瀏覽
APP
柯力中 Jason Ko
Jason的Android 快樂應用程式學習班
![Page 2: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/2.jpg)
課程內容
• Android 的 Layout
• 計算機 APP ( Layout + Button + TextView)
• 網站瀏覽APP (Layout + Intent )
Jason的Android 快樂應用程式學習班
![Page 3: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/3.jpg)
Android 的 Layout
Jason的Android 快樂應用程式學習班
![Page 4: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/4.jpg)
Android 的 Layout 版面
• 一般會用的 Layout 版面為:
1. LinearLayout
2. TableLayout
3. FrameLayout
4. RelativeLayout
Jason的Android 快樂應用程式學習班
![Page 5: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/5.jpg)
LinearLayout
Jason的Android 快樂應用程式學習班
Orientation: Vertical Orientation: Horizontal
• LinearLayout 給的版面是一個個元件依序排列下來的
元件1
元件2
元件3
元件4
元件5
元件1 元件2 元件3
![Page 6: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/6.jpg)
LinearLayout 練習
• 給訂版面的長寬, 用 dp 單位• 給訂版面的比例, 用 weightSum 跟 layout_weight
• 請做出下面的版面配置
p.s 給定 layout_weight 的寬或長要是 0dp
![Page 7: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/7.jpg)
TableLayout
• TableLayout 也是線性排列, 但對於每一行的元件, 可以使用 TableRow的 Tag 來告訴 Compiler 它們在同一行
告訴 compiler 第 0 , 1 , 2 格可伸展
Jason的Android 快樂應用程式學習班
![Page 8: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/8.jpg)
RelativeLayout
• RelativeLayout 可以透過 id 的指定來設置版面, 是版面配置中比較有效率的一個
Jason的Android 快樂應用程式學習班
![Page 9: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/9.jpg)
計算機 APP
Jason的Android 快樂應用程式學習班
![Page 10: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/10.jpg)
計算機 APP
Jason的Android 快樂應用程式學習班
Calculator
/+ - x
Edittext
Button
ActionBar
請輸入數字 1
請輸入數字 2
結果等於
![Page 11: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/11.jpg)
1. 給定元件大小與位置
2. 給定元件 ID
Jason的Android 快樂應用程式學習班
步驟1 畫 Layout
(此為部分程式碼)
![Page 12: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/12.jpg)
Jason的Android 快樂應用程式學習班
步驟2 在 MainActivity 裡宣告
(此為部分程式碼)
宣告:
指向元件:
![Page 13: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/13.jpg)
步驟3 在 MainActivity 裡撰寫 Button 的click事件
(此為部分程式碼)
![Page 14: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/14.jpg)
完整程式碼連結
Jason的Android 快樂應用程式學習班
計算機APP, GitHub:
https://github.com/KosbrotherSchool/Tea
ch_Carculator
![Page 15: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/15.jpg)
注意
• 記得寫程式時, 縮排的工作一定要做好, 可以
善用 Tab 鍵
• 有 bug 時, 先把 bug 除掉再繼續寫
Jason的Android 快樂應用程式學習班
![Page 16: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/16.jpg)
網站瀏覽 APP
Jason的Android 快樂應用程式學習班
![Page 17: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/17.jpg)
網站瀏覽 APP
Jason的Android 快樂應用程式學習班
OpenWeb
前往Button
請輸入網址
EditTextIntent
Open Browser
![Page 18: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/18.jpg)
Intent• Intent 用於 Activity, Service 的啟動, 或是單純的廣
播
• 可以想成是網頁的 Link, 用來連結兩個不同的頁面,
同時可以攜帶一些簡單的資料
• Intent 可分為 explicit 跟 implicit 兩種
explicit intent: 明確指定接收的元件
implicit intent: 未明確指定接收的元件, 可以執行此
動作的 App 都可以爭取執行
Jason的Android 快樂應用程式學習班
![Page 19: 第五堂 計算機App與網站瀏覽app](https://reader031.vdocuments.site/reader031/viewer/2022013115/55a6dc091a28abbf7e8b45b4/html5/thumbnails/19.jpg)
完整程式碼連結
Jason的Android 快樂應用程式學習班
計算機APP, GitHub:
https://github.com/KosbrotherSchool/Tea
ch_WebAPP