android UI组件

一、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（按钮）

public void test(View view) {
　　ToggleButton btn = (ToggleButton) view;
　　Toast.makeText(this, btn.getText(), 0).show();
}
-----------------------------------------------------------------------------------------------------------
<RadioGroup
　　android:id="@+id/radioGroup1"
>

在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" />

在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();
}

}
};
-----------------------------------------------------------------------------------------------------------