模塊2基礎界面設計2.1UI布局界面2.2常用控件2.3對話框2.4項目實戰Android學習路線1.1Android相關知識

學習目標1.1Android相關知識素質目標知識目標素質1.能夠靈活使用布局和組件，設計美觀和符合規范的用戶界面；2.能夠從用戶的角度考慮界面的功能和交互；3.能夠使用資源管理字符串、顏色和圖片；4.能夠將界面布局轉化為視圖。能力目標1.理解View和ViewGroup；2.掌握常用布局的使用方法；3.掌握常用組件的使用方法；4.掌握界面設計的基礎方法；1.提升審美修養；2.增強用戶體驗意識；3.強化精益求精觀念；2.1UI布局界面預習檢查Android常用的布局類型有哪些？Android常用的控件有哪些？知識解析問題導入學以致用課堂小結課后拓展2.1UI布局界面知識點預覽#知識點重點難點應用說明1控件布局屬性√√掌握控件在布局中的屬性，主要包括長度，寬度，對齊，邊緣等2絕對布局√掌握絕對布局的方式以及應用場景3相對布局√掌握相對布局的方式以及應用場景4線性布局√√√掌握線性布局的方式以及應用場景5限制布局√√√掌握限制性布局；輔助線以及Chain布局的方式以及應用場景知識解析問題導入學以致用課堂小結課后拓展2.1UI布局界面項目案例知識點標準身高計算器布局創建布局類型常用控件常見對話框存放路徑線性布局消息對話框創建步驟TextViewEditTextButtonRadioButton知識解析問題導入學以致用課堂小結課后拓展2.1UI布局界面項目案例任務書目標：讓學生掌握Android的界面相關開發技術主要的工作任務劃分為：開發輸入界面。進行事件處理。顯示計算結果。發布到手機。涉及的關鍵技術包括：Activity類的使用布局文件的設計事件的處理消息對話框的使用。知識解析問題導入學以致用課堂小結課后拓展2.1UI布局界面

創建布局在Android程序中界面是通過布局文件設定的，在每個應用程序創建時會默認包含一個主界面布局，該布局位于res/layout目錄中。實際開發中每個應用程序都包含多個界面，而程序默認提供的一個主界面布局無法滿足需求，因此經常會在程序中添加多個布局。問題導入知識解析學以致用課堂小結課后拓展布局的創建-步驟2.1UI布局界面問題導入知識解析學以致用課堂小結課后拓展2.2布局類型布局的類型五種常用布局線性布局相對布局幀布局表格布局絕對布局特點：以水平或垂直方向排列特點：通過相對定位排列特點：開辟空白區域，幀里的控件(層)疊加特點：表格形式排列特點：通過x，y坐標排列問題導入知識解析學以致用課堂小結課后拓展2.2布局類型布局屬性View：基本視圖；所有控件和布局由View繼承過來；View基本屬性和方法可以適用于所有布局和控件；屬性名稱屬性定義android:id視圖組件的編號:@+id/btn_jumpandroid:layout_width視圖的寬度dp具體的dp數值match_parent與上級視圖一樣寬wrap_content與內容一樣寬android:layout_height視圖的高度dp具體的dp數值match_parent與上級視圖一樣高wrap_content與內容一樣寬android:layout_margin視圖與周圍視圖的距離layout_marginTop與上邊視圖距離layout_marginBottom與下邊視圖距離layout_marginLeft與左邊視圖距離layout_marginRight與右邊視圖距離android:minWidth視圖最小寬度android:minHeight視圖最小高度問題導入知識解析學以致用課堂小結課后拓展2.2布局類型布局屬性屬性名稱屬性定義android:background視圖的背景:可以是顏色；也可以是圖片；android:layout_gravity視圖與上級視圖的對齊方式left靠左對齊right靠右對齊top靠上對齊bottom靠下對齊center居中對齊android:gravity視圖中文字與視圖的對齊方式left靠左對齊right靠右對齊top靠上對齊bottom靠下對齊center居中對齊android:visible視圖的可視屬性visible可見invisible不可見，占位置gone消失，不占位置問題導入知識解析學以致用課堂小結課后拓展2.2布局類型布局屬性屬性名稱屬性定義android:padding內部內容與視圖的距離paddingTop視圖邊緣與上邊距離paddingBottom視圖邊緣與下邊距離paddingLeft視圖邊緣與左邊距離paddingRight視圖邊緣與右邊距離屬性名稱屬性定義app:layout_constraint布局限制app:layout_constraintBottom_toBottomOf限制視圖與底部對齊app:layout_constraintEnd_toEndOf視圖邊緣與右邊對齊app:layout_constraintStart_toStartOf限制視圖與左邊對齊app:app:layout_constraintTop_toTopOf限制視圖與頂部對齊問題導入知識解析學以致用課堂小結課后拓展布局屬性屬性名稱屬性定義setLayoutParams設置視圖的布局參數setMinimumWidth設置視圖的最小寬度setMinimumHeight設置視圖的最小高度setBackgroundColor設置視圖的背景顏色setBackgroundDrawable設置視圖的背景圖片setBackgroundResource設置視圖的背景資源setPadding設置視圖邊緣與視圖內容之間的空白距離setVisibility設置視圖的可視類型2.2布局類型問題導入知識解析學以致用課堂小結課后拓展線性布局線性布局（LinearLayout）主要以水平或垂直方式來顯示界面中的控件。當控件水平排列時，顯示順序依次為從左到右，當控件垂直排列時，顯示順序依次為從上到下。<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"></LinearLayout>2.2布局類型問題導入知識解析學以致用課堂小結課后拓展線性布局-注意事項

