1. 程式人生 > >Android 常用佈局及基本UI控制元件

Android 常用佈局及基本UI控制元件

一、Android學習API指南:【瞭解】

1. 應用的組成部分   App Components

1.1. 應用的基本原理    App Fundamentals

1.2. Activity      Activities

1.2.1. 片段    Fragments

1.2.2. 載入器     Loaders

1.2.3. 任務和返回堆    Tasks and Back Stack

1.3. Service服務   Services

1.3.1. 繫結服務     Bound Services

1.3.2. AIDL   Android Interface Definition Language 

1.4. 內容提供器    Content Providers

1.4.1. 內容提供器基礎   Content Providers Basics

1.4.2. 建立一個內容提供器     Creating a Content Provider

1.4.3. 日曆提供器    Calendar Provider

1.4.4. 通訊錄提供器   Contact Provider

1.5. 意圖和意圖過濾器    Intents and Intents Filters

1.6. 程序和執行緒    Process and Threads 

1.7. 許可權系統    Permissions

1.8. 視窗小部件    App Widgets

1.9. Android清單    Android Manifest

2. 使用者介面     User Interface

2.1. 概述    Overview

2.2. 佈局    Layout

2.2.1. 線形佈局    Linear Layout

2.2.2. 相對佈局    Relative Layout

2.2.3. 列表檢視    ListView

2.2.4. 網格檢視    GridView

2.3. 輸入控制元件   Input Controls

2.3.1. 按鈕    Buttons

2.3.2. 文字區域    Text Fields   

2.3.3. 複選框    Checkboxes

2.3.4. 單選按鈕   Radio Buttons

2.3.5. 開關按鈕   Toggle Buttons

2.3.6. 下拉列表   Spinners

2.3.7. 選擇器    Pickers

2.4. 輸入事件   Input Events

2.5. 選單   Menus

2.6. 動作條   Action Bar

2.7. 設定     Settings

2.8. 對話方塊   Dialogs

2.9. 狀態通知    Notifications

2.10. Toast通知   Toasts   

2.11. 搜尋   Search

2.11.1. 建立一個搜尋介面    Creating a Search Interface

2.11.2. 增加當前搜尋提醒  Adding Recent Query Suggestions

2.11.3. 增加個性化提醒   Adding Custom Suggestions

2.11.4. 搜尋配置   Searchable Configuration

2.12. 拖放操作    Drag and Drop

2.13. 可訪問性    Accessibility

2.13.1. 應用程式的可訪問性   Making Applications Accessible

2.13.2. 構建可訪問性服務   Building Accessibility Services

2.14. 風格和主題   Styles and Themes

2.15. 自定義控制元件   Custom Components

3. 應用程式資源   App Resources

3.1. 概述   Overview

3.2. 提供的資源   Providing Resources

3.3. 對資源的訪問   Accessing Resources

3.4. 執行時變化的處理   Handling Runtime Changes

3.5. 本地化   Localization

3.6. 資源型別   Resource Types

3.6.1. 動畫   Animation

3.6.2. 狀態顏色列表    Color State List

3.6.3. 圖形處理類資源   Drawable

3.6.4. 佈局   Layout

3.6.5. 選單   Menu

3.6.6. 字串   String

3.6.7. 樣式    Style

3.6.8. 其他型別   More Types

4. 動畫和圖形    Animation  and Graphics

4.1. 概述   Overview

4.2. 屬性動畫   Property Animation

4.3. 補間動畫   View Animation

4.4. 幀動畫    Drawable Animation

4.5. 畫布和繪製   Canvas and Drawables

4.6. OpenGL    OpenGL  ES

4.7. 硬體加速   Hardware Acceleration

5. 高效能運算   Computation

5.1. RenderScript程式設計   RenderScript 

5.2. RenderScript程式設計進階    Advanced RenderScript

5.3. 執行時API說明    Runtime API Reference

6. 多媒體和照相機     Media and Camera

