.:: CODE SNIPPET ::.

"Your time is limited, so don't waste it living someone else's life"

Sử dụng ListView căn bản-cập nhật ListView


Nối tiếp bài viết trước giới thiệu về ListView, trong bài viết này, mình sẽ mở rộng kết quả của bài trước. Đó là, chúng ta sẽ thực hiện cho người dùng thêm một dòng dữ liệu mới vào danh sách và cập nhật nó hiển thị lên màn hình.
Trong bài trước, mình đã sử dụng cơ sở dữ liệu là một mảng cứng với những chuỗi đã được khai báo sẵn. Nhưng trong bài này thì khác, vì dữ liệu chúng ta sẽ thay đổi, vì thế chúng ta phải thay đổi cơ sở dữ liệu này bằng một cấu trúc cơ sở dữ liệu để có thể quản lý việc cập nhật mở rộng dữ liệu. Đó là phần chính yếu của bài viết này, bạn sẽ hiểu kỹ hơn bên dưới.
Trước tiên bạn phải thay đổi về mặt giao diện chương trình một chút để nó trở thành như thế này:

Sự khác biệt chỉ là nó có thêm một nút Add để giúp chúng ta thêm dữ liệu vào. Bạn thay đổi file activity_main.xml như sau:

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

    <ListView
        android:id="@+id/lstPhoneNumber"
        android:layout_width="fill_parent"
        android:layout_height="156dp"
        android:layout_above="@+id/linner02"
        android:layout_alignParentTop="true" />

    <LinearLayout
        android:id="@+id/linner02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_weight="0.2"
        android:orientation="vertical" >

        <Button
            android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="@string/btnAdd" />
    </LinearLayout>

</RelativeLayout>

Sau khi đã có giao diện như mong muốn, giờ bạn thay đổi cơ sở dữ liệu (items) thành ArrayList như sau:

private ArrayList<String> items;

Như vậy trong file Activity chính của bạn sẽ như sau:

public class StringListView extends Activity {

	private static final int DIALOG_ADD = 0;
	private ListView listViewPhoneNumber;
	private ArrayAdapter<String> mainAdapter;
	/*public String[] items = { "01666005668", "01689937489", "08520231",
			"01666005668", "01689937489", "08520231", "01666005668",
			"01689937489", "08520231", "01666005668", "01689937489", "08520231" };*/

	private ArrayList<String> items;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listViewPhoneNumber = (ListView) findViewById(R.id.lstPhoneNumber);

		items=new ArrayList<String>();
		mainAdapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, items);
		listViewPhoneNumber.setAdapter(mainAdapter);
	}

Trong đoạn code trên, các bạn thấy mình đã bỏ trong phần comment đoạn dữ liệu cũ để các bạn thấy là nó như thế nào. Và khi khai báo một ArrayList, thì trong hàm onCreate bạn cần khai báo cho nó nhé items=new ArrayList();. Lúc này chương trình của bạn đã hoạt động được, nhưng khi chạy lên bạn sẽ thấy trống trơn trong ListView vì cơ sở dữ liệu của bạn chưa có.
Bây giờ là lúc chúng ta xây dựng việc thêm dữ liệu.
Đầu tiên các bạn cần có một file layout với tên dia_add.xml như sau, để làm gì thì mình sẽ giải thích bên dưới:

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

    <EditText
        android:id="@+id/txtNewString"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:lines="1" >
    </EditText>
</LinearLayout>

Để nhập dữ liệu, chương trình sẽ cho hiển thị lên một dialog (khi nhấn vào nút Add) với một EditText để người dùng có thể nhập dữ liệu muốn hiện thị lên ListView, thì EditText đó là cái mà mình đã khai báo trong file dia_add.xml như trên.

Sau đó, bạn cần thực hiện Override một hàm để có thể hiển thị một dialog như vậy vào Activity chính của chương trình như sau:

