Ví dụ đơn giản để bạn hiểu về Fragment trong Android

Trong bài viết lần này, mình sẽ tóm tắt các luồng cơ bản giúp các bạn hiểu được cách để implement chức năng Fragment trong Android. Mình sẽ không nêu ra những điểm chi tiết hơn như truyền đối số mà chỉ tập trung vào luồng và tư tưởng trong Fragment. Các bạn có thể tham khảo chi tiết hơn thông qua source code ở bên dưới.

Giới thiệu qua về luồng màn hình:

1. với màn hình nhỏ:

• Khi người dùng bật màn hình lên, sẽ có 2 phương án chọn giữa Article One hay Article Two.
• Sau khi người dùng chọn 1 loại article, màn hình sẽ thay đổi và hiển thị nội dung của article tương ứng.

2. với màn hình to:

• Khi người dùng bật màn hình lên, 2 phương án article one và article two sẽ nằm ở góc bên trái màn hình.
• Sau khi người dùng chọn 1 loại article, nội dung article tương ứng sẽ hiển thị ngay bên cạnh và không có sự di chuyển màn hình.

Source code: https://github.com/hoangcongminh901/Fragment_basics

1. Đầu tiên ta bắt đầu quan sát file MainActivity (https://goo.gl/ByyptE)

• Từ hàm onCreate:
• • Thực hiện cài đặt Layout cho activity bằng setContentView. Tại đây tuỳ vào kích thước của màn hình dể load file layout khác nhau (LinearLayout chứa 2 fragment với màn hình to hay chỉ có FrameLayout với màn hình nhỏ).
• • Nếu layout được chọn là FrameLayout sẽ tiến hành việc tạo Fragment cho màn hình đó bằng:

HeadlinesFragment firstFragment = new HeadlinesFragment();

• • Rồi sau đó tiến hành gắn fragment mới tạo ra này vào trong layout bằng cách:

getSupportFragmentManager().beginTransaction()
					.add(R.id.fragment_container, firstFragment).commit();

2. Tiếp theo hãy quan sát file large/news_articles.xml(https://goo.gl/6vNdN5) để hiểu tại sao không có công đoạn gắn fragment vào layout như với màn hình nhỏ.

• Ta thấy có 2 thẻ fragment đã được khai báo trong LinearLayout. 1 fragment chỉ đến class HeadlinesFragment và 1 fragment khác chỉ đến class ArticleFragment.
• Khi thông báo trong này đồng nghĩa với việc Android sẽ tự động chạy hàm khởi tạo view giúp chúng ta.

3. Bây giờ hãy cùng quan sát để hiểu hoạt động khi click vào một article mình muốn xem nội dung tại HeadlinesFragment(https://goo.gl/DPGdKN)

• Thông qua việc tạo OnHeadlineSelectedListerner interface, ta có thể buộc Activity implements interface này phải tạo function onArticleSelected nhằm giúp truyền thông tin từ Fragment lên tới Activity chứa nó (trong trường hợp này là MainActivity).
• Ta cấu trúc fragment này theo dạng list, với mỗi item trong list sẽ là tên của một article.
• HeadlinesFragment kế thừa ListFragment giúp nó có các function như nhận biết sự kiện click của người dùng vào 1 điểm trong list.
• Bằng cách dùng setListAdapter ta có thể gắn giá trị vào từng item tương ứng (trong trường hợp này là text gắn vào TextView tương ứng). Do Ipsum.Headlines là 1 array có 2 giá trị, ta sẽ tạo được 2 item trong 1 list.
• Khi người dùng chọn 1 item trong list thuộc fragment này, nó sẽ gọi tới method onListItemClick ta đã override. Tại đây, thông qua việc gọi hàm onArticleSelected đã được viết tại MainActivity, ta truyền được giá trị vị trí item đã được chọn lên Activity để thực hiện xử lý hiển thị ra nội dung Article đó.

4. Quay lại với file MainActivity (https://goo.gl/ByyptE) hàm onArticleSelected

• Tại đây có chia 2 trường hợp, với màn hình nhỏ và màn hình lớn.
• Màn hình nhỏ:
• • Sẽ tiến hành việc tạo Fragment hiển thị nội dung article đã chọn cho màn hình đó bằng:

ArticleFragment newFragment = new ArticleFragment();

Sau đó ta sẽ gán giá trị để fragment được tạo ra sẽ có giá trị thích hợp bằng:

Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);

• • Fragment này sau đó được thay thế với fragment đã được tạo ra bằng việc sử dụng

transaction.replace(R.id.fragment_container, newFragment);

• Màn hình lớn:
• • Sử dụng updateArticleView method để hiển thị thông tin article đã chọn tại fragment bên phải màn hình.

5. Cuối cùng ta đến với ArticleFragment(https://goo.gl/GJ9vv3) để xem quá trình thay đổi thông tin trên fragment ra sao:

• Quan sát method updateArticleView
• • Có thông số position được truyền vào để xác định người dùng đã ấn vào article nào
• • Tại đây ta tạo 1 TextView rồi gán giá trị text vào cho nó, kết thúc việc hiển thị nội dung article tương ứng trên ArticleFragment.

Lời kết

Bài viết với mục tiêu hướng dẫn đơn giản cách implement Fragment trong Android. Hy vọng nó sẽ giúp ích được cho các newbie yêu thích ngôn ngữ Android.