Android -- （8），UI组件

时间：2012/11/30

一，设计UI界面

可以用多种的组件来设计UI界面，主要有以下几类：
Basic views -- 基本组件，如button，textview，edittext之类。
Picker views -- 选择组件，如TimePicker，DatePicker等。
List Views -- 列表组件，如ListView，SpinnerView等。
Specialized fragments -- 特制fragment ，用于特殊的功能。

（1）Basic Views

--这里介绍android的基本组件。

1.TextView

textview是用来向用户展示信息的，如果想要给用户修改信息，应该用EditView，textview的一个实现如下：

<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” />

2.Button

button --按键，可以按下去的键。按键同时可以触发某些动作。一个实现如下：

<Button android:id=”@+id/btnSave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”save” />

android:layout_width="fill_parent"指定了这个button的宽度跟它的父组件一致，android:layout_height="wrap_content"意味着这个组件的高度刚好能容纳它所显示的text。这两个属性在很多组件上都通用，以后不再赘述。

3.ImageButton

ImageButton为带上image的button，其中的android:src属性可以指定button所用的image。例子：

<ImageButton android:id=”@+id/btnImg1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_launcher” />

这里的android：src=“@drawable/ic_launcher”指定了图标就用程序的图标。

4.EditText

EditText 创建了一个矩形的输入空间，让用户输入文本信息。应该将layout_height设置为wrap_content，使得用户在输入大段文字的时候，输入框能自动改变高度。例子：

<EditText android:id=”@+id/txtName”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />

5.CheckBox

用户可以选择一个CheckBox选中或者是不选中。例子：

<CheckBox android:id=”@+id/chkAutosave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Autosave” />

如果不喜欢CheckBox的默认外观，可以指定style属性，显示别的外观。如：

<CheckBox android:id=”@+id/star”
style=”?android:attr/starStyle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

这段代码显示一个星型的CheckBox。style的格式如：?[package:][type:]name

6.RadioGroup

--RadioGroup可以添加Radio Button ，radio button 通常用来实现提供多个选项给用户选择的功能，当其中一个radio button选中的时候，其他的radio button 会自动取消选中（也就是单选）。如：

<RadioGroup android:id=”@+id/rdbGp1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical” >
<RadioButton android:id=”@+id/rdb1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 1” />
<RadioButton android:id=”@+id/rdb2”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 2” />
</RadioGroup>

radio button默认是垂直排布的，如果想要做成水平排布，则要在radioGroup中加上 android:orientation=”horizontal”。

7.ToogleButton

--相当于开关按键，按一下转换状态（开->关，关->开）。

<ToggleButton android:id=”@+id/toggle1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

特别注意：以上的所有组件都指定了id属性，可以用View.findViewById()或者Activity.findViewById()来获取 指定了这个属性的组件。

（2）处理UI控件事件。

 -- 如何处理控件触发的事件。

综述：要处理各种控件的事件，首先要先取得UI界面的控件实体，可以用findViewById（）方法（属于Activity类），然后用控件的id来获得其实体。

1.处理Button的事件。

可以用setOnClickListener()向控件提供一个事件处理类。可以用匿名内部类的方法。如下：

btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast(“You have clicked the Open button”);
}
});

这里的用button的setOnClickListener来向目标button提供一个类，当目标button被click的时候，就会触发该类里面的onClick方法，用来响应click的动作。

2.处理CheckBox的事件。

--处理CheckBox的事件，主要是判断CheckBox的状态（选定与否）。可以用CheckBox类中的isChecked方法来获得CheckBox的状态，true--选中，false--未选中。当CheckBox被点击的时候，onClick事件也会被触发，故可以实现onClick事件来响应事件。

CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
checkBox.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((CheckBox)v).isChecked())
DisplayToast(“CheckBox is checked”);
else
DisplayToast(“CheckBox is unchecked”);
}
});

3.处理radiobutton的事件。

--处理radiobutton事件的时候，要用setOnCheckedChangeListener()来处理radiobutton状态发生改变。如下：

//---RadioButton---
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
{
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast(“Option 1 checked!”);
} else {
DisplayToast(“Option 2 checked!”);
}
}
});

当一个radiobutton被选择的时候，onCheckedChanged就会被触发，在这个方法里面，可以用Radiobutton的isChecked方法来获取那个按键被选择。

4.ToggleButton事件。

--正如Radiobutton一样，当点击ToggleButton的时候，onClick方法就会被触发。

//---ToggleButton---
ToggleButton toggleButton =
(ToggleButton) findViewById(R.id.toggle1);
toggleButton.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((ToggleButton)v).isChecked())
DisplayToast(“Toggle button is On”);
else
DisplayToast(“Toggle button is Off”);
}
});

可以用ischecked方法来获取togglebutton的状态，然后作出相应的处理。

另外，除了往控件里面添加方法之外，还可以用控件自身的属性去指定方法，例如button：

<Button android:id=”@+id/btnSave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/save”
android:onClick=”btnSaved_clicked”/>

这里的Android:onClick方法指定一个处理button被点击时候的响应办法--btnSaved_clicked，你只需要在这个活动对应的java文件里实现这个方法就可以让button和这个方法绑定起来，当button被点击的时候，这个方法就会被调用，唯一要注意的是这个方法一定要传入一个view类型的参数，名字为view。如下：

public void btnSaved_clicked (View view) {
DisplayToast(“You have clicked the Save button1”);
}

这个方法会在button被点击的时候触发。

明显，后面一种方法比较方便。

二，更多UI组件。

（1）ProgessBar

--用来显示任务进度的组件。例子如下：

<ProgressBar android:id=”@+id/progressbar”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

如果只添加这个组件到xml文件里面，就会显示一个圈圈动画，应该何时停止是编程人员的责任，而这个动画恰好可以用来表示没特定完成时间的动作，例如请求网络服务等。

一般都会用一个新的线程去完成这个任务，避免UI现成阻塞。显示和隐藏ProgessBar可以用ProgessBar的setVisibility方法--progressBar.setVisibility(View.GONE);（0-->可见，4-->隐藏，8-->gone）。这样当任务完成之后就可以控制ProgessBar的去留。如下：

 new Thread(new Runnable()
        {
        	public void run()
        	{
        			//---do some work here---
        			while (progressStatus < 10)
        			{
    					progressStatus = doSomeWork();
        			}
        			//---hides the progress bar---
        			handler.post(
					new Runnable()
    				{
        				public void run()
        				{
        					//---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
        					progressBar.setVisibility(View.GONE);
        					}
        				}
				);
        }
        //---do some long running work here---
        private int doSomeWork()
        {
        		try {
        				//---simulate doing some work---
        				Thread.sleep(500);
        				} catch (InterruptedException e)
        				{
        					e.printStackTrace();
        				}
        		return ++progress;
        	}
        }
        ).start();

以上代码用一个新线程来模拟某种持续的工作，当工作完成之后（progressStatue>10），则用

progressBar.setVisibility(View.GONE);来使progressbar消失。

当然也可以改变ProgessBar的样式，只要在xml该ProgessBar组件里面添加：

style=”@android:style/Widget.ProgressBar.Horizontal”

这样ProgessBar就不再是一个圈圈，而是一个进度条的样子。在这种情况下，可以用ProgessBar对象的setMax方法来设定进度条的最大值是多少，然后用ProgessBar对象的setProgress来显示当前的进度。如下：

 new Thread(new Runnable()
        {
        	public void run()
        	{
        			//---do some work here---
        		while (progressStatus < 100)
        		{
        		progressStatus = doSomeWork();
        		//---Update the progress bar---
        		handler.post(new Runnable()
        		{
        				public void run() {
        						progressBar.setProgress(progressStatus);
        					}
    					}
    				);
        		}
        			//---hides the progress bar---
        			handler.post(
					new Runnable()
    				{
        				public void run()
        				{
        					//---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
        					progressBar.setVisibility(View.GONE);
        					}
        				}
				);
        }
        //---do some long running work here---
        private int doSomeWork()
        {
        		try {
        				//---simulate doing some work---
        				Thread.sleep(500);
        				} catch (InterruptedException e)
        				{
        					e.printStackTrace();
        				}
        		return ++progress;
        	}
        }
        ).start();

每次让新线程休眠500ms，然后progress++，再更新progressbar的进度，因为这里的setMax是200，故这个progressbar只会到一般的地方。然后就gone了。

（2）AutoCompleteTextView

- -跟editText差不多，这个会自动补全输入。不过要预先设定里面的匹配字符串，当用户输入的时候，就会有选项给用户选择用以自动补全。

