【开源】MultiViewPager

MultiViewPager

• 项目地址： https://github.com/Pixplicity/MultiViewPager

  介绍：

  MultiViewPager 是根据support-v4 中ViewPager 控件改造而来，它可以让ViewPager一次显示更宽或者更窄的内容，它很好的处理了page之间的位置关系，能保证每次被选中的page显示在中间。

  运行效果：

使用说明：

直接将MultiViewPager放入布局文件中

1 2 3 4 5 6 7

<com.pixplicity.multiviewpager.MultiViewPager     android:id="@+id/pager"     android:layout_width="match_parent"     android:layout_height="0dp"     android:layout_marginTop="16dp"     android:layout_weight="1"     app:matchChildWidth="@+id/child_view_to_match" />

注意要声明命名空间：

1	xmlns:app="http://schemas.android.com/apk/res-auto"

MultiViewPager使用的特别之处是matchChildWidth属性，matchChildWidth的值需要和ViewPager的第一个子view的id相同，在例子程序中，page的布局为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="${relativePackage}.${activityClass}" >       <FrameLayout         android:id="@+id/vg_cover"         android:layout_width="200dp"         android:layout_height="match_parent"         android:layout_centerInParent="true" >           <ImageView             android:layout_width="match_parent"             android:layout_height="match_parent"             android:layout_marginLeft="16dp"             android:layout_marginRight="16dp"             android:background="@drawable/bg_page"             android:scaleType="centerInside"             android:src="@drawable/im_pixplicity"             tools:ignore="ContentDescription" />     </FrameLayout>   </RelativeLayout>

因此MultiViewPager的matchChildWidth属性就为@id/vg_cover:

1 2 3 4 5 6 7

<com.pixplicity.multiviewpager.MultiViewPager     android:id="@+id/pager"     android:layout_width="match_parent"     android:layout_height="0dp"     android:layout_marginTop="16dp"     android:layout_weight="1"     app:matchChildWidth="@+id/vg_cover" />

 这样，它就知道如何为page分配大小。

相关代码

• ParallaxPagerTransformer
• DragTopLayout
• freepager