Android UI布局与控件（二）

Android UI布局与控件(二)

一、View类的常用xml属性：【了解】

①.Android中所有的UI(用户界面)元素都是使用View和ViewGroup对象建立的

②.View是一个可以将一些信息绘制在屏幕上并与用户产生交互的对象

③.ViewGroup是一个包含多个的View和ViewGroup的容器，用来定义UI布局。

④.Android提供了一系列的View和ViewGroup的子类，开发者可以灵活地组合使用它们来完成界面布 局、界 面元素绘制和用户交互等工作

⑤.开发者还可以选择性地继承一些系统提供的View，来自定义View，把自己定义的界面元素显示给用户。

UI视图结构

(一)、类结构：

java.lang.Object

android.view.View

(二)、View及其子元素常用属性：(各种布局及控件的共同属性)

android:id

android:background背景图或背景色

android:onClick 为该控件的单击事件绑定监听器

android:padding 设置控件四周的填充区域

android:visibility 设置该控件是否可见

android:alpha 设置该组件透明度

android:layout_height 子组件的布局高度

android:layout_width 子组件的布局宽度

android:layout_margin 设置子组件的外边距 ( 三 ).Android中UI布局的嵌套【掌握】

Android的UI开发使用层次模型来完成，一般都是在一个ViewGroup中嵌套多层ViewGroup，每一层中含有任意数目的View。

二、Android UI控件：

(一)、控件名称：【标红色的为常用的】

TextView 文本视图

EditText 文本编辑框

Button 按钮

ImageView、Gallery 图像视图、画廊(建议过期)

ImageButton 图片按钮

ToggleButton 、Switch 开关按钮、开关

RadioButton 单选按钮

CheckBox 多选框

Spinner 下拉列表

AutoCompleteTextView 自动完成文本框

ProgressBar 进度条

SeekBar 拖动条

RatingBar 星级评分条

TimePicker、DatePicker 时间选择器、日期选择器

AnalogClock、DigitalClock 模拟时钟、数字时钟

Dialog(AlertDialog、ProgressDialog、TimePickerDialog、DatePickerDialog)提示对话框、进度对话框、时间选择对话框、日期选择对话框

ListView、GridView 列表视图【最重要的UI组件】、 网格视图

ScrollView 滚动视图

ExpandableListView 可展开列表视图

WebView 网页视图

SearchView 搜索框

TabHost 书签选项卡

Notification 、Toast 通知、吐司(短时提醒)

Menu(OptionMenu /SubMenu、ContextMenu) 菜单(选项菜单、上下文菜单)

ImageSwitcher、TextSwitcher 图像切换器、文本切换器

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。

14、android:hint 设置当文本框内文本内容为空时，默认显示的提示性文字。

( 三 ).TextView显示富文本:

// 将HTML的界面设置为TextView的内容

tv.setText(Html.fromHtml(sb.toString()));

// 使TextView内部的超链接可以响应用户的点击

tv.setMovementMethod(LinkMovementMethod.getInstance());

四、基本控件：——EditText【掌握】

(一)、 EditText类结构：

java.lang.Object

? android.view.View

? android.widget.TextView

? android.widget.EditText

(二)、android:inputType的可选项：

android:inputType="textPersonName"

android:inputType="textPassword"

android:inputType="numberPassword"

android:inputType="textEmailAddress"

android:inputType="phone"

android:inputType="textPostalAddress"

android:inputType="time"

android:inputType="date"

android:inputType="number"

(三)、EditText常用方法：

1、setText()2、getText()

五、基本控件：——Button【掌握】

(一)、Button类结构：

java.lang.Object

? android.view.View

? android.widget.TextView

? android.widget.Button

所以Button继承了TextView的所有属性。

六、Android事件处理的概述【掌握】

(一)、概念：

在Android中，我们可以通过事件处理使UI与用户互动(UI Events)。

具体形式则是以事件监听器(event listener)的方式來“监听”用户的动作。

Android提供了非常良好的UI事件处理机制。View是绘制UI的类，每个View对象都可以向Android注册一个事件监听器。每个事件监听器都包含一个回调方法(callback method)，这个回调方法(callback method)主要的工作就是回应或处理用户的操作。

