Viewpager là gì?

Viewpager là một đối tượng giống như slide show trong PowerPoin của Microsoft.
Viewpager giúp chúng ta chuyển qua trang tiếp theo hoặc trang trước đó mượt mà thay vì chỉ chớp đen một cái rồi chuyển trang.

Các bạn có thể tham khảo thêm tại đây

Hướng dẫn sử dụng

Viewpager hỗ trợ device API 13 trở lên.
Viewpager không phải là một View chuẩn trong android studio, muốn sử dụng được thì phải thêm gói android.support:design:25.2.0 (tùy phiên bản).

Chúng ta có thể thêm vào bằng cách bấm tổ hợp phím Ctrl + Alt + Shift + S, trong mục Modules chọn App, chọn thẻ dependencies, rồi bấm vào dấu + góc trên bên phải, chọn library. Hiện ra hộp thoại, ta search với từ khóa "design", chọn gói android.support:design:25.2.0 (tùy phiên bản) rồi bấm OK.

Ví dụ đơn giản về Viewpager

Trong ví dụ này mình sẽ tạo một project với 5 fragment swipe qua lại bằng cách sử dụng viewpager.

Create The Views

View này dùng để gắng vào fragment, nó gồm một đoạn text đơn giản. Tạo như sau:

 <!-- fragment_screen_slide_page.xml -->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:text="this is simple text">
</TextView>

Create The Fragment

Class Fragment sẽ trả về cái view mà mình vừa tạo ở trên trong hàm onCreateView.

import android.support.v4.app.Fragment;
...
public class ScreenSlidePageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);

        return rootView;
    }
}

Add Viewpager

Trong activity_main.xml add viewpager vào:

<!-- activity_main.xml -->
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Tiếp theo, trong class MainActivity:

Ánh xạ Viewpager.
tạo adapterViewpager extends FragmentStatePagerAdapter và implement hàm getItem() và getCount() (android studio sẽ tự gợi ý bạn add các hàm cần thiết vào). hàm getItem() sẽ trả về cái fragment chứa đoạn text, hàm getCount() trả về số lượng trang.
setAdapter cho Viewpager.

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
...
public class MainActivity extends FragmentActivity {
    /**
     * The number of pages (wizard steps) to show in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager mPager;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return new ScreenSlidePageFragment();
        }

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

Chúc các bạn thành công!

HungNguyen

Viewpager trong android