第五堂：計算機 APP 與網站瀏覽

APP

柯力中 Jason Ko

Jason的Android 快樂應用程式學習班

課程內容

• Android 的 Layout

• 計算機 APP ( Layout + Button + TextView)

• 網站瀏覽APP (Layout + Intent )

Jason的Android 快樂應用程式學習班

Android 的 Layout

Jason的Android 快樂應用程式學習班

Android 的 Layout 版面

• 一般會用的 Layout 版面為：

1. LinearLayout

2. TableLayout

3. FrameLayout

4. RelativeLayout

Jason的Android 快樂應用程式學習班

LinearLayout

Jason的Android 快樂應用程式學習班

Orientation: Vertical Orientation: Horizontal

• LinearLayout 給的版面是一個個元件依序排列下來的

元件1

元件2

元件3

元件4

元件5

元件1 元件2 元件3

LinearLayout 練習

• 給訂版面的長寬, 用 dp 單位• 給訂版面的比例, 用 weightSum 跟 layout_weight

• 請做出下面的版面配置

p.s 給定 layout_weight 的寬或長要是 0dp

TableLayout

• TableLayout 也是線性排列, 但對於每一行的元件, 可以使用 TableRow的 Tag 來告訴 Compiler 它們在同一行

告訴 compiler 第 0 , 1 , 2 格可伸展

Jason的Android 快樂應用程式學習班

RelativeLayout

• RelativeLayout 可以透過 id 的指定來設置版面, 是版面配置中比較有效率的一個

Jason的Android 快樂應用程式學習班

計算機 APP

Jason的Android 快樂應用程式學習班

計算機 APP

Jason的Android 快樂應用程式學習班

Calculator

/+ - x

Edittext

Button

ActionBar

請輸入數字 1

請輸入數字 2

結果等於

1. 給定元件大小與位置

2. 給定元件 ID

Jason的Android 快樂應用程式學習班

步驟1 畫 Layout

(此為部分程式碼)

Jason的Android 快樂應用程式學習班

步驟2 在 MainActivity 裡宣告

(此為部分程式碼)

宣告：

指向元件：

步驟3 在 MainActivity 裡撰寫 Button 的click事件

(此為部分程式碼)

完整程式碼連結

Jason的Android 快樂應用程式學習班

計算機APP, GitHub:

https://github.com/KosbrotherSchool/Tea

ch_Carculator

注意

• 記得寫程式時, 縮排的工作一定要做好, 可以

善用 Tab 鍵

• 有 bug 時, 先把 bug 除掉再繼續寫

Jason的Android 快樂應用程式學習班

網站瀏覽 APP

Jason的Android 快樂應用程式學習班

網站瀏覽 APP

Jason的Android 快樂應用程式學習班

OpenWeb

前往Button

請輸入網址

EditTextIntent

Open Browser

Intent• Intent 用於 Activity, Service 的啟動, 或是單純的廣

播

• 可以想成是網頁的 Link, 用來連結兩個不同的頁面,

同時可以攜帶一些簡單的資料

• Intent 可分為 explicit 跟 implicit 兩種

explicit intent: 明確指定接收的元件

implicit intent: 未明確指定接收的元件, 可以執行此

動作的 App 都可以爭取執行

Jason的Android 快樂應用程式學習班

完整程式碼連結

Jason的Android 快樂應用程式學習班

計算機APP, GitHub:

https://github.com/KosbrotherSchool/Tea

ch_WebAPP