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;
}
}
运行效果
