1、Android移動應(yīng)用開發(fā)基礎(chǔ)教程講授：XXXXX第3章 UI設(shè)計本章主要內(nèi)容：布局通用UI組件消息通知對話框菜單ListViewRecyclerView3.1布局 布局是Android應(yīng)用程序的界面定義。布局中的所有界面元素，都是視圖（View）或視圖組（ViewGroup）對象。一個布局首先是一個視圖組對象，然后在視圖組對象中添加子視圖組對象或者視圖對象。本節(jié)主要內(nèi)容：視圖和視圖組布局的定義方法線性布局LinerLayout相對布局RelativeLayout幀布局FrameLayout3.1.1 視圖和視圖組視圖對象用于在屏幕上繪制可與用戶交互的界面元素。一個視圖占據(jù)一塊矩形屏幕區(qū)域，并

2、通過屬性設(shè)置來渲染此區(qū)域。視圖區(qū)域也可設(shè)置是否可見、是否可獲得焦點，也可處理區(qū)域中發(fā)生的事件（用戶觸摸、拖動等等）。在Android中，View類是所有用于設(shè)計界面組成元素的基類，Button、CheckBox、ExitView、ImageView、ProgressBar、TextView以及其他的UI組件，都是View類的子類或子類的派生類。視圖組是一種特殊的視圖，它不具有可見性，而是一種容器。在視圖組中可包含視圖組和視圖。ViewGroup類是View類的一個子類，它又是各種布局類的基類。常用的布局類有LinearLayout（線性布局）、RelativeLayout（相對布局）和Fram

3、eLayout（幀布局）類等。3.1.2 布局的定義方法可通過兩種方法來定義布局：XML定義和代碼定義布局的XML定義是使用Android的XML詞匯，以文本的方式在快速設(shè)計UI布局及其包含的界面元素。3.1.3 線性布局LinerLayoutLinerLayout是一個視圖組，它按照垂直或水平方式按順序排列內(nèi)部的視圖或視圖組對象。線性布局中，每行或每列中只允許有一個子視圖。android:gravity：設(shè)置內(nèi)部組件的顯示位置。 android:orientation：設(shè)置內(nèi)部組件的排列方向，常量horizontal表示水平排列，vertical（默認值）表示垂直排列。android:bac

4、kground：設(shè)置一個drawable資源作為背景。android:id：設(shè)置布局ID. android:padding：設(shè)置所有邊距的統(tǒng)一值android:paddingBottom：設(shè)置底部邊距android:paddingLeft：設(shè)置左邊距android:paddingRight：設(shè)置右邊距android:paddingTop：設(shè)置頂部邊距3.1.4 相對布局RelativeLayoutRelativeLayout是一個視圖組，它按照相對位置來排列各個子視圖。在使用相對布局時，子視圖默認位于左上角，可使用下列屬性來控制子視圖的位置：android:layout_alignParent

5、Top：設(shè)置為true時，子視圖的上邊框與父視圖的上邊框?qū)R。android:layout_centerVertical：設(shè)置為true時，子視圖在垂直方向上的位于父視圖中間位置。android:layout_centerHorizontal：設(shè)置為true時，子視圖在水平方向上的位于父視圖中間位置。android:layout_below：設(shè)置一個控件ID，子視圖位于該控件下方。android:layout_toRightOf：設(shè)置一個控件ID，子視圖位于該控件右側(cè)。android:layout_toLeftOf：設(shè)置一個控件ID，子視圖位于該控件左側(cè)。3.1.5 幀布局FrameLayou

6、t幀布局是一種特殊的布局，它以層疊的方式顯示布局中的多個控件，最后添加的控件位于最前面。默認情況下，控件位于幀布局的左上角?？赏ㄟ^控件的android:layout_gravity屬性控制其位置。android:layout_gravity屬性可設(shè)置為下列值：top：控件位于布局頂部。bottom：控件位于布局底部。單獨使用時等價于“l(fā)eft|bottom”。left：控件位于布局左側(cè)。right：控件位于布局右側(cè)。單獨使用時等價于“top|right”。center：控件位于布局中心。center_vertical：控件位于垂直方向上的中間位置。單獨使用時等價于“l(fā)eft| center_v

7、ertical”。center_horizontal：控件位于水平方向上的中間位置。單獨使用時等價于“top| center_ horizontal”。3.2通用UI組件本節(jié)主要內(nèi)容：文本視圖（TextView）按鈕（Button）文本字段（EditText、AutoCompleteTextView）復(fù)選框（CheckBox）單選按鈕（RadioButton）切換按鈕（ToggleButton）下拉列表（Spinner）日期選取器（DatePicker）時間選取器（TimePicker）拖動條（SeekBar）3.2.1 文本視圖（TextView）可使用下列屬性設(shè)置文本顯示效果：androi

