Android移動應用開發(fā)-UI控件設計

Android移動應用開發(fā)

010302040706認識Android列表與適配器菜單與對話框設計UI控件設計設計用戶界面創(chuàng)建Android項目Android本地存儲書目錄140911BroadcastReceiver與廣播通信Service與后臺服務設計ContentProvider與應用間數(shù)據(jù)共享網(wǎng)絡連接與管理05Activity與Fragment08131210線程間的通信與異步機制Android性能分析與測試

UI控件設計4.1文本控件設計4.2按鈕控件設計4.3圖像控件設計章目錄4.4選擇控件和開關控件設計4.5進度條控件設計4.1.1控件設計基本步驟Android中控件的使用一般遵循以下步驟。①在布局中添加控件，并給控件添加android:id屬性，例如：<TextViewandroid:id="@+id/message"…/>②在Activity中綁定控件，一般在Activity生命周期的onCreate()方法中執(zhí)行，例如：privateTextViewmTextView;@OverridepublicvoidonCreate(BundlesavedInstanceState){…mTextView=(TextView)findViewById(R.id.message);}4.1.1控件設計基本步驟③定義控件的響應事件，如為TextView定義單擊事件：mTextView.setText("HelloAndroid…");mTextView.setOnClickListener(newOnClickListener(){publicvoidonClick(Viewarg0){Toast.makeText(getApplicationContext(),"HelloWorld",Toast.LENGTH_SHORT).show();}});4.1.2TextViewTextView常見布局屬性有以下幾項：android:text：設置顯示文本。android:textColor：設置文本顏色。android:textSize：設置文本大小，推薦度量單位為sp。android:textStyle：設置字形，包括bold、italic等，可以設置多個，用“|”分隔。android:typeface：設置文本字體，必須是常量值normal、sans、serif和monospace之一。android:ems：設置寬度為n個字符。android:singleLine：設置單行顯示。⑧android:ellipsize：設置當文本過長時，該控件如何顯示。4.1.2TextView下面是TextView布局的一個示例。<LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/text_view_id"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="@string/hello"/></LinearLayout>4.1.2TextViewTextView常見的用法就是通過getText()方法和setText()方法獲取或設置TextView的文本。例如：publicclassMainActivityextendsAppCompatActivity{protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);finalTextViewhelloTextView=(TextView)findViewById(R.id.text_view_id);helloTextView.setText(R.string.user_greeting);}}4.1.3EditTextEditText是一個用于文本輸入的控件。EditText常見布局屬性還有以下幾項：android:hintText：顯示文字提示信息。android:digits：設置允許輸入哪些字符，如0～9、.、+、-、*、/、%、\、n、(、)等。android:capitalize：設置英文字母大寫類型。android:editable：設置是否可編輯。android:inputMethod：為文本指定輸入法，如com.google.android.inputmethod.pinyin。android:numeric：設置數(shù)字輸入法。android:password：以“·”顯示密碼文本。android:phoneNumber：設置為電話號碼的輸入方式。4.1.3EditText文本控件設計經(jīng)常需要對EditText的輸入進行監(jiān)聽，例如軟鍵盤Enter鍵的監(jiān)聽方法，代碼如下：mEditText.setOnEditorActionListener(newTextView.OnEditorActionListener(){publicbooleanonEditorAction(TextViewv,intactionId,KeyEventevent){if(actionId==EditorInfo.IME_ACTION_DONE){…returntrue;}returnfalse;}});4.1.3EditText還有對EditText輸入的監(jiān)聽，例如：mEditText.addTextChangedListener(newTextWatcher(){@OverridepublicvoidbeforeTextChanged(CharSequences,intstart,intcount,intafter){//s 文本框中改變前的字符串信息//start 文本框中改變前的字符串的起始位置//count 文本框中改變前的字符串改變數(shù)量//after 文本框中改變后的字符串與起始位置的偏移量}@OverridepublicvoidonTextChanged(CharSequences,intstart,intbefore,intcount){}@OverridepublicvoidafterTextChanged(Editables){}});4.1.4AutoCompleteTextView和MultiAutoCompleteTextViewAutoCompleteTextView和MultiAutoCompleteTextView控件主要用于完成文本框的自動輸入功能，常見的布局屬性包括以下幾項：android:completionHint：設置出現(xiàn)在下拉列表中的提示標題。android:completionThreshold：設置用戶至少輸入多少個字符才會顯示提示。android:dropDownHorizontalOffset：下拉列表與文本框之間的水平偏移。默認與文本框左對齊。android:dropDownHeight：下拉列表的高度。android:dropDownWidth：下拉列表的寬度。android:dropDownVerticalOffset：垂直偏移量。4.1.4AutoCompleteTextView和MultiAutoCompleteTextViewAutoCompleteTextView示例布局如下。<AutoCompleteTextViewandroid:id="@+id/id_autotextView"android:layout_width="match_parent"android:layout_height="wrap_content"android:completionThreshold="3"android:hint="輸入關鍵詞"/>4.1.4AutoCompleteTextView和MultiAutoCompleteTextViewAutoCompleteTextView示例布局如下。<AutoCompleteTextViewandroid:id="@+id/id_autotextView"android:layout_width="match_parent"android:layout_height="wrap_content"android:completionThreshold="3"android:hint="輸入關鍵詞"/>4.1.4AutoCompleteTextView和MultiAutoCompleteTextView實現(xiàn)代碼如下。publicclassMainActivityextendsAppCompatActivity{privateAutoCompleteTextViewacTextView=null;privateString[]res={"beijing1","beijing2","beijing3","shanghai1","shanghai2","guangzhou1","shenzhen"};@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);acTextView=(AutoCompleteTextView)findViewById(R.id.id_autotextView);eventsViews();}privatevoideventsViews(){ArrayAdapter<String>adapter=newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,res);acTextView.setAdapter(adapter);}}顯示效果4.1文本控件設計4.2按鈕控件設計4.3圖像控件設計章目錄4.4選擇控件和開關控件設計4.5進度條控件設計4.2.1ButtonButton是一個按鈕控件，用來響應用戶的單擊事件。例如，在布局中添加Button控件。<Buttonandroid:id="@+id/id_btn"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button"/>在Activity中設置Button的單擊事件。mButton.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){//點擊按鈕的響應事件處理}});4.2.1Button例如，定義一個btn_default.xml，代碼如下。<selectorxmlns:android="/apk/res/android"><itemandroid:drawable="@drawable/btn_default_normal"android:state_enabled="true"android:state_window_focused="false"/><itemandroid:drawable="@drawable/btn_default_disabled"android:state_enabled="false"android:state_window_focused="false"/><itemandroid:drawable="@drawable/btn_default_pressed"android:state_pressed="true"/><itemandroid:drawable="@drawable/btn_default_focused"android:state_enabled="true"android:state_focused="true"/><itemandroid:drawable="@drawable/btn_default_normal"android:state_enabled="true"/><itemandroid:drawable="@drawable/btn_default_disabled_focused"android:state_focused="true"/><itemandroid:drawable="@drawable/btn_default_disabled"/></selector>4.2.1Button然后在Button的布局屬性中使用android:background屬性來設置Drawable資源，例如：<Buttonandroid:id="@+id/btnOne"android:layout_width="match_parent"android:layout_height="64dp"android:background="@drawable/btn_default"android:text="按鈕"/>在Android5.0后，可以基于MaterialDesign支持庫實現(xiàn)更好的按鈕效果。例如，定義Button樣式如下。<stylename="ButtonTheme"parent="@style/Theme.AppCompat.Light.DarkActionBar"><itemname="colorButtonNormal">#FF4081</item><!--正常狀態(tài)下的顏色--><itemname="colorControlHighlight">#22000000</item><!--覆蓋色，按下的顏色--></style>4.2.1Button然后，定義按鈕布局如下。<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"android:theme="@style/ButtonTheme"><Buttonstyle="@style/Widget.AppCompat.Button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通"android:textColor="#DDFFFFFF"/><Buttonstyle="@style/Widget.AppCompat.Button.Small"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="小的"android:textColor="#DDFFFFFF"/><Buttonstyle="@style/Widget.AppCompat.Button.Borderless"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="透明的背景"android:theme="@style/Theme.AppCompat.Light"/></LinearLayout>按鈕效果4.2.2ToggleButtonToggleButton是一種開關按鈕，其狀態(tài)只能是“選中”和“未選中”中的一種，并且需要通過android:textOff和android:textOn屬性為不同的狀態(tài)設置不同的顯示文本。示例布局文件如下。<ToggleButtonandroid:id="@+id/id_toggleBtn"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="20dp"android:textOff="關"android:textOn="開"/>代碼如下。mToggleButton.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener(){publicvoidonCheckedChanged(CompoundButtonbuttonView,booleanisChecked){if(isChecked){//開關按鈕打開的事件處理}else{//打開按鈕關閉時的事件處理}}});4.2.2ToggleButton還可以使用圖標生成Drawable背景來優(yōu)化顯示，如圖所示。<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="/apk/res/android"><itemandroid:state_checked="false"android:drawable="@mipmap/off"/><itemandroid:state_checked="true"android:drawable="@mipmap/on"/></selector>Drawable資源定義如下。ToggleButton優(yōu)化顯示4.1文本控件設計4.2按鈕控件設計4.3圖像控件設計章目錄4.4選擇控件和開關控件設計4.5進度條控件設計4.3.1ImageViewImageView是一個用于顯示圖像的控件。ImageView常見布局屬性有以下兩項。android:src：設置ImageView的圖像源。android:adjustViewBounds：設置圖像是否保持寬高比。<!--正常的圖像--><ImageViewandroid:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5px"android:src="@mipmap/pic"/><!--限制最大寬度與高度，并且設置調(diào)整邊界來保持所顯示圖像的寬高比--><ImageViewandroid:id="@+id/imageView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5px"android:adjustViewBounds="true"android:maxHeight="200px"android:maxWidth="200px"android:src="@mipmap/pic"/>ImageView常用的方法是通過getDrawable()方法獲取Drawable，通過setImageBitmap()、setImageDrawable()和setImageResource()方法設置ImageView的顯示圖像。4.3.2ImageSwitcherImageSwitcher是Android中控制圖片展示效果的一個控件，常與Gallery結合使用。ImageSwitcher的重要方法有以下幾個。setImageDrawable()：繪制圖片。setImageResource()：設置圖片資源庫。setImageURI()：設置圖片地址。publicclassMainActivityextendsAppCompatActivity{privateImageSwitchermImageSwitcher;privateLinearLayoutmLinearLayout;privateint[]mImageSmall=newint[]{R.mipmap.android_1,R.mipmap.android_2,R.mipmap.android_3,R.mipmap.android_4,R.mipmap.android_5,R.mipmap.android_6};privateint[]mImage=newint[]{R.mipmap.android1,R.mipmap.android2,R.mipmap.android3,R.mipmap.android4,R.mipmap.android5,R.mipmap.android6};4.3.2ImageSwitcher@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLinearLayout=(LinearLayout)findViewById(R.id.linear_layout);mImageSwitcher=(ImageSwitcher)findViewById(R.id.image_switcher);mImageSwitcher.setFactory(newViewFactory(){@OverridepublicViewmakeView(){ImageViewimageView=newImageView(MainActivity.this);returnimageView;}});mImageSwitcher.setInAnimation(this,android.R.anim.fade_in);mImageSwitcher.setOutAnimation(this,android.R.anim.fade_out);mImageSwitcher.setImageResource(mImage[0]);for(inti=0;i<mImageSmall.length;++i){mLinearLayout.addView(getView(i));}}4.3.2ImageSwitcherprivateViewgetView(finalinti){ImageViewmImageView=newImageView(this);mImageView.setImageResource(mImageSmall[i]);mImageView.setId(i);mImageView.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){mImageSwitcher.setImageResource(mImage[i]);Toast.makeText(MainActivity.this,"您選擇了第"+(v.getId()+1)+"張圖片",Toast.LENGTH_SHORT).show();}});returnmImageView;}}運行效果任務4.1設計相冊大圖輪播界面【任務介紹】1．任務描述參照相冊大圖輪播界面，使用ImageSwitcher控件，設計相冊大圖輪播界面。2．運行結果本任務運行結果如圖所示。運行效果4.1文本控件設計4.2按鈕控件設計4.3圖像控件設計章目錄4.4選擇控件和開關控件設計4.5進度條控件設計4.4.1RadioButton與RadioGroupRadioButton是一種雙狀態(tài)的按鈕，或處于選中狀態(tài)，或處于未選中狀態(tài)。RadioButton設計效果如圖所示。RadioButton設計效果RadioButton布局的常用屬性是android:checked，值為true表示默認選中，值為false表示默認不選中。常用的方法是用isCheck()方法判斷RadioButton是否被選中，用setChecked()方法設置RadioButton被選中。RadioGroup常見的用法就是對其內(nèi)部RadioButton的選中進行監(jiān)聽。radioGroup.setOnCheckedChangeListener(newRadioGroup.OnCheckedChangeListener(){@OverridepublicvoidonCheckedChanged(RadioGroupgroup,intcheckedId){switch(checkedId){caseR.id.radioButton_id1:break;…}}});4.4.1RadioButton與RadioGroup下面的布局展示了在進行性別選擇時的界面設計，代碼如下。<RadioGroupandroid:id="@+id/radioGroup"android:layout_width="wrap_content"android:layout_height="wrap_content"android:contentDescription="性別"><RadioButtonandroid:id="@+id/radioMale"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:text="男"></RadioButton><RadioButtonandroid:id="@+id/radioFemale"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="女"></RadioButton></RadioGroup>4.4.2CheckBoxCheckBox是一種有雙狀態(tài)的特殊按鈕，可以選中或不選中。使用方式與RadioButton類似，主要區(qū)別在一組

CheckBox

中可以有多個被選中。CheckBox

設計效果如圖所示。下面是CheckBox狀態(tài)監(jiān)聽事件的示例。@OverridepublicvoidonCheckedChanged(CompoundButtonbuttonView,booleanisChecked){intid=buttonView.getId();switch(id){caseR.id.id_c1:if(isChecked){…}break;…default:break;}}4.4.3SwitchSwitch是在Android4.0以后推出的開關控件。Switch的常見屬性包括以下幾項。android:typeface：設置字體類型。android:track：設置開關的軌跡圖片。android:textOff：設置開關控件在關閉狀態(tài)時顯示的文字。android:textOn：設置開關控件在打開狀態(tài)時顯示的文字。android:thumb：設置開關的圖片。android:switchMinWidth：開關最小寬度。android:switchPadding：設置開關與文字的空白距離。android:switchTextAppearance：設置文本的風格。android:checked：設置初始選中狀態(tài)。android:splitTrack：是否設置一個間隙，讓滑塊與底部圖片分隔（API21及以上）。android:showText：設置是否顯示開關上的文字（API21及以上）。4.4.3SwitchSwitchCompat控件的用法與Switch控件的用法基本一致。下面的布局示例展示了Switch和SwitchCompat的用法。<Switchandroid:id="@+id/switch1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/switch_tv"android:layout_marginTop="10dp"android:switchMinWidth="40dp"android:switchPadding="10dp"android:textOff="開"android:textOn="關"android:thumb="@drawable/thumb_selctor"android:track="@drawable/track_selctor"android:typeface="normal"/><android.support.v7.widget.SwitchCompatandroid:id="@+id/switch_compat"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/switch_compat_tv"android:layout_marginTop="10dp"android:switchMinWidth="40dp"android:switchPadding="10dp"android:typeface="normal"/>Switch和SwitchCompat設計效果4.1文本控件設計4.2按鈕控件設計4.3圖像控件設計章目錄4.4選擇控件和開關控件設計4.5進度條控件設計4.5.1ProgressBarProgressBar一般用在某項延續(xù)性工作的進展過程中。Android中有兩種樣式的進度條——圓形進度條（默認）與長形進度條，如圖所示。下面是一個ProgressBar的布局示例。ProgressBar的兩種進度條<ProgressBarandroid:id="@+id/determinateBar"style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="wrap_content"android:layout_height="wrap_content"android:progress="25"/>4.5.2SeekBarSe