(二)、Android UI事件处理的两套机制：

1、基于监听和回调的事件处理机制(event listener)：

就是为Android中的控件绑定特定的事件监听器。一旦该控件监听到有相应的动作发生，则该动作会触发事件监听器，而该监听器会调用内部的回调方法做出相应的响应。事件监听器的核心就是它内部包含的回调方法。

2、另外一种UI事件的机制为事件处理器(event handler)：

event handler与event listener是不一样的处理机制。后续课程中会讲到多线程的Handler、Looper消息传递机制。

(三)、Android种常用的事件监听器及其回调方法(callback method)：

View.OnClickListener ： onClick() 单击事件

View.OnLongClickListener : onLongClick() 长按事件

View.OnFocusChangeListener ：onFocusChange() 焦点改变事件

View.OnKeyListener : onKey() 按键事件

View.OnTouchListener : onTouch() 触摸屏事件

View.OnCreateContextMenuListener： onCreateContextMenu() 创建上下文菜单事件

【备注：】请同学们在这里增添新学到的事件监听类：

1、RadioGroup.OnCheckedChangeListener 单选按钮组的勾选项改变监听器

2、CompoundButton.OnCheckedChangeListener 多选框勾选项改变监听器

3、AdapterView.OnItemSelectedListener 下拉列表框条目被选中监听器

4、AdapterView.OnItemClickListener ListView的条目单击监听器

5、AdapterView.OnItemClickListener GridView的条目单击监听器

6、DatePicker.OnDateChangedListener DatePicker的日期改变监听器

7、AbsListView.OnScrollListener ListView的滑动监听器

七、事件监听器的几种写法示例：

【备注：】其实事件监听器，就是实现了一个特定接口的Java类的实例。

监听器--->事件--->事件源

消防队--->着火--->房子

实现事件监听器有几种形式：

1、内部类形式;

2、外部类形式;

3、Activity实现监听器接口，自身作为事件监听器类;

4、匿名内部类的形式创建事件监听器，并实现监听器内的方法。

(Android开发中常用匿名内部类作为监听器)

以按钮的单击事件为例：

1.在xml文件里,设置onClick属性-->在代码中:添加相应的方法,必须带view参数;

2.匿名内部类的方式：

bt2.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getApplicationContext(), "2222被点击了", 0).show();

}

});

3.写一个内部类：

4.activity实现onClickListener接口：

bt4.setOnClickListener(this);

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.btn_click4:

Toast.makeText(getApplicationContext(), "444被点击了", 0).show();

break;

default:

break;

}

}

八、基本控件：——ImageView：

(一).ImageView的类结构

java.lang.Object

? android.view.View

? android.widget.ImageView

(二).ImageView的常用属性:

①、andorid:src 设置图片来源。属性值为android:src="@drawable/图片名称"

②、android:adjustViewBounds 用于设置 ImageView是否调整自己的边界，来保持所显示图片的长宽比例。属性值为true或false

③、 android:maxHeight 设置 ImageView的最大高度。需要先设置android:adjustViewBounds为true，否则不起作用。

④、andorid:maxWidth 设置 ImageView的最大宽度。需要先设置android:adjustViewBounds为true，否则不起作用。

⑤、 android:scaleType 设置所显示的图片如何缩放或移动，以适应ImageView的大小。

设置所显示的图片如何缩放或移动，以适应ImageView的大小。可选项：fitCenter、fitStart 、 fitEnd、 fitXY 、 center、centerCrop、centerInside、matrix

matrix ：保持原图大小、从左上角的点开始，以矩阵形式绘图。

fitXY：把图片按照指定的大小在View中显示，拉伸显示图片，不保持原比例，填满View.

fitStart：把图片按比例扩大(缩小)到View的宽度，显示在View的上部分位置

fitCenter：把图片按比例扩大(缩小)到View的宽度，居中显示

fitEnd：把图片按比例扩大(缩小)到View的宽度，显示在View的下部分位置

Center： 以原图的几何中心点和ImagView的几何中心点为基准，按图片的原来size居中显示，不缩放， 当图片长/宽超过View的长/宽，则截取图片的居中部分显示ImageView的size. 当图片小于View 的长宽时，只显示图片的size,不剪裁。

