Android 垂直滑动ViewPager实现

今天在用QQ电影的时候，里面热门电影展示是一个类似ViewPager垂直滑动的效果，感觉很新奇，于是乎在网上找了找，最后找到JakeWharton的一个开源项目：Android-DirectionalViewPager

github地址：https://github.com/JakeWharton/Android-DirectionalViewPager

这个项目实际上是在ViewPager的基础上，做了一个扩展，加入了对上下方向滑动的支持，正如项目的名字，使用该项目，可以灵活的改变ViewPager的方向,而且仅用一个简单的属性设置就可以做到,我只对该项目提供的例子做了一些简单的改动，就做到了QQ电影垂直滑动的效果。

DirectionalViewPager:直接继承自ViewPager,主要在onInterceptTouchEvent()和onTouchEvent()里面加入了对于垂直方向滑动的支持.并提供了setOrientation()这个方法,我们可以通过此方法，直接设置ViewPager的滑动效果，垂直或者是水平滑动。
VerticalViewPagerCompat:提供了设置DataSetObserver的方法:setDataSetObserver()

public class DirectionalViewPager extends ViewPager {
    private static final String TAG = "DirectionalViewPager";
    private static final String XML_NS = "http://schemas.android.com/apk/res/android";
    private static final boolean DEBUG = false;

    private static final boolean USE_CACHE = false;

    public static final int HORIZONTAL = 0;
    public static final int VERTICAL = 1;

github还有另外一个项目VerticalViewPager：https://github.com/LambergaR/VerticalViewPager，它也可以实现垂直滑动的效果。不过它和ViewPager一样都是继承自ViewGroup，而且不是继承ViewPager。

下面介绍如何使用DirectionalViewPager

DirectionalViewPager的使用方法和ViewPager差不多，因为它是继承自ViewPager，只是多了一个setOrientation()方法而已。

首先，在布局文件引用DirectionalViewPager

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.directionalviewpager.DirectionalViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:orientation="horizontal">
        
        <Button
            android:id="@+id/horizontal"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:text="Horizontal" />
        <Button
            android:id="@+id/vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginLeft="1dp"
            android:text="Vertical" />
        
    </LinearLayout>

</LinearLayout>

然后在Activity中对DirectionalViewPager进行初始化，代码如下：

public class SampleActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //Set up the pager
        final DirectionalViewPager pager = (DirectionalViewPager)findViewById(R.id.pager);
        pager.setAdapter(new TestFragmentAdapter(getSupportFragmentManager()));

        //Bind to control buttons
        ((Button)findViewById(R.id.horizontal)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setOrientation(DirectionalViewPager.HORIZONTAL);
            }
        });
        ((Button)findViewById(R.id.vertical)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setOrientation(DirectionalViewPager.VERTICAL);
            }
        });
    }
}

DirectionalViewPager 的适配器类

class TestFragmentAdapter extends FragmentPagerAdapter {
	protected static final String[] CONTENT = new String[] { "This", "Is Is", "A A A", "Test", };

	public TestFragmentAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int position) {
		return TestFragment.newInstance(CONTENT[position]);
	}

	@Override
	public int getCount() {
		return CONTENT.length;
	}
}

运行效果

VerticalViewPager的使用可以参考这篇博文：http://my.eoe.cn/readonly/archive/5838.html