Trong Lesson 2, bạn đã làm quen với các views cơ bản khác nhau như các TextView, EditText, Button, và làm thế nào bạn có thể sử dụng chúng trong các ứng dụng Android. Trong Lesson 3, chúng ta sẽ tiếp tục tìm hiểu thêm ba loại views khác: - Picker views, List views, Display views. bao gồm:

[list][*]TimePicker view[*]DatePicker view[*]ListView view[*]Spinner view[*]Gallery view[*]ImageView[*]ImageSwitcher view[*]GridView view[/list]
Chú ý: các project trong bài này sẽ sử dụng project trong bài trước.
[b][size=6]Picker Views[/size][/b]

Trong bài tập bNote sẽ có chức năng hẹn giờ để nhắc "note" và chắc chắn sẽ sử dụng đến loại views này để đặt thời gian nhắc cho ứng dụng bNote, vì thế bạn nên đọc kỹ và cố gắng tìm hiểu thêm. Dưới đây tôi sẽ viết mang tính chất giới thiệu qua cho bạn.
[b][size=5]
TimePicker View[/size][/b]

TimePicker cho phép người dùng lựa chọn một thời gian trong ngày, trong cả hai hình thức: 24h hoặc AM/PM. Thêm một file mới vào thư mục res/layout tên là datetimepicker.xml như sau:



PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TimePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>


Thêm một class tên là DateTimePickerExample vào package src/net.learn2develop.androidviews như sau:



PHP:
package net.learn2develop.androidviews;

import android.app.Activity;
import android.os.Bundle;

public class DateTimePickerExample extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.datetimepicker);
}
}


Thêm một khai báo cho Activity mới vào file AndroidManifest.xml:



PHP:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="net.learn2develop.androidviews"
android:versionCode="1"
android:versionName="1.0.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">

<activity android:name=".ViewsActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

<activity android:name=".DateTimePickerExample"
android:label="@string/app_name" />

</application>
</manifest>


sửa file ViewsActivity.java để sử dụng Activity vừa tạo ở trên như sau:



PHP:
package net.learn2develop.androidviews;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

public class ViewsActivity extends Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

startActivity(new Intent(this, DateTimePickerExample.class));

}
}



kết quả như sau:


[url=http://android.vn/attachments/8574/]View attachment 8574[/url]


[b][size=4]Displaying the TimePicker View in a Dialog Window[/size][/b]


Bạn cũng có thể hiển thị TimePicker trong một cái Dialog. Sửa đổi các lớp DateTimePickerExample như sau:




PHP:
package net.learn2develop.androidviews;

import android.app.Activity;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.Toast;

public class DateTimePickerExample extends Activity
{
int hour, minute;
static final int TIME_DIALOG_ID = 0;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.datetimepicker);
showDialog(TIME_DIALOG_ID);
}

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

private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay;
minute = minuteOfHour;
Toast.makeText(getBaseContext(),
"You have selected : " + hour + ":" + minute,
Toast.LENGTH_SHORT).show();
}
};
}


Kết quả như sau:


[url=http://android.vn/attachments/8575/]View attachment 8575[/url]

[b][size=5]DatePicker View[/size][/b]

Giống như TimePicker, DatePicker cho phép người dùng chọn một ngày. Sửa đổi file datetimepicker.xml như sau:



PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>
Hãy comment dòng code đã được thêm vào trong phần trước
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.datetimepicker);
//---remove this line---
//showDialog(TIME_DIALOG_ID);
}


Kết quả như hình sau:


[url=http://android.vn/attachments/8576/]View attachment 8576[/url]

[b][size=4]Displaying the DatePicker View in a Dialog Window[/size][/b]

Bạn cũng có thể hiển thị DatePicker trong một cái dialog như TimePicker trên. Sửa đổi lớp DateTimePickerExample như sau:



PHP:
package net.learn2develop.androidviews;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.widget.DatePicker;
import android.widget.TimePicker;
import android.widget.Toast;

public class DateTimePickerExample extends Activity
{
int hour, minute;
int Year, month, day;

static final int TIME_DIALOG_ID = 0;
static final int DATE_DIALOG_ID = 1;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.datetimepicker);
showDialog(DATE_DIALOG_ID);
}

@Override
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, Year, month, day);
}
return null;
}

private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
//...
};

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


Kết quả như hình sau:


[url=http://android.vn/attachments/8577/]View attachment 8577[/url]


[b][size=6]List Views[/size][/b]


[i]Ở đây do như cầu bài bNote cũng khá là đơn giản nên tôi chỉ giới thiệu qua về ListView về các dùng nó như thế nào để các bạn hiểu. [/i]Đây cũng là view khá quan trọng và khá phức tạp được sử dụng hầu hết trong các ứng dụng android nên sẽ có 1 bài viết riêng về nhóm view này sau.

ListView và Spinner thường được sử dụng để hiện thị các danh sách dài các items.

[b][size=5]ListView View[/size][/b]


ListView hiển thị một danh sách các item trong danh sách cuộn theo chiều dọc. Để xem ListView sử dụng và làm việc thế nào, thêm một file mới vào thư mục res/layout tên là listview.xml như sau:




PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="@+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

</LinearLayout>
Thêm một class mới vào thư mục src/net.learn2develop.androidviews tên là ListViewExample, như sau:
package net.learn2develop.androidviews;

import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import android.app.ListActivity;

public class ListViewExample 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"
};

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.listview);

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


Chú ý là lớp ListViewExample kế thừ từ lớp ListActivity chứ không phải là Activity Khai báo Activity mới này trong file AndroidManifest.xml như sau:



PHP:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="net.learn2develop.androidviews"
android:versionCode="1"
android:versionName="1.0.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">

<activity android:name=".ViewsActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

<activity android:name=".ListViewExample"
android:label="@string/app_name" />

</application>
</manifest>


Sử đổi file ViewsActivity.java để sử dụng Activity vừa tạo ra như sau:




PHP:
package net.learn2develop.androidviews;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

public class ViewsActivity extends Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

startActivity(new Intent( this, ListViewExample.class));

}
}


Kết quả thu được như hình sau:


[url=http://android.vn/attachments/8578/]View attachment 8578[/url]


[b][size=5]Spinner View[/size][/b]


Spinner chỉ hiển thị ra một item từ danh sách và cho phép người dùng lựa chọn giữa chúng. Thêm một file mới vào thư mục res/layout tên là spinner.xml như sau:




PHP:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
androidrientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Spinner
android:id="@+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />

</LinearLayout>


Tương tự chúng ta cũng thêm 1 file có tên là SpinnerExample trong package src/net.learn2develop.androidview như sau để xem nó dùng như thế nào.