Question

我正在尝试使用像外观一样的卡片来实现垂直可滑动的ViewPager。

我可以使用ViewPager.PageTransformer实现VerticalViewPager并交换触摸点。我正在关注卡片外观 -

我想实现以下外观 -

我怎样才能达到这个效果？在此先感谢。

Answer 1

为了实现这种垂直的View Pager ，没有任何库依赖 您可以按照以下步骤操作：

在 activity_main.xml

中

<android.support.v4.view.ViewPager
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="600dp"
    android:id="@+id/viewpager">
</android.support.v4.view.ViewPager>

在 viewpager_contents.xml

您可以根据上述内容创建所需的设计图片。

创建适配器和模型类以保存数据。

4.在 MainActivity.java 中，设置适配器和pageTransformer后添加以下代码。

private class ViewPagerStack implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position >= 0) {
            page.setScaleX(0.7f - 0.05f * position);
            page.setScaleY(0.7f);
            page.setTranslationX(-page.getWidth() * position);
            page.setTranslationY(30 * position);
        }
    }
}

有关详细参考，您可以观看此视频： CLICK HERE

希望你能得到你需要的输出!!

Answer 2

魔术在这里https://github.com/yuyakaido/CardStackView。您可以轻松自定义所需的内容。编码愉快：）

Answer 3

上面的解决方案中没有一个对我有效。这是我的解决方案：

我的PageTransformer类：

class ViewPagerCardTransformer : ViewPager.PageTransformer {
  override fun transformPage(page: View, position: Float) {
    if (position >= 0) {
      page.scaleX = 0.9f - 0.05f * position
      page.scaleY = 0.9f
      page.alpha = 1f - 0.3f * position
      page.translationX = -page.width * position
      page.translationY = -30 * position
    } else {
      page.alpha = 1 + 0.3f * position
      page.scaleX = 0.9f + 0.05f * position
      page.scaleY = 0.9f
      page.translationX = page.width * position
      page.translationY = 30 * position
    }
  }
}

片段中的代码：

val adapter = MyPagerAdapter(pageItems)
viewPager.adapter = adapter
/*below line will increase the number of cards stacked on top of 
each other it is set to 1 by default. don't increase it too much as you
will end up with too much view page items in your memory
*/
mDaysViewPager.offscreenPageLimit = 3 
viewPager.setPageTransformer(true, ViewPagerCardTransformer())

Android垂直视图寻呼机与卡堆栈

3 个答案: