android UI組件

1、UI組件總體介紹：
android系統爲咱們提供了豐富的可視化用戶界面組件，包括菜單、對話框、按鈕、下拉列表等。
android系統借用了java裏面的UI設計思想，包括事件響應機制和佈局管理。
android系統中的全部UI類都是創建在View和ViewGroup這兩個類的基礎之上的，全部的View的子類成爲Widget，全部的ViewGroup的子類成爲「Layout".

2、組件的簡單分類：
一、Basic Views：經常使用的View，EditText、Button；
二、Picker View：容許用戶進行選擇的View，例如TimePicker、datePicker；
三、List Views：顯示大量項目的View，例如ListView、spinner；
四、Display Views：顯示圖片的View，例如Gallery和ImageSwitcher；
五、Menus：顯示額外的和上下文菜單項目的View
六、Additional VIews：其餘的View，例如AnalogClock、DigitalClock。

3、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" 文字滾動次數，也能夠是一個常量十、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，而且把輸入的小寫字母自動轉化成大寫，而且把數字一、二、3自動轉化成漢字1、2、三。
在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();
}

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