6.1. 媒體播放    Media Playback

6.2. 支援的媒體格式    Supported Media Formats

6.3. 音訊捕獲    Audio Capture

6.4. JET引擎    JetPlayer

6.5. 照相機      Camera

7. 定位和感測器    Location and Sensors

7.1. 定位和地圖    Location and Maps

7.2. 定位策略    Location Strategies

7.3. 感測器概述    Sensors Overview

7.4. 手勢感測器    Motion Sensors

7.5. 位置感測器    Position Sensors

7.6. 環境感測器    Environment Sensors

8. 通訊   Connectivity

8.1. 藍芽   Bluetooth

8.2. NFC通訊   NFC

8.2.1. NFC基礎   NFC Basics

8.2.2. NFC進階   Advanced NFC

8.3. Wi-FI直連  Wi-Fi 2P

8.4. USB通訊  USB

8.4.1. 附件模式 Accessory

8.4.2. 主機模式  Host

8.5. SIP協議   SIP

9. 文字輸入法   Text and Input

9.1. 複製和貼上    Copy and Input

9.2. 建立一個輸入法    Creating an IME

9.3. 拼寫檢查器    Spelling Checker

10. 資料儲存   Data Storage

10.1. 儲存選項   Storage Options

10.2. 資料備份   Data Backup

10.3. 應用程式安裝位置   App install Locaiton

11. 系統管理員   Administration

11.1. 硬體管理   Device  Policies

12. web應用   Web Apps

12.1. 概述    Overview

12.2. web應用的螢幕適配   Targeting Screens from Web Apps

12.3. 利用webview構建web應用   Building Web Apps in WebView

12.4. 除錯web應用   Debugging Web Apps

12.5. web應用的優化   Best Practices for Web Apps 

13. 更好的策略

13.1. 一致性(相容性)  Compatibility

13.2. 支援多螢幕   Supporting Multiple Screens

13.2.1. 適配指定螢幕    Distributing to Specific Screens

13.2.2. 螢幕相容模式    Screen Compatibility Mode

13.3. 支援平板和手機   Supporting Tablets and Handsets

14. Google提供的服務  Google Services 

14.1. 應用程式內部付費機制

14.2. 應用程式內部付費機制概述 

14.3. 如何使用應用程式付費服務 

14.4. 訂閱機制 

14.5. 安全與設計 

14.6. 測試應用程式付費服務 

14.7. 應用程式付費機制的管理 

14.8. 應用程式付費的相關API 

14.9. 應用程式許可機制

14.10. 許可機制概述 

14.11. 設定許可機制 

14.12. 在應用中增加許可 

14.13. 許可機制API 

14.14. Google軟體商店服務 

14.15. 在Google Play中加過濾器 

14.16. 多APK支援 

14.17. 對APK附加檔案的服務 

14.18. Google雲訊息服務

14.19. 如何使用google雲服務 

14.20. 架構概述 

14.21. 演示教程 

14.22. Google雲服務進階 

14.23. 資訊遷移 

二、佈局的介紹:

1、在4.0以前版本中一共有五種佈局,都是ViewGroup的子類。分別是AbsoluteLayout、RelativeLayoutLinearLayoutFrameLayout、TableLayout。而TableLayout是LinearLayout的子類。(中文分別是:絕對佈局、相對佈局、線性佈局、幀佈局、表格佈局)。

2、在2.2作業系統中將AbsoluteLayout過期。而目前TableLayout也逐漸少用。

3、在4.0之後又新增GridLayout。(GridLayout最經典的案例是計算器介面)

總之,Android中一共有六種佈局。目前推薦使用RelativeLayoutLinearLayout、GridLayout三種佈局。

三、View類的常用xml屬性:

(一)、類結構:

java.lang.Object

   ↳  android.view.View