首先要定义一个autocompletetextview对象，在xml中：

<AutoCompleteTextView 
	    android:id="@+id/txtCountries"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" />

如果想要达到自动补全的功能，必须要提供一个字符数组来提供补全的数据。

String[] presidents = {
“Dwight D. Eisenhower”,
“John F. Kennedy”,
“Lyndon B. Johnson”,
“Richard Nixon”,
“Gerald Ford”,
“Jimmy Carter”,
“Ronald Reagan”,
“George H. W. Bush”,
“Bill Clinton”, 
“George W. Bush”,
“Barack Obama”
}

这里 提供的是米国历届总统的名字。做例子。

然后将这个数组跟UI控件绑定起来，用ArrayAdapter类来管理autocompletetextview显示的补全字符串。

首先要设置一个arrayadapter对象：

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, presidents);

这里设置了arrayadapter的显示模式是android.R.layout.simple_dropdown_item_1line,绑定的数组是presidents数组（上面声明）。

然后对autocompletetextview对象进行详细设置。用setThreshold()方法可以设置用户输入多少个字符的时候会出现自动补全，而setAdapter方法则可以用于设置自动补全的候选字符数组。如下：

textView.setThreshold(3);

textView.setAdapter(adapter);

在本例中，用户输入三个字符就会出现自动补全选项，而选项的内容就是跟用户输入相匹配的adapter里面绑定的数组。

（3）TimePicker

--用于选取时间的组件。

首先是声明：

<TimePicker android:id=”@+id/timePicker”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

跟一般的组件一样。

然后是获取时间。可以用那个TimePicker对象的getCurrentHour（）来获得选择的小时，用getCurrentMinute来获得选择的分钟。用setIs24HourView来设置是否24小时制。

当然，也可以用一个对话框来选择时间（而不是把组件镶嵌在ui界面中）。调用showDialog的方法，showDialog方法会调用onCreateDialog方法，于是要重写onCreateDialog方法来将TimePicker放进去。

@Override
protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
}
return null;
}

这里传入一个TimePickerDialog对象，this指定是这个活动里面展示Dialog，mTimeSetListener是一个TimePickerDialog.OnTimeSetListener的实例，指定了如何响应用户选择的日期。而hour和minute是默认选择的小时和分钟，最后一个boolean变量指定是否以24小时制来显示时间。下面来定义mTimeSetListener：

private TimePickerDialog.OnTimeSetListener mTimeSetListener =
		new TimePickerDialog.OnTimeSetListener()
		{
    		public void onTimeSet(
    		TimePicker view, int hourOfDay, int minuteOfHour)
    		{
    				hour = hourOfDay;
					minute = minuteOfHour;
					SimpleDateFormat timeFormat = new SimpleDateFormat("hh:mm aa");
					Date date = new Date(0,0,0, hour, minute);
					String strDate = timeFormat.format(date);
					Toast.makeText(getBaseContext(),
							"You have selected " + strDate,
							Toast.LENGTH_SHORT).show();
    		}
		};

这里直接定义了一个TimePickerDialog.OnTimeSetListener的实例（而不是用继承的方法），重写了onTimeSet方法，当用户选择好了日期之后，onTimeSet方法就会被触发，hourOfDay是用户选择的小时，minuteOfHour是用户选择的分钟，而view是关联这个方法的组件。这里用一个SimpleDateFormat类来设定时间的表示方式。然后用toast显示出来。所以用户选择好了时间之后，屏幕下方就会有toast来显示他所选择的时间。

(4)DatePicker

--TimePicker+选择年月。

声明：

	<DatePicker android:id=”@+id/datePicker”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

DatePicker类的方法：

getMonth()-->取得选择的月份（注意12月为11）。

getDayOfMonth()-->取得选择的天数。

getYear()-->年份。

getCurrentMinute()-->分钟

getCurrentHour() -->小时。

用Dialog方式显示DatePicker：

跟显示TimePicker的方式差不多，详见一下代码:

protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
case DATE_DIALOG_ID:
return new DatePickerDialog(
this, mDateSetListener, yr, month, day);
}
return null;
}

当showDIalog被嗲用而且case是第二个的时候，返回的是一个DatePickerDialog，而不是TimePickerDialog，传入的mdateListener是用来监听设定日期事件的，而yr，month，day则是初始时候的年月日。mdateListener代码如下：

