Android World: [Android Nâng Cao] Sử Dụng ViewPager Cho Chuyển Đổi View

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách sử dụng ViewPager cho việc chuyển Activity đồng thời khi vuốt tay ( giống như khi vào Play Store các bạn vuốt tay qua trái phải để xem Top Paid apps > Top Free apps....).

I. Giới Thiệu ViewPager

Theo android.com, thì ViewPager là một trình quản lý Layout cho phép người dùng vuốt tay qua trái hay qua bên phải để chuyển sang nội dung của trang khác một cách đồng thời. Điểm khác nhau của ViewPager và cách sử dụng Gesture đó là, gesture sẽ chỉ thực hiện khi người dùng thực hiện xong thao tác vuốt tay, trong khi ViewPager thực hiện chuyển màn hình đồng thời với cử chỉ tay người dùng.

II. Code Now

1. Chuẩn bị

ViewPager không phải là một View chuẩn của Android, mà là một thành phần nằm trong gói android.support.v4.View
Nếu bạn chưa có gói này, có thể cài đặt bằng cách, mở Android SDK Manager->Extra-> tick chọn Android Support package->OK

Sau khi cài đặt, các bạn sẽ thấy có thêm một gói android-support-v4.jar nằm trong project của mình.

2. Code Now

a. Tạo mới một project mới, ví dụ đặt tên là MyApps

b. Thay đổi nội dung file main.xml như bên dưới

Mã:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://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/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></android.support.v4.view.ViewPager>

</RelativeLayout>

c. Tạo các layout cho các màn hình khác nhau khi vuốt qua trái, qua phải. Ở đây mình tạo 5 file xml cho 5 màn hình.

- layout_1.xml

Mã:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nhip"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

- layout_2.xml

Mã:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Song"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

- layout_3.xml

Mã:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Di"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

- layout_4.xml

Mã:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dong"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

- layout_5.xml

Mã:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nhipsongdidong.vn"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Phần thiết kế màn hình coi như xong.

d. Code

Cũng giống như ListView hay các các thành phần khác, ViewPager bắt buộc phải cần một Adapter để có thể xác định nội dung cần hiển thị lên View.

- Tạo một class mới kế thừa từ PagerAdapter , đặt tên là MyPagerAdapter ( chẳng hạn)

Mã:

public class PagerAdapter extends android.support.v4.view.PagerAdapter{

 
 @Override
 public int getCount() {
  //Do ở đây mình có 5 Activity nên count trả về là 5
  return 5;
 }

 //Hàm khởi tạo View dùng cho việc hiển thị Activity chính xác
 //Hàm có chức năng nôm na như hàm getView thường thấy trong Adapter của ListView, hay chính xác hơn là
 //makeView trong ImageSwitcher vậy
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  
  LayoutInflater li = (LayoutInflater) container.getContext().
    getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  
  int resId=0;
  switch(position)
  {
  case 0:
   resId = R.layout.layout_1;
   break;
  case 1:
   resId = R.layout.layout_2;
   break;
  case 2:
   resId = R.layout.layout_3;
   break;
  case 3:
   resId = R.layout.layout_4;
   break;
  case 4:
   resId = R.layout.layout_5;
   break;
  }
  
  View view = li.inflate(resId, null);
  container.addView(view, 0);
  return view;
 }
 //View nào ko còn hiển thị nữa thì xóa đi
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((View) object);
  
 }
 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  return arg0 == (View)arg1;
 }
}

- Activity chính của chương trình.

Mã:

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  PagerAdapter a = new PagerAdapter();
  ViewPager p = (ViewPager) findViewById(R.id.pager);
  p.setAdapter(a);
  p.setCurrentItem(2);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}