PDA

View Full Version : [Android] View Pager simple tutorial



snake_programmer
19-07-2013, 10:19 AM
Hi các bạn,
Lâu rồi không vào ghé thăm 4rum, thấy box Android, Java mới mở nên chưa có nhiều ae hưởng ứng cho lắm. Nay snake xin viết một tut nho nhỏ để khơi động box lên chút, hy vọng ae hưởng ứng, đón nhận vui vẻ.
Tut này hướng dẫn về cách thức triển khai ViewPager ( 1 view phổ biến hay được sử dụng: Slide Image, các màn hình giới thiệu,...). Điều kiện trước tiên là các bạn phải hiểu sơ qua Fragment.


1: http://developer.android.com/guide/components/fragments.html
2: http://marakana.com/s/post/1250/android_fragments_tutorial
11516

Các bước tuần tự như sau:
1: Add thư viện hỗ trợ Fragment.
2: Thiết kế layout cho 3 Fragment sẽ được sử dụng ( Ở đây demo mình dùng 3).
Thiết kế layout chứa ViewPager.
3: Tạo class java cho 3 layout trên.
4: Tạo class java để xử lý với ViewPager.

1: Add thư viện hỗ trợ Fragment:
Nếu là từ Android version 3.0 trở lên hỗ trợ sẵn Fragment thì các bạn không cần bổ sung thêm gói android-support-v4.jar . Còn trước đó thì các bạn phải add file này vào thư mục libs ( Mặc định bây giờ khi tạo project là nó có sẵn cho mình rồi ).
2: Thiết kế layout cho 3 Fragment:
Cái này các bạn thích thiết kế như thế nào cũng được.
Layout cho ViewPager quản lý:


<?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" >

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

3: Tạo class Java cho 3 layout trên:
_ Các bạn cần tạo Activity kế thừa lớp Fragment ( Nhớ import thư viện support v4 nhé, không Ctrl + Shift + O để add thư viện mà lại add của mặc định Android là hỏng đấy!!!).
Code như sau:


public class FragmentA extends Fragment implements OnClickListener {
/** TextView Forever Alone! :) . */
private TextView tvFA;
private String result;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// get parameter.
Bundle bundle = getArguments();
result = bundle.getString("test");

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragmenta_layout, container, false);
tvFA = (TextView) v.findViewById(R.id.tvFA);
tvFA.setOnClickListener(this);
return v;
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tvFA:
showToast("Forever Alone! :) " + result);
break;

default:
break;
}
}

/**
* Method used to show an message toast to screen.
*
* @param msg
* Message watn to display.
*/
private void showToast(String msg) {
Toast.makeText(getActivity().getBaseContext(), msg, Toast.LENGTH_SHORT)
.show();
}
}


Ở trên mình viết code đại diện cho class thứ nhất: FragmentA.java
Trong đó các bận cần chú ý:
1: Kế thừa lớp Fragment.
2: Ở method onCreate() mình có làm mẫu về việc nhận giá trị truyền từ bên ngoài vào fragment này. Cách truyền sẽ ở lớp xử lý ViewPager.
3: Các inflate view ở onCreateView().
Mình đã comment đầy đủ.

4: Tạo class Java để xử lý với ViewPager.
Ở lớp này bạn cần kế thừa lớp FragmentActivity, đây là lớp cơ sở khi bạn muốn sử dụng Fragment và Loader APIs.
Khi sử dụng nó bạn cần phải sử dụng phương thức: getSupportFragmentManager() để có quyền truy cập vào Fragment.
ViewPager để thực hiện được cần có Adapter , chính vì vậy chúng ta sẽ tạo ra một Adapter để quản lý dữ liệu.


/**
* Adapter su dung de quan ly view pager.
*
* @author TuanLQ.
*
*/
private class ViewPagerAdapter extends FragmentStatePagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
// xu ly tuy vao bien position ma phan chia fragment theo cach bo
// tri cua minh.
switch (position) {
case 0:
// Goi ra Fragment A.
Fragment fragmentA = new FragmentA();
Bundle bundle = new Bundle();
bundle.putString("test", "test");
fragmentA.setArguments(bundle);
return fragmentA;
case 1:
// Goi ra Fragment B.
Fragment fragmentB = new FragmentB();
return fragmentB;

case 2:
// Goi ra Fragment C.
Fragment fragmentC = new FragmentC();
return fragmentC;
default:
break;
}
return null;
}

@Override
public int getCount() {
return NUM_PAGES;
}
}


Các phương thức chính:
1: getCount():
Trả về số View sẽ được hiển thị ( Ở đây của chúng ta là 3). Về sau bạn có thể tùy biến để lấy về tổng số bản ghi dữ liệu trong database, tổng số thông tin lấy từ trên server...
2: getItem(int position):
Sẽ trả về View với position hiện tại mà ViewPager trỏ tới.
Ở đây mình sử dụng truyền tham số với FragmentA.
Chi tiết:
Link: _http://developer.android.com/training/animation/screen-slide.html

Chắc vậy thôi nhỉ, các bạn có thể xem code, chạy code demo để hiểu rõ hơn. :)
Chúc các bạn code vui vẻ!