private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener()
{
public void onDateSet(
DatePicker view, int year, int monthOfYear, int dayOfMonth)
{
yr = year;
month = monthOfYear;
day = dayOfMonth;
Toast.makeText(getBaseContext(),
“You have selected : “ + (month + 1) +
“/” + day + “/” + year,
Toast.LENGTH_SHORT).show();
}
};

当用户选择好日期并点击set按键的时候，onDateSet方法就会被调用，而传入的参数正是用户选择的年月日。只需要实现一个继承OnDateSetListener并实现了OnDateSet方法的类，该类就可以用作事件的处理类。实现时候注意方法的接口。

（5）ListView

--listview用于垂直显示一个关于item的list。

1.listView的声明。

注意：listview不像其他view一样是用xml语句定意义的，listview本身是一个Activity，于是就要将想要弄成listview的Activity继承listactivity类（而不是Activity类）。再和要显示的数据绑定起来，代码如下：

public class BasicViews5Activity extends ListActivity {
String[] presidents = {
“Dwight D. Eisenhower”,
“John F. Kennedy”,
“Lyndon B. Johnson”,
“Richard Nixon”,
“Gerald Ford”,
“Jimmy Carter”,
“Ronald Reagan”,
“George H. W. Bush”,
“Bill Clinton”,
“George W. Bush”,
“Barack Obama”
};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//---no need to call this---
//setContentView(R.layout.main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, presidents));
}
public void onListItemClick(
ListView parent, View v, int position, long id)
{
Toast.makeText(this,
“You have selected “ + presidents[position],
Toast.LENGTH_SHORT).show();
}
}

                注意这个活动是继承listactivity而不是Activity，在onCreate中不用setContentView而用setListAdapter来设置界面显示的项目。这里的setListAdapter接受一个Arrayadapter对象，而该Arrayadapter对象绑定了presidents数组，从而使这个活动显示的是presidents数组里面的数据。

而当用户点击某个列表项的时候，OnlistItemClick就会被触发，因为这个是listactivity的方法，所以不用另外定义一个类来实现，直接可以在活动本体内实现。实现时候注意方法的参数列表。

还可以将listview设置为允许选中多个项目。只需要在传入的Arrayadapter中，第二个参数设置成为：android.R.layout.simple_list_item_checked和将setchoicemode设置为ListView.CHOICE_MODE_MULTIPLE即可。

这样就列表上面就会有一个表示是否选中的打勾标志。

2.从strings.xml读入listview数据。

接下来介绍从strings.xml中读取字符并载入listview，首先是在strings.xml中定义一个string array。

<string-array name=”presidents_array”>
<item>Dwight D. Eisenhower</item>
<item>John F. Kennedy</item>
<item>Lyndon B. Johnson</item>
<item>Richard Nixon</item>
<item>Gerald Ford</item>
<item>Jimmy Carter</item>
<item>Ronald Reagan</item>
<item>George H. W. Bush</item>
<item>Bill Clinton</item>
<item>George W. Bush</item>
<item>Barack Obama</item>
</string-array>

直接在strings.xml的resources中加入以上声明即可。

然后将这个数组读入到listView中，首先要取得这个数组将它付给某个字符串数组变量：

String[] presidents;

presidents =
getResources().getStringArray(R.array.presidents_array);

这里用活动的getResources（）方法获得本活动的资源，然后用里面的getStringArray方法来获得里面的字符串数组，只需要传入该数组的名称（在xml中有指定），即可获得该数组的实体。之后就将该数组跟Arrayadapter绑定即可。

3.获取listView选中的选项。

可以用listView对象的getCount方法来取得列表中的元素个数，而getItemAtPosition（int index）则可以获得下标为index的元素值，isItemChecked（int index）则可以返回第index个元素是否选中，综上所有的方法，可以写出一个获得listVIew选中选项的demo，如下：

public void onClick(View view) {
ListView lstView = getListView();
String itemsSelected = “Selected items: \n”;
for (int i=0; i<lstView.getCount(); i++) {
if (lstView.isItemChecked(i)) {
itemsSelected += lstView.getItemAtPosition(i) + “\n”;
}
}
Toast.makeText(this, itemsSelected, Toast.LENGTH_LONG).show();
}

这里的onClick方法遍历所有的元素，如果元素被选中了，就把其值加入到输入的字符串中，然后再一次输入所有选中的元素。