線性布局：

android:orientation=“horizontal”;代表從左到右排列

android:orientation=“vertical”;代表從上到下排列2.2布局類型問題導入知識解析學以致用課堂小結課后拓展線性布局-注意事項

當控件水平排列時，控件屬性layout_width只能設置為wrap_content（包裹內容讓當前控件根據控件內容大小自動伸縮），否則其余控件會被擠出屏幕右側不顯示。同理，如果控件垂直排列也會出現同樣情況。當控件水平排列時，如果控件未占滿一行，會留有空白區域，這樣既不美觀又浪費空間。此時，可以利用layout_weight屬性解決這個問題，該屬性被稱為權重，通過比例調整布局中所有控件的大小。<Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="2"/>

注意：當控件使用權重屬性時，布局寬度屬性值通常設置為0。2.2布局類型問題導入知識解析學以致用課堂小結課后拓展線性布局-注意事項

我們可以通過設置gravity（元素擺放位置）和layout_gravity（元素相對父控件擺放位置）屬性來解決子元素的擺放問題。layout_gravity是指當前控件在父控件里面的擺放位置，不過需要注意的一點是，父控件設置的gravity的級別要低于子控件設置的layout_gravity。gravity是針對當前控件里面內容的擺放的。如果是容器，則針對的是容器里面子view的擺放；如果是控件，則針對的是控件里面內容的擺放。layout_weight是一個很重要的屬性，簡單來說就是按比例來分配控件占用父控件的大小。2.2布局類型問題導入知識解析學以致用課堂小結課后拓展線性布局-注意事項2.2布局類型問題導入知識解析學以致用課堂小結課后拓展其中gravity屬性是比較常用的，使用它可以控制當前控件在父控件里面的擺放位置。gravity屬性值如表所示。相對布局相對布局（RelativeLayout）是通過相對定位的方式指定控件位置，即以其它控件或父容器為參照物，擺放控件位置。在設計相對布局時要遵循控件之間的依賴關系，后放入控件的位置依賴于先放入的控件。<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="20dp">……..</RelativeLayout>按鈕3按鈕2按鈕1100dp20dp2.2布局類型問題導入知識解析學以致用課堂小結課后拓展

第1類：屬性值為true或者false2.2布局類型問題導入知識解析學以致用課堂小結課后拓展屬性名稱描述layout_centerHrizontal水平居中layout_centerVertical垂直居中layout_centerInparent相對于父控件完全居中layout_alignParentBottom貼緊父控件的下邊緣layout_alignParentLeft貼緊父控件的左邊緣layout_alignParentRight貼緊父控件的右邊緣layout_alignParentTop貼緊父控件的上邊緣layout_alignWithParentIfMissing如果對應的兄弟控件找不到的話，就以父控件作為參照物第2類：屬性值必須為ID的引用名“@id/id-name”2.2布局類型問題導入知識解析學以致用課堂小結課后拓展屬性名稱描述layout_below在某元素的下方layout_above在某元素的的上方layout_toLeftOf在某元素的左邊layout_toRightOf在某元素的右邊layout_alignTop本元素的上邊緣和某元素的的上邊緣對齊layout_alignLeft本元素的左邊緣和某元素的的左邊緣對齊layout_alignBottom本元素的下邊緣和某元素的的下邊緣對齊layout_alignRight本元素的右邊緣和某元素的的右邊緣對齊第3類：屬性值為具體的像素值，如30dip、40dpi2.2布局類型問題導入知識解析學以致用課堂小結課后拓展屬性名稱描述layout_marginBottom離某元素底邊緣的距離layout_marginLeft離某元素左邊緣的距離layout_marginRight離某元素右邊緣的距離layout_marginTop離某元素上邊緣的距離2.2布局類型問題導入知識解析學以致用課堂小結課后拓展<Button