(二)、View及其子元素常用屬性:(各種佈局及控制元件的共同屬性)

  1. android:id
  2. android:background 
  3. android:onClick     為該控制元件的單擊事件繫結監聽器
  4. android:padding    設定控制元件四周的填充區域
  5. android:visibility    設定該控制元件是否可見(invisible/visible/gone
  6. android:alpha        設定該元件透明度(0-1之間的數值)
  7. android:layout_height      子元件的佈局高度
  8. android:layout_width        子元件的佈局寬度
  9. android:layout_margin     設定子元件的外邊距

四、LinearLayout:

(一)、概念:線性佈局控制其中的控制元件或元件橫向或縱向排列。線上性佈局佈局中,每一行或每一列只能放單獨一個控制元件。線性佈局不會換行。當控制元件排列到窗體邊緣,後面的控制元件就被隱藏,而不會顯示出來。

線性佈局的預設方向是水平方向(Horizontal),還有一個選項是vertical。

(二)、LinearLayout的常用屬性:

1.android:orientation     定義佈局內控制元件或元件的排列方式

可選項:vertical 、 horizontal

2.android:layout_width    定義控制元件的寬度

可選項:fill_parent / match_parent/ wrap_content/絕對數值

備註:fill_parent / match_parent的效果完全一致,都是填充整個父控制元件。但是自2.2版本開始推薦使用match_parent 。wrap_content指的是該控制元件的寬度正好包裹內容物。

3.android:layout_height    定義控制元件的高度

可選項:fill_parent / match_parent/ wrap_content/絕對數值

備註:fill_parent / match_parent的效果完全一致,都是高度填充整個父控制元件。wrap_content指的是該控制元件的高度正好包裹內容物。

4.android:id   設定控制元件的id。這樣就可以在R.java中自動生成相應的值,在程式中通過findViewById就可以呼叫。

設定id的格式為:android:id = "@+id/id的名字"

5.android:background     設定控制元件的背景顏色或背景圖片

例如:android:background="#ffffff"

          android:background="@drawable/圖片名稱"

【備註:】

顏色有RGB顏色格式和ARGB格式。RGB是紅綠藍三原色。而ARGB是帶alpha的三原色,即有透明度的三原色。

#FFFFFF 代表白色

#000000  黑色

#FFFFFFFF   完全不透明

#00FFFFFF   完全透明

#88FFFFFF   半透明

6.android:layout_weight    設定控制元件的權重。即各控制元件在水平或者垂直方向上平均分配。

備註:如果是水平方向設定權重,要將android:layout_width設定為0dp,如果是垂直方向上使用權重,要將android:layout_height設定為0dp。否則權重容易受到高度或寬度的干擾而出現偏差。

7.android:gravity   該屬性用來控制該View的內容物的位置。

如果該屬性是定義在佈局節點中,則該佈局中所有控制元件的位置都受到這個屬性的控制。

如果該屬性出現在Button、TextView、EditText等控制元件中,則用來控制這些控制元件上的文字的位置。

可選項有:top、bottom、left、right、center_vertical、fill_vertical 、 center、fill等等。

【備註:】本屬性與android:layout_gravity不同。

8.android:layout_gravity   該屬性用於設定控制元件相對於容器的對齊方式。

可選項有:top、bottom、left、right、center_vertical、center_horizontal 、fill_vertical 、 center、fill等等。

這些可選項中不是適用於每一種佈局。在垂直線性佈局中,android:gravity為bottom不起作用;而水平線性佈局中,android:gravity為right不起作用。

【備註:】而本屬性是android:layout_gravity屬性,與 android:gravity 屬性不同。

 

(三)、LinearLayout的特有屬性:【重新歸納:去除公共屬性後的特有屬性

1、android:orientation    佈局管理器內元件的排列方式

2、android:gravity    設定佈局管理器內元件的對齊方式

3、android:weightSum

 

(四)、 LinearLayout 子元素的特有屬性:

1、android:layout_weight    子元素在 LinearLayout 中所佔的權重

2、android:layout_gravity     子元素在 LinearLayout 中的對齊方式

 

五、RelativeLayout:【掌握

(一)、概念:指按著控制元件之間的相對位置來進行佈局。

(二)、RelativeLayout特有屬性:

1、android:gravity    設定佈局容器內子控制元件的對齊方式    

2、android:ignoreGravity    設定佈局管理器內哪個控制元件不受gravity屬性的影響

(三)、RelativeLayout子元素的特有屬性:LayoutParams

    A、第一組:指兄弟控制元件之間的相對位置。該組屬性的值是另一個控制元件的id。

  1. layout_toRightOf      該控制元件在哪個控制元件的右側
  2. layout_toLeftOf        該控制元件在哪個控制元件的左側
  3. layout_above           該控制元件在哪個控制元件的上側
  4. layout_below            該控制元件在哪個控制元件的下側

    B、第二組:指兄弟控制元件之間的對齊關係。該組屬性的值是另一個控制元件的id。

  1. layout_alignRight      該控制元件與哪個控制元件的右對齊
  2. layout_alignLeft        該控制元件與哪個控制元件的左對齊
  3. layout_alignTop        該控制元件與哪個控制元件的頂對齊
  4. layout_alignBottom   該控制元件與哪個控制元件的底對齊

    C、第三組:指控制元件與父佈局之間的對齊關係。該組屬性的值是true或者false。

  1. layout_alignParentRight               該控制元件與父佈局控制元件的右對齊嗎?
  2. layout_alignParentLeft                 該控制元件與父佈局控制元件的左對齊嗎?
  3. layout_alignParentTop                 該控制元件與父佈局控制元件的頂端對齊嗎?
  4. layout_alignParentBottom            該控制元件與父佈局控制元件的底部對齊嗎?
  5. layout_centerInParent                  該控制元件位於父佈局控制元件的中心位置嗎?
  6. layout_centerVertical                    該控制元件位於父佈局控制元件的垂直中心位置嗎?
  7. layout_centerHorizontal                該控制元件位於父佈局控制元件的水平中心位置嗎?

 

六、GridLayout:網格佈局

(一)、GridLayout佈局屬性:

1、android:alignmentMode

屬性說明:設定佈局的對齊模式。可以取以下值:

alignBounds -- 對齊子檢視邊界。

alignMargins -- 對齊子檢視邊距。

 

2、android:columnCount

屬性說明:GridLayout的最大列數

 

3、android:rowCount

屬性說明:GridLayout的最大行數

 

4、android:orientation

屬性說明:GridLayout中子元素的佈局方向。有以下取值:

horizontal -- 水平佈局。

vertical -- 豎直佈局。

 

5、android:columnOrderPreserved

屬性說明: 設定該網格佈局是否保留列序號。預設是true。

 

6、android:rowOrderPreserved

屬性說明: 設定該網格佈局是否保留行序號。預設是true。

 

7、android:useDefaultMargins

屬性說明: 設定GridLayout使用預設的邊距。預設值是false。

 

(二)、GridLayout子元素的屬性:

1、android:layout_column

屬性說明: 顯示該控制元件的列。例如,android:layout_column="0",表示在第1列顯示該控制元件;android:layout_column="1",表示在第2列顯示該控制元件。

 

2、android:layout_row

屬性說明: 該控制元件所在行。例如,android:layout_row="0",表示在第1行顯示該控制元件;android:layout_row="1",表示在第2行顯示該控制元件。它和 android:layout_column類似。

 

3、android:layout_columnSpan

屬性說明: 列合併。即該控制元件所佔的列數。例如,android:layout_columnSpan="2",表示該控制元件佔2列。

 

4、android:layout_rowSpan

屬性說明: 行合併。即該控制元件所佔的行數。例如,android:layout_rowSpan="2",表示該控制元件佔2行。

 

5、android:layout_gravity

屬性說明:該控制元件的佈局方式。選項值:

  • top                      -- 控制元件置於容器頂部,不改變控制元件的大小。
  • bottom                -- 控制元件置於容器底部,不改變控制元件的大小。
  • left                     -- 控制元件置於容器左邊,不改變控制元件的大小。
  • right                   -- 控制元件置於容器右邊,不改變控制元件的大小。
  • center_vertical     -- 控制元件置於容器豎直方向中間,不改變控制元件的大小。
  • fill_vertical          -- 如果需要,則往豎直方向延伸該控制元件。
  • center_horizontal -- 控制元件置於容器水平方向中間,不改變控制元件的大小。
  • fill_horizontal      -- 如果需要,則往水平方向延伸該控制元件。
  • center                -- 控制元件置於容器中間,不改變控制元件的大小。
  • fill                     -- 如果需要,則往水平、豎直方向延伸該控制元件。
  • clip_vertical        -- 垂直剪下,剪下的方向基於該控制元件的top/bottom佈局屬性。若該控制元件的gravity是豎直的:若它的gravity是top的話,則剪下該控制元件的底部;若該控制元件的gravity是bottom的,則剪下該控制元件的頂部。
  • clip_horizontal     -- 水平剪下,剪下的方向基於該控制元件的left/right佈局屬性。若該控制元件的gravity是水平的:若它的gravity是left的話,則剪下該控制元件的右邊;若該控制元件的gravity是  right的,則剪下該控制元件的左邊。
  • start                  -- 控制元件置於容器的起始處,不改變控制元件的大小。
  • end                   -- 控制元件置於容器的結束處,不改變控制元件的大小。

 

七、Android UI控制元件及UI元件:

(一)、控制元件名稱:【標紅色的為常用的】

  1. TextView        文字檢視
  2. EditText         文字編輯框
  3. Button            按鈕
  4. ImageView、Gallery   影象檢視、畫廊(建議過期)
  5. ImageButton    圖片按鈕
  6. ToggleButton 、Switch    開關按鈕、開關
  7. RadioButton    單選按鈕
  8. CheckBox       多選框
  9. Spinner           下拉列表
  10. AutoCompleteTextView   自動完成文字框
  11. ProgressBar    進度條
  12. SeekBar          拖動條
  13. RatingBar        星級評分條
  14. TimePickerDatePicker   時間選擇器、日期選擇器
  15. AnalogClock、DigitalClock    模擬時鐘、數字時鐘
  16. Dialog(AlertDialogProgressDialogTimePickerDialogDatePickerDialog)提示對話方塊、進度對話方塊、時間選擇對話方塊、日期選擇對話方塊
  17. ListView、GridView        列表檢視【最重要的UI元件】、 網格檢視 
  18. ScrollView      滾動檢視
  19. ExpandableListView   可展開列表檢視
  20. WebView        網頁檢視
  21. SearchView    搜尋框
  22. TabHost         書籤選項卡
  23. Notification 、Toast         通知 、 吐司(短時提醒)    
  24. Menu(OptionMenu /SubMenu、ContextMenu)    選單(選項選單、上下文選單)
  25. ImageSwitcher、TextSwitcher   、   ViewPager 影象切換器、文字切換器
  26. ActionBar        動作導航條

 

八、基本控制元件:——TextView:

(一)、TextView類結構:

java.lang.Object

   ↳ android.view.View

    ↳ android.widget.TextView

 

(二)、TextView 常用屬性:

1、andorid:text   設定文字的內容

2、 android:textColor     設定文字的顏色

3、 android:textSize       設定文字的字型大小(sp)

4、andorid:height          設定文字的高度,以畫素為單位

5、 android:width            設定文字的寬度,以畫素為單位

6、 android:inputType     設定文字的型別。例如是普通文字,還是email,password,數字等等。

7、 android:singleLine     設定文字是否是單行顯示。

8、android:gravity     設定文字框內文字的對齊方式。可選項有:top、bottom、left、right、center、fill、center_vertical、center_horizontal、fill_horizontal等等。這些屬性值也可以同時指定,各屬性值之間用豎線隔開。例如right|bottom

9、android:drawableLeft    用於在文字框左側繪製圖片。該屬性值通過“@drawable/圖片檔名”來設定。

10、android:drawableRight    用於在文字框左側繪製圖片。該屬性值通過“@drawable/圖片檔名”來設定。

11、android:drawableTop    用於在文字框左側繪製圖片。該屬性值通過“@drawable/圖片檔名”來設定。

12、android:drawableBottom   用於在文字框左側繪製圖片。該屬性值通過“@drawable/圖片檔名”來設定。

13、android:autoLink   給指定的文字增加可單擊的超連結。可選項為:none、web、email、phone、map和all。

        多個選項之間使用“|”分隔,也可以使用all

14、android:hint    設定當文字框內文字內容為空時,預設顯示的提示性文字。

 

【補充:】

1、android:textAllCaps="true"     設定所有字母都大小

2、android:ellipsize="end"           文字過長,設定省略號。可選項:start , end ,middle,marquee

  • android:ellipsize="start" 省略號在開頭        
  • android:ellipsize="middle" 省略號在中間        
  • android:ellipsize="end" 省略號在結尾        
  • android:ellipsize="marquee" 跑馬燈顯示

       【備註:】要實現跑馬燈效果。要同時具有以下屬性。

  •     android:ellipsize="marquee" 
  •     android:singleLine="true"  
  •     android:focusable="true" 
  •     android:focusableInTouchMode="true" 
  •     android:marqueeRepeatLimit="marquee_forever"

 

 

九、基本控制元件:——EditText:

(一)、 EditText 類結構:

java.lang.Object

   ↳ android.view.View

    ↳ android.widget.TextView

      ↳ android.widget.EditText

 所以 EditText 繼承了TextView的所有屬性。

 

(二)、android:inputType的可選項:

  1. android:inputType="textPersonName
  2. android:inputType="textPassword
  3. android:inputType="numberPassword"      只可以輸入數字
  4. android:inputType="textEmailAddress
  5. android:inputType="phone"      只允許輸入數字,括號等特殊符號,不可以輸入字母。
  6. android:inputType="textPostalAddress"   
  7. android:inputType="time
  8. android:inputType="date
  9. android:inputType="number

 

十、基本控制元件:——Button:

(一)、Button類結構:

java.lang.Object

   ↳ android.view.View

     ↳ android.widget.TextView

       ↳ android.widget.Button


 所以Button繼承了TextView的所有屬性。

 

【特別補充:】sp、dp、dip、dpi 、 pt、px等單位的區別?【重點

  1. dpi    dpi指畫素密度。dots per inch  ,即每英寸內畫素點的個數。它不是表示長度的單位。
    • 在android中認為:低(120dpi),中(160dpi),高(240dpi),超高(320dpi)。隨著技術的增長,實際dpi已經超出這個定義。
  2. dip    dimension independent pixels  ,即與裝置無關的畫素。目前這個單位已經被dp所取代,而不建議使用dip。
  3. dp     與dip的概念一樣。不過dp已經取代了dip。在Android中用來表示非文字大小的尺寸。例如:外邊距、內填充等。
    • px = dp * (dpi / 160)
    • 3.7寸螢幕,解析度320*480手機上,正好1px = 1dp。
  4. sp      scale  independent  pixel  ,即與縮放比例無關的畫素。在android中常用來表示文字大小。
  5. px      表示畫素。因為同樣是200px,但是在不同手機下顯示的大小是不同的。
  6. pt      point磅。1磅=1/74英寸
  • xlarge 螢幕至少:960dp x 720dp 
  • large 螢幕至少 :640dp x 480dp 
  • normal 螢幕至少 :480dp x 320dp 
  • small 螢幕至少 :426dp x 320dp
  • 總之:dp是用來定義非文字的尺寸,sp用來定義文字大小。px只用於產生一條一畫素的分割線時使用。