4 phút để đọc
ViewPager trong Android cho phép người dùng vuốt sang trái hoặc phải để chuyển qua các trang dữ liệu. Trong ứng dụng Android ViewPager, chúng ta sẽ triển khai một ViewPager cho phép vuốt qua ba view khác nhau, mỗi view sẽ hiển thị hình ảnh và văn bản riêng biệt.
Android ViewPager
ViewPager là một widget có trong support library của Android, cho phép người dùng vuốt sang trái hoặc phải để chuyển sang một màn hình hoàn toàn mới.
Trong hướng dẫn này, chúng ta sẽ triển khai ViewPager bằng cách sử dụng Views kết hợp với PagerAdapter. Mặc dù cũng có thể triển khai tương tự bằng cách dùng Fragments, nhưng nội dung đó sẽ được trình bày trong một hướng dẫn khác.
ViewPager sử dụng một lớp PagerAdapter, có nhiệm vụ cung cấp các view cho MainActivity, tương tự như cách mà ListAdapter hoạt động với ListView.
->> Bài viết liên quan: Truyền dữ liệu giữa các fragment trong Android
Ví dụ về Android ViewPager
Mã ví dụ về Android ViewPager
Tệp activity_main.xml chỉ chứa một thành phần duy nhất là ViewPager, như được hiển thị dưới đây:
<RelativeLayout xmlns:android="<https://schemas.android.com/apk/res/android>"
xmlns:tools="<https://schemas.android.com/tools>"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Dưới đây là nội dung của tệp MainActivity.java
package com.journaldev.viewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
Vai trò của MainActivity trong đoạn mã trên chỉ đơn giản là tham chiếu đến ViewPager và thiết lập một CustomPagerAdapter kế thừa từ lớp PagerAdapter.
Trước khi chúng ta tìm hiểu lớp CustomPagerAdapter, hãy cùng xem qua lớp ModelObject được định nghĩa trong tệp ModelObject.java.
package com.journaldev.viewpager;
public enum ModelObject {
RED(R.string.red, R.layout.view_red),
BLUE(R.string.blue, R.layout.view_blue),
GREEN(R.string.green, R.layout.view_green);
private int mTitleResId;
private int mLayoutResId;
ModelObject(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
Enum ở trên liệt kê tất cả các trang của ViewPager. Có tổng cộng ba trang, mỗi trang tương ứng với một layout riêng.
Dưới đây là layout của một trang đơn view_blue.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<https://schemas.android.com/apk/res/android>"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@android:color/holo_blue_dark"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second View"
android:layout_gravity="center_horizontal"
android:textSize="28sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe left to\\nFirst View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:minLines="2"
android:id="@+id/textView2"
android:padding="@dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe right to\\nThird View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:padding="@dimen/activity_horizontal_margin"
android:minLines="2"
android:id="@+id/textView3"
android:layout_alignTop="@+id/textView2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Hai trang còn lại có bố cục tương tự và đều được định nghĩa trong phần mã nguồn của dự án này CustomPagerAdapter.java.
package com.journaldev.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
ModelObject modelObject = ModelObject.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() {
return ModelObject.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
ModelObject customPagerEnum = ModelObject.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}
}
CustomPagerAdapter(Context context): Constructor (hàm khởi tạo) này cần một tham chiếu đến Context. Context này được lưu dưới dạng biến thành viên của lớp, vì nó sẽ được sử dụng sau đó để truy cập vào các layout của từng trang, được định nghĩa trong lớp enum.
instantiateItem: Trong trường hợp này, chúng ta sử dụng enum và “inflate” (nạp) layout tương ứng với giá trị enum đó. Sau đó, layout vừa được nạp sẽ được thêm vào ViewGroup (tập hợp các View) mà PagerAdapter quản lý, và cuối cùng chúng ta trả về layout đó. Đối tượng được trả về từ phương thức này cũng sẽ được dùng sau đó làm tham số thứ hai trong phương thức isViewFromObject.
destroyItem: Phương thức này dùng để loại bỏ một view cụ thể khỏi ViewGroup mà PagerAdapter đang quản lý.
getCount: Trả về số lượng view mà ViewPager sẽ quản lý. Trong ví dụ này, giá trị count chính là số giá trị enum có trong lớp ModelObject.
isViewFromObject: Phương thức này kiểm tra xem một đối tượng cụ thể có tương ứng với một vị trí nhất định trong ViewPager hay không. Tham số thứ hai là một đối tượng thuộc kiểu Object, và nó chính là đối tượng được trả về từ phương thức instantiateItem trước đó.
getPageTitle: Tại mỗi vị trí, PagerAdapter cần có một tiêu đề trang. Tiêu đề này thường hiển thị trên ActionBar của Activity hoặc được sử dụng trong các tab để gán nhãn cho từng tab. Trong trường hợp này, phương thức được sử dụng đơn giản để đặt tiêu đề cho từng trang.
Hình ảnh dưới đây cho thấy ứng dụng khi đang chạy.