android:layout_alignParentLeft="true"android:text="左上角"/><Button

android:layout_alignParentRight="true"android:text="右上角"/><Button

android:layout_centerInParent="true"android:text="中間"/><Button

android:layout_alignParentBottom="true"android:text="左下角"/><Button

android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:text="右下角"/>相對布局

Android操作系統介紹App2.3項目案例問題導入學以致用知識解析課堂小結課后拓展需求描述：1要制作一個Android操作系統的介紹界面技術要點：1主要使用RelativeLayout進行UI設計在string.xml文件創建字符串資源UI布局設計運行和測試程序123步驟描述：

1.在string.xml文件創建字符串資源2.3項目案例問題導入學以致用知識解析課堂小結課后拓展在UI中，要顯示相關的介紹文字，可以在字符串資源中將這些文字信息添加在資源文件strings.xml中。在控件需要使用到相關文字時，引用對應的字符串資源。<resources>

<stringname="app_name">Android介紹</string><stringname="DetailTitme">什么是Android操作系統</string><stringname="DetailDate">2020-03-27</string><stringname="DetailContent">Android是由Google公司主導開發的......。</string><stringname="BtnReply">回復</string><stringname="BtnRew">轉發</string></resources>

2.UI布局設計2.3項目案例問題導入學以致用知識解析課堂小結課后拓展使用RelativeLayout進行UI設計。UI中包含了圖標、標題、時間、內容及兩個按鈕，其中涉及的TextView、Button、ImageView控件，我們會在后文詳細講解。

3.運行效果2.3項目案例問題導入學以致用知識解析課堂小結課后拓展完成Android操作系統介紹App的UI布局設計后，就可以在模擬器或者手機上運行并查看效果，其運行效果如圖。2.4小結本節主要講解了布局的創建、布局屬性、布局的類型，這部分內容在實際開發中非常重要，基本上每個Android程序都會使用這些內容，因此要求初學者必須熟練掌握，為后面的學習做好鋪墊。問題導入課堂小結知識解析學以致用課后拓展2.5課后拓展?作業要求總結常見的布局類型及特點。常見的布局屬性有哪些？預習作業常用的控件有哪些？

問題導入課后拓展知識解析學以致用課堂小結下節課見模塊2基礎界面設計2.1UI布局界面2.2常用控件2.3對話框2.4項目實戰Android學習路線1.1Android相關知識

學習目標1.1Android相關知識素質目標知識目標素質1.能夠靈活使用布局和組件，設計美觀和符合規范的用戶界面；2.能夠從用戶的角度考慮界面的功能和交互；3.能夠使用資源管理字符串、顏色和圖片；4.能夠將界面布局轉化為視圖。能力目標1.理解View和ViewGroup；2.掌握常用布局的使用方法；3.掌握常用組件的使用方法；4.掌握界面設計的基礎方法；1.提升審美修養；2.增強用戶體驗意識；3.強化精益求精觀念；作業點評總結常見的布局類型及特點。常見的布局屬性有哪些？知識解析問題導入學以致用課堂小結課后拓展預習檢查工匠坊界面常用的控件有哪些？知識解析問題導入學以致用課堂小結課后拓展問題導入知識解析問題導入學以致用課堂小結課后拓展本案例將開發一個BMI體質指數計算App，通過用戶提供身高、體重數據，應用BMI公式計算出該用戶的身體質量指數，并給出相關的健康建議。體質指數（BodyMassIndex，簡稱：BMI）是國際通用的衡量人肥胖程度和健康的重要標準。BMI通過人的體重和身高兩個數值獲得相對客觀的數據，并用這個數據所處范圍衡量身體狀況。BMI=體重÷（身高×身高）（體重單位：千克，身高單位：米）需求描述：1

任務：BMI體質指數計算App問題導入知識解析問題導入學以致用課堂小結課后拓展

任務：BMI體質指數計算AppBMI指數標準需求描述：2控件的分類常用控件TextViewEditTextButtonRadioButtonImageView控件是界面組成的主要元素，是與用戶進行直接交互的。知識解析問題導入學以致用課堂小結課后拓展View類介紹問題導入知識解析學以致用課堂小結課后拓展View類是所有Android控件和容器的父類，它涉及的屬性我們必須要有所了解。View類的常見屬性如表。屬性名稱描述id

