一、UI组件整体介绍：
android系统为我们提供了丰富的可视化用户界面组件，包括菜单、对话框、按钮、下拉列表等。
android系统借用了java里面的UI设计思想，包括事件响应机制和布局管理。
android系统中的所有UI类都是建立在View和ViewGroup这两个类的基础之上的，所有的View的子类成为Widget，所有的ViewGroup的子类成为“Layout".
二、组件的简单分类：
1、Basic Views：常用的View，EditText、Button；
2、Picker View：允许用户进行选择的View，例如TimePicker、datePicker；
3、List Views：显示大量项目的View，例如ListView、spinner；
4、Display Views：显示图片的View，例如Gallery和ImageSwitcher；
5、Menus：显示额外的和上下文菜单项目的View
6、Additional VIews：其他的View，例如AnalogClock、DigitalClock。
三、Basic Views的使用
A）、文本视图（TextView）：
显示文本的组件，类似于html中的label标签。通过TextView标签来认识android中组件的常见属性，下面对属性进行简单分类：
宽度、高度、文本颜色、文本大小、文本样式、文本位置、文本动态性（走马灯效果）。
<!--
layout_width
layout_height
layout_width="fill_parent" 组件和父窗口的宽度相同
layout_height="fill_parent" 组件和父窗口的长度相同
相对设置（根据参照物）：
wrap_content 组件的长度和宽度随着内容变化，相对于内容
fill_parent 组件和父窗口的宽度（或长度）相同，相对于父容器，并且其他的属性对于宽度和高度不能修改,
例如对width和height设置无效，若是想自由设定长宽，需要改为wrap_content
ems N个汉字字符宽度,不限制内容
ems="2"：代表两个汉字（四个字符）的宽度
singleLine是否以单行来显示文本，多余的用省略号“...”表示。android:singleLine="true",以单行显示。
lines是否以多行文本显示。android:lines="4"以4行显示。
textColor 文字颜色
textColorHighlight 被选中文字的底色，默认为蓝色
textSize 文字大小,推荐度量单位sp
对文本字体样式的设置：
android:textStyle设置字形[bold(粗体)]0,italic(斜体)1,bolditalic(又粗又斜)2] 可以设置一个或多个，用“|”隔开
android:typeface设置文本字体，必须是以下常量值之一：normal 0，sans 2，monospace(等宽大字体)3]。
对文本内容显示位置的设置：
android:gravity 设置文本位置，如设置成“center”，文本讲居中显示。
gravity="center" 水平、垂直居中
gravity="center_horizontal" 只水平居中
gravity="center_vertical" 只垂直居中
ellipsize="marquee" 当文本宽度不能显示所有文字的时候实行滚动效果，默认的是省略号“...”
android:marqueeRepeatLimit="marquee_forever" 文字滚动次数，也可以是一个常量10、20.。。。
android:focusable="true" 让当前的TextView获取焦点，若是不获取就不会滚动，如果当前对象是第一个元素会自动滚动。
android:focusableInTouchMode="true"
-->
走马灯效果示例：
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcome,CKR... welcome,CKR..."
android:ellipsize="marquee"
android:singleLine="true"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
/>
B)、ImageView（图片浏览器）
首先把图片复制到res目录下任意以drawable开头的目录下
实现点击图片时循环切换到下一张图片的效果（本例显示4张图片）：
---------------------------------------------------------------------------------------------------
在主类MainActivity中：
private int[] array = new int[] {
R.drawable.d,R.drawable.e,R.drawable.f,R.drawable.g//为4张图片排序图片
};
private int count = 0;//对切换的图片计数
---------------------------------------------------------------------------------------------------
在onCreate方法中：
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
ImageView iv = (ImageView) view;
iv.setImageResource(array[++count]);
if(count == 3)
{
count = 0;
}
}
});
---------------------------------------------------------------------------------------------------
对上例进行改进，实现当鼠标点击图片左侧时浏览前一张图片，点击右侧类似：
问题描述：
1）、如何获取图片点击的过程中，获得鼠标的X坐标
2）、如何获取到屏幕的宽度
---------------------------------------------------------------------------------------------------
在onCreate方法中：
//获取屏幕宽度
final int width = this.getWindowManager().getDefaultDisplay().getWidth();
imageView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
//获得点击的X坐标
int x = (int) event.getX();
ImageView iv = (ImageView) v;
if(x >= width/2) {
//图片点击的是右侧
if(count == 3)
count = -1;
iv.setImageResource(array[++count]);
}else{
if(count == 0)
count = 4;
iv.setImageResource(array[--count]);
}
return false;
}
});
---------------------------------------------------------------------------------------------------
C)、文本编辑框(EditText)
EditText文本输入框，相当于html中的<input type="text"/>
在RelativeLayout布局中：
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="please input data"
android:maxLength="10"
android:singleLine="true"
android:textColorHint="#00ff00"
android:textSize="30dp" >
<requestFocus />
</EditText>
在RelativeLayout布局中：
<requestFocus /> 子标签，让某个元素主动获得焦点，如果没有设置，则系统默认给第一个焦点
ems="10"和singleLine="true"并不矛盾，ems只是限制显示宽度，并不限制内容的长度
maxLength="10" 限制最大输入的字符长度
hint text为空时显示的文字提示信息
TextColorHint 可以通过TextColorHint设置提示信息的颜色
digits 限定输入的文字的种类，digits="1234as+" 表示只能输入“1234as+”范围内的字符
numeric 只能输入数字，有三种值：integer、singed，decimal
ems VS maxLength 中，maxLength可以真正的控制字符个数
但是上面的并不能对输入内容给以准确的控制，比如只能以数字开头等等。。
安卓提供了一下两种特殊的方法限制EditText内容：
1)editText.addTextChangedListener(new TextWatcher())
2）et2.setFilters(new InputFilter[] {
new InputFilter() {
@Override
public CharSequence filter(CharSequence source, int start,
int end, Spanned dest, int dstart, int dend) {
}
}
}
以两个EditText为例：
-----------------------------------------------------------------------------------------------------------
a)不允许输入数字2
在onCreate方法中：
EditText et = (EditText) findViewById(R.id.editText1);
et.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
}
@Override
public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
int arg3) {
}
@Override
public void afterTextChanged(Editable e) {
String str = e.toString();
// Toast.makeText(getApplicationContext(), str, 1).show();
if(str.indexOf("2") != -1)
{
e.clear();
Toast.makeText(getApplicationContext(), "不能输入数字2", 1).show();
}
}
});
-----------------------------------------------------------------------------------------------------------
b)输入长度为6，并且把输入的小写字母自动转化成大写，并且把数字1、2、3自动转化成汉字一、二、三。
在onCreate方法中：
EditText et2 = (EditText) findViewById(R.id.editText2);
et2.setFilters(new InputFilter[] {
new InputFilter.LengthFilter(6),//可以看做是maxLength
new InputFilter.AllCaps(),//把输入的所有小写字母转化为大写
new InputFilter() {
@Override
public CharSequence filter(CharSequence source, int start,
int end, Spanned dest, int dstart, int dend) {
if("1".equals(source)) {
return "一";
}else if("2".equals(source)) {
return "二";
}else if("3".equals(source)) {
return "三";
}else {
return null;
}
}
}
});
-----------------------------------------------------------------------------------------------------------
D)Button（按钮）
<ImageButton
android:src="@android:drawable/btn_star"
/>
-----------------------------------------------------------------------------------------------------------
<ToggleButton
android:textOn="女"
android:textOff="男"
android:onClick="test"
/>
public void test(View view) {
ToggleButton btn = (ToggleButton) view;
Toast.makeText(this, btn.getText(), 0).show();
}
-----------------------------------------------------------------------------------------------------------
<RadioGroup
android:id="@+id/radioGroup1"
>
<RadioButton
android:id="@+id/radio0"
android:checked="true"
android:text="ps"
android:tag="1"
/>
<RadioButton
android:id="@+id/radio1"
android:text="dw"
android:tag="2" />
<RadioButton
android:id="@+id/radio2"
android:text="java"
android:tag="3" />
</RadioGroup>
在onCreate方法中：
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup1);
//注意导入包：import android.widget.RadioGroup.OnCheckedChangeListener;
//html中<input type="radio" name="id" value="3"/>ps
//android中，tag类似于html中的value，用来保存重要信息
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton button = (RadioButton) group.findViewById(checkedId);
// Toast.makeText(getApplicationContext(), button.getText(), 1).show();
Toast.makeText(getApplicationContext(), "tag:"+(CharSequence) button.getTag(), 0).show();
}
});
-----------------------------------------------------------------------------------------------------------
在相对布局中：
<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/toggleButton1"
android:layout_marginTop="23dp"
android:text="C#"
android:tag="1" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="C"
android:tag="2"/>
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/checkBox2"
android:text="Android"
android:tag="3" />
在onCreate方法中：
//注意导入包：import android.widget.CompoundButton.OnCheckedChangeListener;
CheckBox box1 = (CheckBox) findViewById(R.id.checkBox1);
CheckBox box2 = (CheckBox) findViewById(R.id.checkBox2);
CheckBox box3 = (CheckBox) findViewById(R.id.checkBox3);
box1.setOnCheckedChangeListener(MyListener);
box2.setOnCheckedChangeListener(MyListener);
box3.setOnCheckedChangeListener(MyListener);
在主类MainActivity中：
private OnCheckedChangeListener MyListener = new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked) {
Toast.makeText(getApplicationContext(), buttonView.getText()+" is checked", 0).show();
// Toast.makeText(getApplicationContext(), (CharSequence) buttonView.getTag(), 0).show();
}else {
Toast.makeText(getApplicationContext(), buttonView.getText()+" is canceled", 0).show();
}
}
};
-----------------------------------------------------------------------------------------------------------