centerCrop：以原图的几何中心点和ImagView的几何中心点为基准，按比例扩大(图片小于View的宽时)图片的size。 居中显示，使得图片长 (宽)等于或大于View的长(宽),并按View的大小截取图片。 当原图的size大于ImageView时，按比例缩小图片，使得长宽中有一向等于ImageView,另一向大于ImageView。 实际上，使得原图的size大于等于ImageView

centerInside(用得多)：以原图的几何中心点和ImagView的几何中心点为基准，将图片的内容完整居中显示， 通过按比例缩小原来的size使得图片长(宽)等于或小于ImageView的长(宽)

备注:如果想设置图片为固定大小,并且要保持图片的宽高比,则:

①. 设置adjustViewBounds属性为true;

②. 设置maxHeight,maxWidth;

③. 设置layout_width="wrap_content",layout_height="wrap_content".

(三)、ImageView常用方法：

1、setImageBitmap()2、setImageDrawable()3、setImageResource()

九、基本控件：——ImageButton：

ImageView常用的属性

ImageView的scaleType属性

java.lang.Object

? android.view.View

? android.widget.ImageView

? android.widget.ImageButton

十、基本控件：——CheckBox：

(一)、 类结构介绍：

java.lang.Object

? android.view.View

? android.widget.TextView

? android.widget.Button

? android.widget.CompoundButton

? android.widget.CheckBox

CheckBox继承于Button，所以具有普通按钮的各种属性，但是与普通按钮不同的是， CheckBox 提供了可选中的功能。

【备注：】CheckBox有一个父类是CompoundButton，所以在使用监听器的时候要注意跟单选项进行区别。

(二)、核心代码：

A. UI的代码：

android:id="@+id/checkBox_main_hobby1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="学习" />

android:id="@+id/checkBox_main_hobby2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="睡觉" />

B. java代码：

// 因为多选框中有多个控件都使用同一个监听器，所以不使用匿名监听器，而单独定义一个有名字的监听器对象。

OnCheckedChangeListenerlistener = new OnCheckedChangeListener() {

//[备注:]这个 OnCheckedChangeListener监听器与单选的监听器，虽然名字一样，但是属于两个不同包中的监听器。

//单选项中是：android.widget.RadioGroup.OnCheckedChangeListener

//而多选项中是android.widget.CompoundButton.OnCheckedChangeListener

@Override

public void onCheckedChanged(CompoundButton buttonView ,boolean isChecked) {

// 该方法中的第一个参数是当前被监听的多选项按钮，第二个参数是监听到的状态，也就是该选项是否给勾选(如果勾选了，则这个值是true，否则是false)。

if (isChecked) {

System.out.println("==您勾选了：==>" + buttonView.getText());

} else {

System.out.println("==您取消了：==>" + buttonView.getText());

}

}

};

checkBox_main_hobby1.setOnCheckedChangeListener(listener);

checkBox_main_hobby2.setOnCheckedChangeListener(listener);

// 多选按钮不仅可以使用OnCheckedChangeListener监听器来获取被勾选的内容，也可以通过按钮的单击监听器来监听。

button_main_submit.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 实例化一个StringBuilder对象，则勾选的各项内容组成一个字符串。

StringBuilder sb = new StringBuilder();

// 多选框中有一个方法isChecked()，是判断该选项是否被勾选。如果勾选则返回true，如果取消勾选则返回false

// 多选项中没有多选项Group这个概念，所以要逐一去判断每一个选项的勾选状态

if (checkBox_main_hobby1.isChecked()) {

sb.append(checkBox_main_hobby1.getText().toString());

}

if (checkBox_main_hobby2.isChecked()) {

sb.append(checkBox_main_hobby2.getText().toString());

}

if (checkBox_main_hobby3.isChecked()) {

sb.append(checkBox_main_hobby3.getText().toString());

}

if (checkBox_main_hobby4.isChecked()) {

sb.append(checkBox_main_hobby4.getText().toString());

}

System.out.println("==您的爱好是：==>" + sb.toString());

}

});