8、d:typeface：設(shè)置字體。Android默認支持4中內(nèi)置字體：normal、sans、serif和monospace。android:textSize：設(shè)置字號。android:textColor：設(shè)置顏色。android:textStyle：設(shè)置文本樣式，可設(shè)置為bold、italic或bolditalic。3.2.2 按鈕（Button、ImageButton）通常，需要為按鈕添加Click事件監(jiān)聽器。一種方法是在android:onClick屬性中設(shè)置Click事件監(jiān)聽器。例如：其中的ClickButton1是在代碼中定義的一個方法，且方法必須是public和void類型。例如：p

9、ublic void ClickButton1(View view) TextView tv1= (TextView) findViewById(R.id.textView); tv1.setText(單擊按鈕Button1);另一種為按鈕添加Click事件監(jiān)聽器的方法是在代碼執(zhí)行setOnClickListener()方法。例如：protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button

10、 bt2=(Button) findViewById(R.id.button2); bt2.setOnClickListener(new View.OnClickListener() Override public void onClick(View v) TextView tv1= (TextView) findViewById(R.id.textView); tv1.setText(單擊按鈕Button2); ); 3.2.3 文本字段 （EditText、AutoCompleteTextView）文本字段控件用于接收用戶輸入，可使用android:inputType屬性定義各種輸入行為準

11、則。常用android:inputType屬性值如下：text：允許輸入各種文本。textMultiLine：允許輸入多行文本。textEmailAddress：只允許輸入Email地址。textPassword：用于輸入密碼。number：只允許輸入數(shù)字。phone：用于輸入電話號碼。datetime：用于輸入日期時間。EditTextAutoCompleteTextView第1步：在布局文件中添加AutoCompleteTextView控件。例如：第2步：在資源文件res/values/strings.xml中定義提供自動完成提示的字符串數(shù)組資源。例如： cable china Chine

12、se Check 第3步：為AutoCompleteTextView綁定提供自動完成提示的適配器。例如：AutoCompleteTextView act=(AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);String selects = getResources().getStringArray(R.array.select_array);ArrayAdapter adapter =new ArrayAdapter(this, android.R.layout.simple_list_item_1, selects);a

13、ct.setAdapter(adapter);3.2.4 復(fù)選框（CheckBox android:onClick屬性為復(fù)選框綁定了Click事件監(jiān)聽器，處理復(fù)選框Click事件。例如，下面的代碼實現(xiàn)在單擊復(fù)選框時，改變文本視圖的樣式：private boolean checked1;public void ClickCheckBox1(View view) checked1 = (CheckBox) view).isChecked(); ChangeTextViewStyle(); private boolean checked2; public void ClickCheckBox2(Vi

14、ew view) checked2 = (CheckBox) view).isChecked(); ChangeTextViewStyle(); ChangeTextViewStyle() TextView tv1= (TextView) findViewById(R.id.textView); Typeface tf= tv1.getTypeface(); int style=0; if(checked1) style=1; if(checked2)style=3; else if(checked2)style=2; tv1.setTypeface(tf,style);3.2.5 單選按鈕（