控件，對象標識layout_width

寬：x軸，match_parent（匹配父元素）,wrap_content（匹配內容）,數值，單位dplayout_height

高：y軸，同layout_width

gravity

內容，子元素在視圖中的停靠位置layout_gravity

視圖在布局中的停靠位置padding

視圖的內邊距layout_margin

視圖相對父元素的外邊距visibility

可見性，visible,invisible,goneTextView介紹

TextView控件繼承自View類，用于在界面上顯示一段文本信息。它繼承自View類，除了繼承View類的屬性之外，還有自己的屬性。

TextView是Android中常用的組件之一，用于顯示文字。TextView中提供了大量的屬性用于設置TextView的字體大小、字體顏色、字體樣式等。

由于很多控件都是TextView的子類，它們也繼承TextView的屬性，這給應用程序的界面提供了多種顯示組合和樣式。問題導入知識解析學以致用課堂小結課后拓展TextView使用

TextView的屬性可以直接在XML布局文件中設置，也可以在Java應用程序中設置和修改。

例如：

用戶界面的布局文件textview_layout.xml中定義了一個TextView，我們在TextView幾個基本屬性基礎上增加幾個屬性設置，如android:textColor=”#ff0000”設置字體為紅色，android:textSize=“24sp”設置字體為24sp，android:textStyle=”bold”設置字體加粗。屬性名稱描述text

文本內容（字符串或@string/字符串資源）textSize

字號，單位sptextColor

字體顏色minLine最小行數maxLine

最大行數singleLine

是否單行ellipsize省略文字autoLink文本鏈接方式，email,phone,web,map,all問題導入知識解析學以致用課堂小結課后拓展TextView使用問題導入知識解析學以致用課堂小結課后拓展45TextView使用問題導入知識解析學以致用課堂小結課后拓展<TextViewandroid:id="@+id/txtMsg"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="我是一段文本"android:textColor="#F44336"android:textSize="25sp"/>

TextView的使用EditText介紹EditText繼承自TextView，主要用來進行編輯操作，將用戶信息傳遞給Android程序，還可以為EditText控件設置監聽器，用來測試用戶輸入的內容是否合法。

通常使用該控件來設置默認提示文本，限制EditText輸入類型，設置最小行、最多行、單行、多行、自動換行，設置文字間隔，設置英文字母大寫類型，控制EditText四周的間隔距離與內部文字與邊框間的距離，設置EditText獲得焦點，同時彈出小鍵盤。問題導入知識解析學以致用課堂小結課后拓展EditText介紹問題導入知識解析學以致用課堂小結課后拓展屬性名稱描述text

輸入的文本maxLength最大輸入長度textColor

字體顏色inputType軟鍵盤類型，phone,number,textUri,textPassword,numberPassword,textMultiLine，textEmailAddressdigits允許輸入的字符imeOptions輸入法選項editable是否可編輯hint提示信息

EditText

的屬性EditText介紹問題導入知識解析學以致用課堂小結課后拓展

EditText

的屬性49EditText介紹問題導入知識解析學以致用課堂小結課后拓展

EditText

控件的使用50<EditTextandroid:id="@+id/edName"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入"android:inputType="textPersonName"android:maxLines="10"/>Button介紹在Android開發中，Button是常用的控件，用于響應用戶的一系列點擊事件，使程序更加流暢和完整。我們可以在界面xml描述文檔中定義，也可以在程序中創建后加入到界面中，效果是一樣的。但是通常建議在xml文檔中定義，因為一旦界面要改變是話，我們可以直接修改xml文件，而不用修改Java程序，并且在xml中定義層次分明，一目了然。問題導入知識解析學以致用課堂小結課后拓展首先，添加Button控件到XML布局文件中，在布局文件中設置按鈕的一些屬性，如位置，寬高，按鈕上的字，顏色等。比較重要的是要給按鈕一個id號，這是按鈕唯一的名字。這樣在程序中可以通過如下形式獲得按鈕：button=(Button)findViewById(R.id.buttonId);問題導入知識解析學以致用課堂小結課后拓展Button介紹屬性名稱描述android:text按鈕上的文本android:textAllCaps所有英文字母是否進行大寫轉換，默認為trueandroid:onClick 設置點擊事件問題導入知識解析學以致用課堂小結課后拓展

Button