十一、基本控件：——RadioButton：

(一)、类结构介绍：

java.lang.Object? android.view.View? android.view.ViewGroup? android.widget.LinearLayout? android.widget.RadioGroup java.lang.Object? android.view.View? android.widget.TextView? android.widget.Button? android.widget.CompoundButton? android.widget.RadioButton RadioButton继承于Button，所以具有普通按钮的各种属性，但是与普通按钮不同的是，RadioButton提供了可选中的功能。在使用RadioButton的时候，要使用RadioGroup来包围起这些RadioButton。【备注：】RadioGroup是LinearLayout的子类，所以RadioGroup本质上是一个存放RadioButton的布局容器。需要记住的是：默认的LinearLayout布局的Orientation属性是水平的，而默认的RadioGroup的Orientation属性是垂直的。

(二)、重点记忆的类方法：

1、RadioGroup类中的getCheckedRadioButtonId()

十二.其它布局控件

(一).FrameLayout帧布局

①.帧布局中的每一个组件都代表一个画面

② .默认以屏幕左上角作为(0, 0)坐标，按组件定义的先后顺序依次逐屏显示，后面出现的会覆盖前面的画面。

③.用该布局可以实现动画效果。

④.FrameLayout的一个子类——TabHost很常用，可以实现导航界面

(二).GridLayout网格布局

(三). AbsoluteLayout绝对布局

①.AbsoluteLayout，又可以叫做坐标布局，可以直接指定子元素的绝对位置

②.这种布局简单直接，直观性强

③.使用android:layout_x属性来确定X坐标，以左上角为顶点。使用android:layout_y属性确定Y坐标，以左上角为顶点。

④.如果子元素不设置layout_x和layout_y，那么它们的默认值是0，会出现在左上角。

⑤.由于手机屏幕尺寸差别比较大，使用绝对定位的适应性会比较差，不推荐使用

(四). TableLayout表布局

①. TableLayout属于行和列形式的管理控件，每行为一个TableRow对象，也可以是一个View对象。

②.在TableRow中还可以继续添加其他的控件，每添加一个子控件就成为一列。TableLayout不会生成边框。

十三.TextView常用属性

android:autoLink ：设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web /email/phone/map/all)

android:autoText ：如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输入的时候起作用。

android:bufferType ： 指定getText()方式取得的文本类别。选项editable 类似于StringBuilder ：可追加字符，也就 是说getText后可调用append方法设置文本内容。spannable ：则可在给定的字符区域使用样式，参见这里1、这里2。

android:capitalize ：设置英文字母大写类型。此处无效果，需要弹出输入法才能看得到，参见EditView此属性说明。

android:cursorVisible：设定光标为显示/隐藏，默认显示。

android:digits：设置允许输入哪些字符。如“1234567890.+-*/% ()”

android:drawableBottom：在text的下方输出一个drawable，如图片。如果指定一个颜色的话会把text的背景设为该颜色，并且同时和background使用时覆盖后者。

android:drawableLeft：在text的左边输出一个drawable，如图片。

android:drawablePadding：设置text与drawable(图片)的间隔，与drawableLeft、 drawableRight、drawableTop、drawableBottom一起使用，可设置为负数，单独使用没有效果。

android:drawableRight：在text的右边输出一个drawable。

android:drawableTop：在text的正上方输出一个drawable。

android:editable：设置是否可编辑。

android:editorExtras：设置文本的额外的输入数据。

android:ellipsize：设置当文字过长时,该控件该如何显示。有如下值设置：”start”—?省略号显示在开头;”end” ——省略号显示在结尾;”middle”—-省略号显示在中间;”marquee” ——以跑马灯的方式显示(动画横向移动)

android:freezesText：设置保存文本的内容以及光标的位置。

android:gravity：设置文本位置，如设置成“center”，文本将居中显示。

android:hintText：为空时显示的文字提示信息，可通过textColorHint设置提示信息的颜色。此属性在 EditView中使用，但是这里也可以用。

android:imeOptions：附加功能，设置右下角IME动作与编辑框相关的动作，如actionDone右下角将显示一个“完成”，而不设置默认是一个回车符号。这个在EditView中再详细说明，此处无用。

