Recommended
More Related Content
Similar to 多媒體系統05_Android App圖形元件
Similar to 多媒體系統05_Android App圖形元件 (20)
More from Fuzhou University
More from Fuzhou University (20)
多媒體系統05_Android App圖形元件
- 2. 報告大綱-Android App圖形元件 建立Android App Android App Icon Android介面元件 ◦ 圖形顯示 ◦ 文字方塊 ◦ 按鈕、選項按鈕、核取方塊 ◦ 下拉式選單、列舉清單方塊 Android佈局元件 ◦ 佈局元件簡介 ◦ LinearLayout佈局元件 ◦ RelativeLayout佈局元件 2
- 3. 建立Android App 點擊「Start a new Android Studio project」 建立新專案 3
- 4. 建立Android App Application name設定偏好的應用程式名稱 ◦ 本例為「MultimediaSystem」 Company domain設定公司網域或偏好的套 件名稱 ◦ 本例為「mis.nkfust.edu.tw」 Project location設定專案儲存路徑 ◦ 本例為 「C:UsersuserAndroidStudioProjectsMultime diaSystem」 設定完成後，點擊「Next」 4
- 5. 建立Android App 勾選「Phone and Tablet」 點選合適的Android版本，Android設備僅能 向下相容 ◦ 本例為「API 15: Android 4.0.3」 ◦ Android 5.0之設備可執行此應用程式 ◦ Android 3.0之設備無法執行此應用程式 設定完成後，點擊「Next」 5
- 6. 建立Android App 點選預設的專案類型 ◦ 本例為「Empty Activity」 設定完成後，點擊「Next」 6
- 7. 建立Android App Activity Name可設定主頁面的程式檔案名稱 ◦ 預設為「MainActivity」 Layout Name可設定主頁面的佈局介面檔案 名稱 ◦ 預設為「activity_main」 設定完成後，點擊「Finish」即可建立專案 7
- 9. 建立Android App 「appreslayout」路徑下主要放置佈局 介面檔案，例如：「activity_main.xml」 可在檔案名稱連擊連滑鼠左兩下即可開 啟編輯該檔案 預設佈局介面有TextView元件，呈現 「Hello World」字樣 點擊「 」可編輯和執行此應用程式 9
- 12. 建立Android App 開啟和編輯「appresvaluesstrings.xml」 修改app_name所對應用的名稱 ◦ 本例修改為「多媒體系統」 點擊「 」可編輯和執行此應用程式 12
- 15. Android App Icon 修改和設計Android App Icon 本例以「國立高雄第一科技大學」Logo 為例 可連結至學校秘書室網站下載標誌 ◦ 網址： http://www.sec.nkfust.edu.tw/files/11-1006- 1893.php ◦ 點擊「JPG」下載JPG圖檔 15
- 16. Android App Icon 開啟GMIP軟體編輯JPG檔案 點選「 」用以選取相同顏色的區域 16
- 20. Android App Icon 點擊「 」編輯圖檔內容大小 設定「寬度」為「48」 設定「高度」為「48」 點擊「縮放」 20
- 21. Android App Icon 點擊「 」編輯剪裁圖檔大小 設定尺寸為「48」x「48」 點擊鍵盤「Enter」鍵 21
- 35. 圖形顯示 執行畫面 35
- 41. 圖形顯示 執行畫面 41
- 43. 文字方塊 文字方塊類型 43 類型 說明 Plain Text 一般輸入鍵盤，輸入內容時會出現選字提示 Password 一般輸入鍵盤，輸入內容時以實心圓形呈現，並且不會出現選字提示 E-mail 一般輸入鍵盤，輸入內容時不會出現選字提示，可輸入「@」符號 Phone 數字輸入鍵盤，能輸入加號「+」和數字 Multiline Text 一般輸入鍵盤，可以輸入換行符號，顯示多行的文字訊息 Time 數字輸入鍵盤，能輸入冒號「:」和數字 Date 數字輸入鍵盤，能輸入斜線「/」和數字 Number 數字輸入鍵盤，能輸入正整數 Number (Signed) 數字輸入鍵盤，能輸入正整數和負整數 Number (Decimal) 數字輸入鍵盤，能輸入整數和浮點數
- 46. 文字方塊 拖曳「TextView」元件至 ScrollView元件中的LinearLayout 設定ID為「textView_PlainText」 設定text為「Plain Text」 46
- 49. 文字方塊 49 「Plain Text」文字方塊效果 「Password」文字方塊效果 「E-mail」文字方塊效果
- 52. 按鈕、選項按鈕、核取方塊 編輯「appreslayoutactivity_main.xml」 佈局介面檔案 拖曳「AllButton」至下方「Component Tree」 加入Button物件 52
- 61. 下拉式選單 Spinner元件類似Windows作業系統的下拉式清單 一種單選的清單元件，在Android Studio介面設計工具是選「Widgets」區段下的「Spinner」 項目來新增Spinner元件 Spinner元件是透過「entries」屬性指定清單項目的字串陣列資源「@array/陣列名稱】 @array是陣列資源，在「/」後的是陣列名稱，即<string-array>標籤的name屬性值 Spinner元件的常用屬性說明 61 屬性 說明 entries 指定清單項目的字串陣列資源 spinnerMode 指定顯示方式，dialog是使用對話方塊來顯示；dropdown是下拉式清單
- 62. 下拉式選單 編輯「string.xml」中加入<string- array>元素，並設定名稱為 「department」 ◦ <string-array name="department"> ◦ <item>資訊管理系</item> ◦ <item>工業工程與工程管理學系</item> ◦ <item>數位行銷學士學位學程</item> ◦ </string-array> 62
- 64. 下拉式選單 執行畫面 64
- 66. 列舉清單方塊 編輯「string.xml」中加入<string- array>元素，並設定名稱為「city」 ◦ <string-array name="city"> ◦ <item>高雄市</item> ◦ <item>臺北市</item> ◦ <item>新北市</item> ◦ <item>桃園市</item> ◦ <item>臺中市</item> ◦ <item>臺南市</item> ◦ </string-array> 66
- 67. 列舉清單方塊 編輯「layoutanctivity_main.xml」 新增ListView元件至畫面中 ◦ 設定layout_height為「300 dp」 ◦ 設定entries為「@array/city」 67
- 68. 列舉清單方塊 執行畫面 68
- 70. 佈局元件簡介 佈局元件簡報 ◦ 佈局元件是一些看不見的容器物件(ViewGroup物件)，可以幫助我們群組與編排介面元件(View物 件) ◦ 佈局元件是繼承ViewGroup類別的子類別，其主要目的是組織和編排其他佈局或介面元件(Views) ◦ 基本上，活動的使用介面是一棵View和ViewGroup物件組成的樹狀結構 佈局元件 ◦ RelativeLayout佈局元件：專案預設的佈局元件，其編排的介面元件是相對其他介面元件，或貼齊 父佈局元件的邊線，可以幫助我們建立不規則編排的使用介面 ◦ LinearLayout佈局元件：編排的介面元件是一個接著一個排列成水平或垂直一條直線 ◦ TableLayout佈局元件：使用表格欄與列來編排介面元件，每一個介面元件是新增至表格每一列的 TableRow物件 70
- 71. 佈局元件簡介-其他佈局元件和常用屬性 其他佈局元件 ◦ FrameLayout佈局元件：如同堆疊來編排多個介面元件，所有介面元件都是位在左上角同一個位 置，每一個元件如同是一頁圖層 ◦ ConstraintLayout佈局元件：Android Studio 2.2.x版推出的佈局元件，一種進階版的RelativeLayout， 能夠建立自動調整和產生適用不同螢幕尺寸的使用介面 常用屬性 ◦ 在Android介面元件屬性指定尺寸時，除了match_parent和wrap_content常數外，我們還可以指定元 件的實際尺寸 71 單位 說明 dp或dip Desity-independent Pixel簡稱，一英吋實際的螢幕尺寸相當於160dp，這是Android建議使用的尺寸單位 Sp Scale-independent Pixel，類似dp，建議使用在字型尺寸 Pt 一點等於1/72英吋 px 實際螢幕上的點，Android並不建議使用此尺寸單位
- 77. LinearLayout佈局元件 加入LinearLayout (horizontal) LinearLayout (horizontal)佈局元件 提供水平的方式由左而右排列 將學校的TextView和Spinner加入 到LinearLayout (horizontal)佈局元 件 可提供水平排列方式呈現 77
- 81. RelativeLayout佈局元件 常用屬性 81 屬性 說明 layout_toLeftOf、layout_toRightOf 元件是位在基準元件的左方和右方，屬性值是基 準元件的ID屬性值 layout_above、layout_below 元件是位在基準元件的上方和下方，屬性值是基 準元件的ID屬性值 layout_alignLeft、layout_alignRight、layout_alignTop 、layout_alignBottom 元件是否貼對齊基準元件的左、右、上和下方邊 線，屬性值是基準元件的ID屬性值 layout_alignParentLeft、layout_alignParentRight、 layout_alignParentTop、layout_alignParentBottom 元件是否貼對齊佈局元件的左、右、上和下方邊 線，屬性值true表示貼齊 layout_centerVertical、layout_centerHorizontal、 layout_centerInParent 元件是位在垂直正中、水平正中或正中央，屬性 值true表示位在正中