15、RadioButton） android:onClick屬性為單選按鈕綁定Click事件監(jiān)聽器。例如在顏色顏色時更改TextView控件顏色：public void ClickRadio(View view) TextView tv1= (TextView) findViewById(R.id.textView); switch(view.getId() case R.id.radioButton1: tv1.setTextColor(Color.rgb(0,0,255); break; case R.id.radioButton2: tv1.setTextColor(Color.rgb(25

16、5,0,0); break; case R.id.radioButton3: tv1.setTextColor(Color.rgb(0,255,0); 3.2.6 切換按鈕（ToggleButton）在代碼中可調(diào)用setOnCheckedChangeListener()方法為切換按鈕綁定事件監(jiān)聽器，處理其狀態(tài)變化。例如，下面的代碼利用切換按鈕設(shè)置或清除布局背景：ToggleButton toggle = (ToggleButton) findViewById(R.id.toggleButton); toggle.setOnCheckedChangeListener(new CompoundBu

17、tton.OnCheckedChangeListener() public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) LinearLayout layout=(LinearLayout)findViewById(R.id.activity_main); if (isChecked) layout.setBackgroundResource(R.drawable.back); /為布局設(shè)置背景圖片 else layout.setBackgroundResource(0);/清除布局背景 );3.2.7

18、微調(diào)框（Spinner）微調(diào)框也可稱為下拉列表，它提供一組預(yù)定選項供用戶選擇。默認情況下，微調(diào)框只顯示當前選中項。微調(diào)框與AutoCompleteTextView類似，但微調(diào)框不提供輸入功能，只在被觸摸時展開下拉列表。下面的代碼為布局添加一個微調(diào)框：（本節(jié)實例項目：源代碼03LearnUIComponent2）3.2.8 圖片視圖（ImageView）圖片視圖控件用于在界面中顯示圖片。使用圖片視圖控件時，需提供準備圖片，并將圖片放在資源文件夾drawable中。例如，下面的代碼為布局添加一個圖片視圖控件：（本節(jié)實例項目：源代碼03 LearnUIComponent2）3.2.9 進度條（Pro

19、gressBar）進度條控件通常用于表示程序正在后臺處理數(shù)據(jù)，避免用戶枯燥的等待。例如，下面的代碼為布局添加一個進度條：（本節(jié)實例項目：源代碼03LearnUIComponent2）進度條有四種樣式：大圖標（progressBarStyleLarge）中等圖標（默認樣式，progressBarStyle）小圖標（progressBarStyleSmall）水平條（progressBarStyleHorizontal）3.2.10 拖動條（SeekBar拖動條可拖動滑塊的位置來獲得標識的數(shù)值。例如，下面的代碼為布局添加一個拖動條，并將拖動條最大值設(shè)置為100：（本節(jié)實例項目：源代碼03Learn

20、UIComponent2）3.3消息通知在Android應(yīng)用中，可采用Toast或Notification兩種方式向用戶提供消息通知。本節(jié)主要內(nèi)容：使用Toast使用Notification 3.3.1 使用ToastToast是在應(yīng)用運行期間，通過類似于對話框的方式向用戶顯示消息提示。Toast只占用很少的屏幕，并會在一段時間后自動消失。例如，下面的代碼來創(chuàng)建并顯示Toast通知：Context context=getApplicationContext();/獲得應(yīng)用上下文String text=這是一個較長時間的Toast;/準備Taost中顯示的文本int duration=Toast

21、.LENGTH_LONG; /用于設(shè)置Toast顯示時間Toast toast=Toast.makeText(context,text,duration);/生成Toast對象toast.show();/顯示Toast通知3.3.2 使用NotificationNotification通知首先在通知區(qū)域（也稱狀態(tài)欄。）中顯示通知圖標，用戶展開抽屜式通知欄時，查看通知的詳細信息。圖3-19顯示了一個通知區(qū)域圖3-20顯示了抽屜式通知欄。一個通知通常由圖標、標題和內(nèi)容等組成。創(chuàng)建一個簡單的通知通常包含下列步驟。第一步：創(chuàng)建NotificationCompat.Builder對象。例如：（本節(jié)實例項

22、目：源代碼03LearnNotification）NotificationCompat.Builder builder= new NotificationCompat.Builder(MainActivity.this);第二步：調(diào)用NotificationCompat.Builder對象方法設(shè)置通知相關(guān)內(nèi)容。例如：builder.setSmallIcon(R.drawable.smallico);/設(shè)置通知小圖標builder.setContentTitle(嗨，你有一個新消息！);/設(shè)置通知標題builder.setContentText(你已經(jīng)學(xué)會了創(chuàng)建Notification了。);/

23、設(shè)置通知內(nèi)容builder.setAutoCancel(true);/設(shè)置自動刪除通知第三步：創(chuàng)建在抽屜式通知欄中單擊通知時啟動活動的Intent（如果僅僅需要顯示通知內(nèi)容，不提供通知單擊響應(yīng)，則該步驟可以省略。）。例如：Intent resultIntent= new Intent(MainActivity.this,NotificationActivity.class);TaskStackBuilder stackBuilder=TaskStackBuilder.create(MainActivity.this);stackBuilder.addParentStack(Notificati

24、onActivity.class);stackBuilder.addNextIntent(resultIntent);PendingIntent resultPendingIntent=stackBuilder.getPendingIntent(0,PendingIntent.FLAG_UPDATE_CURRENT);builder.setContentIntent(resultPendingIntent);第四步：創(chuàng)建Notification對象。例如：Notification notification=builder.build();第五步：創(chuàng)建NotificationManager對象顯

25、示通知。例如：NotificationManager manager= (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);manager.notify(NOTIFICATION_ID,notification);3.4對話框 對話框用于在程序運行期間顯示一些重要信息，或者用對話框與用戶交互。對話框置頂于界面最前面，屏蔽其他所有控件的交互能力。本節(jié)主要內(nèi)容： AlertDialogProgressDialogDatePickerDialogTimePickerDialog3.4.1 AlertDialogAl

26、ertDialog在對話框中顯示警告提示信息，用戶可在對話框中選擇取消或確認操作。例如，下面的代碼用于顯示AlertDialog：（本節(jié)實例項目：源代碼03LearnDialog）3.4.2 ProgressDialogProgressDialog與AlertDialog類似，都可彈出一個對話框，并置頂屏蔽其他控件的交互能力。ProgressDialog可在對話框中顯示一個進度條。例如，下面的代碼用于顯示ProgressDialog。（本節(jié)實例項目：源代碼03LearnDialog）public void showProgressDialog(View view) ProgressDialog

27、 progressDialog=new ProgressDialog(MainActivity.this);/創(chuàng)建對話框 progressDialog.setTitle(這是一個進度條對話框);/設(shè)置標題 progressDialog.setMessage(請耐心等待，正在處理數(shù)據(jù));/設(shè)置消息 progressDialog.setCancelable(true);/設(shè)置可取消 progressDialog.show();/顯示對話框 3.4.3 DatePickerDialogDatePickerDialog用于顯示日期選取對話框，定義OnDateSetListener監(jiān)聽器，實現(xiàn)onDat

28、eSet()方法可獲得在對話框中選取的日期。例如，下面的代碼使用DatePickerDialog顯示日期選取對話框，并將選取的日期顯示在TextView中。（本節(jié)實例項目：源代碼03LearnDialog）3.4.4 TimePickerDialogTimePickerDialog用于顯示時間選取對話框，定義OnTimeSetListener監(jiān)聽器，實現(xiàn)onTimeSet()方法可獲得在對話框中選取的時間。例如，下面的代碼使用TimePickerDialog顯示時間選取對話框，并將選取的時間顯示在TextView中。（本節(jié)實例項目：源代碼03LearnDialog）3.5菜單在手機和平板等設(shè)備

29、中，因為空間有限，不再像PC一樣為應(yīng)用程序配置菜單欄。Android提供了一種隱藏的菜單，只在需要的時候展示出來。在圖3-25所示的活動標題欄右側(cè)，顯示了一個三點符號，這就是菜單按鈕。點擊菜單按鈕可展開活動的菜單。菜單按鈕3.6ListView ListView控件用于創(chuàng)建列表，比如聯(lián)系人、QQ聊天記錄等都可用列表來實現(xiàn)。ListView允許用戶通過上下滑動的方式將屏幕之外的內(nèi)容滾動到屏幕內(nèi)。本節(jié)主要內(nèi)容： ListView簡單用法自定義ListView列表項布局處理ListView單擊事件3.6.1 ListView簡單用法為布局添加ListView控件非常簡單。例如：（本節(jié)實例項目：源代碼

30、03LearnListView）首先在字符串資源文件string.xml中定義字符串數(shù)組。例如： 使用Android Studio環(huán)境 Android Studio實戰(zhàn) Android編程權(quán)威指南 然后在代碼中用該數(shù)組創(chuàng)建ArrayAdapter，并綁定到ListView。例如：protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); String data = getResources().getS

31、tringArray(R.array.LearnListViewData); ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, data); ListView listView=(ListView)findViewById(R.id.listView); listView.setAdapter(adapter);3.6.2 自定義ListView列表項布局普通ListView每個列表項只顯示一段文本，通過自定義，可以讓列表項顯示更豐富的內(nèi)容。下面的實例通過自定義，在列表項中顯示圖

32、書封面圖片和書名。具體操作步驟如下：（本節(jié)實例項目：源代碼03LearnListView2）3.6.3 處理ListView單擊事件要使ListView相應(yīng)用戶單擊事件，需要調(diào)用setOnItemClickListener()方法綁定OnItemClickListener監(jiān)聽器。例如，修改上節(jié)實例中的MainActivity.java，為ListView綁定監(jiān)聽器。代碼如下：protected void onCreate(Bundle savedInstanceState) ListView listView=(ListView)findViewById(R.id.listView); listView.setAdapter(adapter); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() Override public void onItemClick(AdapterView parent, View view, int position, long id) Book book=bookList.get(position); T