android:imeActionId：设置IME动作ID。

android:imeActionLabel：设置IME动作标签。

android:includeFontPadding：设置文本是否包含顶部和底部额外空白，默认为true。

android:inputMethod：为文本指定输入法，需要完全限定名(完整的包名)。例如：com.google.android.inputmethod.pinyin，但是这里报错找不到。

android:inputType：设置文本的类型，用于帮助输入法显示合适的键盘类型。在EditView中再详细说明，这里无效果。

android:linksClickable：设置链接是否点击连接，即使设置了autoLink。

android:marqueeRepeatLimit：在ellipsize指定marquee的情况下，设置重复滚动的次数，当设置为 marquee_forever时表示无限次。

android:ems：设置TextView的宽度为N个字符的宽度。这里测试为一个汉字字符宽度

android:maxEms：设置TextView的宽度为最长为N个字符的宽度。与ems同时使用时覆盖ems选项。

android:minEms：设置TextView的宽度为最短为N个字符的宽度。与ems同时使用时覆盖ems选项。

android:maxLength：限制显示的文本长度，超出部分不显示。

android:lines：设置文本的行数，设置两行就显示两行，即使第二行没有数据。

android:maxLines：设置文本的最大显示行数，与width或者layout_width结合使用，超出部分自动换行，超出行数将不显示。

android:minLines：设置文本的最小行数，与lines类似。

android:lineSpacingExtra：设置行间距。

android:lineSpacingMultiplier：设置行间距的倍数。如”1.2”

android:numeric：如果被设置，该TextView有一个数字输入法。此处无用，设置后唯一效果是TextView有点击效果，此属性在EdtiView将详细说明。

android:password：以小点”.”显示文本

android:phoneNumber：设置为电话号码的输入方式。

android:privateImeOptions：设置输入法选项，此处无用，在EditText将进一步讨论。

android:scrollHorizontally：设置文本超出TextView的宽度的情况下，是否出现横拉条。

android:selectAllOnFocus：如果文本是可选择的，让他获取焦点而不是将光标移动为文本的开始位置或者末尾位置。 TextView中设置后无效果。

android:shadowColor：指定文本阴影的颜色，需要与shadowRadius一起使用。

android:shadowDx：设置阴影横向坐标开始位置。

android:shadowDy：设置阴影纵向坐标开始位置。

android:shadowRadius：设置阴影的半径。设置为0.1就变成字体的颜色了，一般设置为3.0的效果比较好。

android:singleLine：设置单行显示。如果和layout_width一起使用，当文本不能全部显示时，后面用“…”来表示。如android:text="test_ singleLine "

android:singleLine="true" android:layout_width="20dp"将只显示“t…”。如果不设置singleLine或者设置为false，文本将自动换行

android:text：设置显示文本.

android:textAppearance： 设置文字外观。如 “?android:attr/textAppearanceLargeInverse”这里引用的是系统自带的一个外观，?表示系统是否有这种外观，否 则使用默认的外观。可设置的值如下：textAppearanceButton/textAppearanceInverse /textAppearanceLarge/textAppearanceLargeInverse/textAppearanceMedium/textAppearanceMediumInverse/textAppearanceSmall/textAppearanceSmallInverse

android:textColor：设置文本颜色

android:textColorHighlight：被选中文字的底色，默认为蓝色

android:textColorHint：设置提示信息文字的颜色，默认为灰色。与hint一起使用。

android:textColorLink：文字链接的颜色.

android:textScaleX：设置文字之间间隔，默认为1.0f。

android:textSize：设置文字大小，推荐度量单位”sp”，如”15sp”

android:textStyle：设置字形[bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜) 2] 可以设置一个或多个，用“|”隔开

android:typeface：设置文本字体，必须是以下常量值之一：normal 0, sans 1, serif 2, monospace(等宽字体) 3]

android:height：设置文本区域的高度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)

android:maxHeight：设置文本区域的最大高度

android:minHeight：设置文本区域的最小高度

android:width：设置文本区域的宽度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)，与layout_width 的区别看这里。

android:maxWidth：设置文本区域的最大宽度

android:minWidth：设置文本区域的最小宽度