@Override
	protected Dialog onCreateDialog(int id) {
		// TODO Auto-generated method stub
		switch (id) {
		case DIALOG_ADD:
			LayoutInflater factory = LayoutInflater.from(this);
			final View textEntryView = factory.inflate(R.layout.dia_add, null);

			return new AlertDialog.Builder(StringListView.this)
					.setTitle("New phone")
					.setView(textEntryView)
					// dialog.getWindow().getAttributes().windowAnimations=R.style.Animations_SmileWindow;

					.setPositiveButton("Add",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int whichButton) {
									EditText txtNew = (EditText) textEntryView
											.findViewById(R.id.txtNewString);
									final String text = txtNew.getText()
											.toString();
									items.add(text);
									mainAdapter.notifyDataSetChanged();
								}
							})
					.setNegativeButton("Cancel",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int whichButton) {
									/* User clicked cancel so do some stuff */
								}
							}).create();
		}
		return null;
	}

Trong đó:
DIALOG_ADD: là một hằng số kiểu int đã khai báo bên trên ở đây nó có một giá trị int cố định để có thể switch thui ấy mà.
Rồi trong này, bạn cũng thêm vào file layout dia_add.xml vừa mới làm ở trên, cho Inflate phân tích ra và ta có một EditText có id là textNewString, nhờ đó nó có thể đọc dữ liệu vào. Sau khi đọc dữ liệu vào (khi thực hiện nhấn Add) thì chúng ta thêm chuỗi vừa nhập vào cơ sở dữ liệu bằng hàm items.add(text); của ArrayList. Và ở đây, mình sử dụng hàm mainAdapter.notifyDataSetChanged(); để cho adapter thực hiện cập nhật lại dữ liệu đã bị thay đổi, từ đó nó tự động được hiển thị lên màn hình của ListView như mong muốn.
Chú ý: muốn cho dialog này có thể hiển thị lên, thì bạn phải thực hiện bắt sự kiện click của nút Add. Trong sự kiện này, bạn sử dụng hàm showDialog(DIALOG_ADD); để hiện thị dialog lên nhé. Mà theo mình biết là hàm này đã bị deprecated rồi, nhưng chưa biết dùng thằng nào khác, nên chơi nó luôn.
Cuối cùng Activity của bạn sẽ như sau:

public class StringListView extends Activity {

	private static final int DIALOG_ADD = 0;
	private ListView listViewPhoneNumber;
	private ArrayAdapter<String> mainAdapter;
	private ArrayList<String> items;
	private Button btnAdd;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listViewPhoneNumber = (ListView) findViewById(R.id.lstPhoneNumber);
		btnAdd = (Button) findViewById(R.id.btnAdd);

		items=new ArrayList<String>();
		mainAdapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, items);
		listViewPhoneNumber.setAdapter(mainAdapter);
		btnAdd.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				showDialog(DIALOG_ADD);
				
			}
		});
	}

	@Override
	protected Dialog onCreateDialog(int id) {
		// TODO Auto-generated method stub
		switch (id) {
		case DIALOG_ADD:
			LayoutInflater factory = LayoutInflater.from(this);
			final View textEntryView = factory.inflate(R.layout.dia_add, null);

			return new AlertDialog.Builder(StringListView.this)
					.setTitle("New phone")
					.setView(textEntryView)
					// dialog.getWindow().getAttributes().windowAnimations=R.style.Animations_SmileWindow;

					.setPositiveButton("Add",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int whichButton) {
									EditText txtNew = (EditText) textEntryView
											.findViewById(R.id.txtNewString);
									final String text = txtNew.getText()
											.toString();
									items.add(text);
									mainAdapter.notifyDataSetChanged();
								}
							})
					.setNegativeButton("Cancel",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int whichButton) {
									/* User clicked cancel so do some stuff */
								}
							}).create();
		}
		return null;
	}

}

Bây giờ chương trình của bạn đã hoạt động ok rùi đó.
PS: Vì viết để demo, nên trong chương trình nhiều chỗ mình không kiểm tra tính đúng đắn này nọ, các bạn tự thêm vào nhé.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: