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;
}
}3. Chạy chương trình và trải nghiệm
Các bạn có thắc mắc có thể góp ý tại đây luôn nhé.
Chúc vui.