控件的使用53Button介紹<Buttonandroid:id="@+id/btn1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="提交"/>Button響應的四種方式1.在布局文件中添加button的監聽名字

Android:onClick=”buttonOnClick”2.在OnCreate函數中寫

Mybutton=(Button)findViewById(R.id.button1)注意：Button的setOnClickListener優先級比xml中android:onClick高，如果同時設置點擊事件，只有setOnClickListener有效。問題導入知識解析學以致用課堂小結課后拓展Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展該方式通過設置按鈕的onClick屬性來監聽按鈕的單擊操作，需要在activity中建立一個監聽方法，然后通過按鈕的onClick屬性與之關聯。步驟1：在activity中設置方法myClick()，響應按鈕的單擊操作。代碼如下：

方式一Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式一步驟2：設置按鈕的onClick屬性值為方法myClick()，將按鈕與之關聯。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式二該方式通過按鈕的setOnClickListener()方法注冊監聽事件，在監聽事件中創建OnClickListener()，然后自動重寫onClick()。步驟1：在布局文件中拖入Button控件，設置ID為btnclick2。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式二步驟2：為按鈕控件設置監聽類。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式三該方式通過內部類實現OnClickListener接口，并重寫OnClick()方法。步驟1：在布局文件中拖入Button控件，設置ID為btnclick3。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式三步驟2：為按鈕控件設置監聽類。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式三步驟3：使用監聽類。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式四該方式通過在Activity類實現OnClickListener接口，并重寫OnClick()方法。步驟1：在布局文件中拖入Button控件，設置ID為btnclick4。代碼如下：Button響應的四種方式問題導入知識解析學以致用課堂小結課后拓展

方式四步驟2：在Activity類實現OnClickListener接口，重寫onClick()方法。代碼如下：RadioButton介紹RadioButton為單選按鈕，一組RadioButton，只能同時選中一個（單選），單個RadioButton在選中后，通過點擊無法變為未選中，RadioButton在大部分UI框架中默認都以圓形表示。問題導入知識解析學以致用課堂小結課后拓展1、RadioButton表示單個圓形單選框，而RadioGroup是可以容納多個RadioButton的容器。2、每個RadioGroup中的RadioButton同時只能有一個被選中。3、不同的RadioGroup中的RadioButton互不相干。4、通常一個RadioGroup中至少有2個RadioButton。5、通常一個RadioGroup中的RadioButton默認會有一個被選中，并建議將它放在RadioGroup中的起始位置。

RadioButton和RadioGroup的關系RadioButton介紹問題導入知識解析學以致用課堂小結課后拓展RadioButton介紹問題導入知識解析學以致用課堂小結課后拓展RadioButton控件必須和單選框RadioGroup控件一起使用，在RadioGroup控件中放置RadioButton控件，通過setOnCheckedChangeListener()方法來響應按鈕的事件。<RadioGroupandroid:id="@+id/sexgp"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rdman"android:checked="true"android:text="男"/><RadioButtonandroid:id="@+id/rdwomen"android:text="女"/></RadioGroup>

RadioButton的使用RadioButton介紹問題導入知識解析學以致用課堂小結課后拓展

RadioButton的使用CheckBox介紹問題導入知識解析學以致用課堂小結課后拓展

CheckBox控件CheckBox控件是復選框控件，它繼承于Button控件，一般用于多項選中操作。與普通按鈕不同的是，CheckBox多了一個可以選中的功能，可額外指定一個android:checked屬性，該屬性可以指定初始狀態時是否被選中。其實也可以不用指定，默認初始狀態都不被選中。通過setOnCheckedChangeListener()方法來響應按鈕的事件；CheckBox介紹問題導入知識解析學以致用課堂小結課后拓展

CheckBox控件<CheckBoxandroid:id="@+id/ck1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:text="足球"/><CheckBoxandroid:id="@+id/ck2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="籃球"/>CheckBox介紹問題導入知識解析學以致用課堂小結課后拓展

CheckBox控件的使用publicclassCheckBoxActivityextendsAppCompatActivity

implementsCompoundButton.OnCheckedChangeListener//設置監聽事件ck1.setOnCheckedChangeListener(this);//選中事件publicvoidonCheckedChanged(CompoundButtonbuttonView,booleanisChecked){if(isChecked){//ToastToast.makeText(CheckBoxActivity.this,buttonView.getText()+"被選擇",Toast.LENGTH_SHORT).show();}else{Toast.makeText(CheckBoxActivity.this,buttonView.getText()+"取消選擇",Toast.LENGTH_SHORT