Android移动应用开发-UI控件设计

Android移动应用开发

010302040706认识Android列表与适配器菜单与对话框设计UI控件设计设计用户界面创建Android项目Android本地存储书目录140911BroadcastReceiver与广播通信Service与后台服务设计ContentProvider与应用间数据共享网络连接与管理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()方法中执行，例如：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：设置数字输入法。android:password：以“·”显示密码文本。android:phoneNumber：设置为电话号码的输入方式。4.1.3EditText文本控件设计经常需要对EditText的输入进行监听，例如软键盘Enter键的监听方法，代码如下：mEditText.setOnEditorActionListener(newTextView.OnEditorActionListener(){publicbooleanonEditorAction(TextViewv,intactionId,KeyEventevent){if(actionId==EditorInfo.IME_ACTION_DONE){…returntrue;}returnfalse;}});4.1.3EditText还有对EditText输入的监听，例如：mEditText.addTextChangedListener(newTextWatcher(){@OverridepublicvoidbeforeTextChanged(CharSequences,intstart,intcount,intafter){//s 文本框中改变前的字符串信息//start 文本框中改变前的字符串的起始位置//count 文本框中改变前的字符串改变数量//after 文本框中改变后的字符串与起始位置的偏移量}@OverridepublicvoidonTextChanged(CharSequences,intstart,intbefore,intcount){}@OverridepublicvoidafterTextChanged(Editables){}});4.1.4AutoCompleteTextView和MultiAutoCompleteTextViewAutoCompleteTextView和MultiAutoCompleteTextView控件主要用于完成文本框的自动输入功能，常见的布局属性包括以下几项：android:completionHint：设置出现在下拉列表中的提示标题。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实现代码如下。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支持库实现更好的按钮效果。例如，定义Button样式如下。<stylename="ButtonTheme"parent="@style/Theme.AppCompat.Light.DarkActionBar"><itemname="colorButtonNormal">#FF4081</item><!--正常状态下的颜色--><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是一种开关按钮，其状态只能是“选中”和“未选中”中的一种，并且需要通过android:textOff和android:textOn属性为不同的状态设置不同的显示文本。示例布局文件如下。<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背景来优化显示，如图所示。<?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优化显示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"/><!--限制最大宽度与高度，并且设置调整边界来保持所显示图像的宽高比--><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是一种双状态的按钮，或处于选中状态，或处于未选中状态。RadioButton设计效果如图所示。RadioButton设计效果RadioButton布局的常用属性是android:checked，值为true表示默认选中，值为false表示默认不选中。常用的方法是用isCheck()方法判断RadioButton是否被选中，用setChecked()方法设置RadioButton被选中。RadioGroup常见的用法就是对其内部RadioButton的选中进行监听。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是一种有双状态的特殊按钮，可以选中或不选中。使用方式与RadioButton类似，主要区别在一组

CheckBox

中可以有多个被选中。CheckBox

设计效果如图所示。下面是CheckBox状态监听事件的示例。@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：设置开关控件在关闭状态时显示的文字。android:textOn：设置开关控件在打开状态时显示的文字。android:thumb：设置开关的图片。android:switchMinWidth：开关最小宽度。android:switchPadding：设置开关与文字的空白距离。android:switchTextAppearance：设置文本的风格。android:checked：设置初始选中状态。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一般用在某项延续性工作的进展过程中。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