android-fragments 视图页中的视图在上一个视图和下一个视图之间重叠

elcex8rz  于 2022-11-14  发布在  Android
关注(0)|答案(6)|浏览(140)

我正在使用ViewPager在我的应用程序中实现滑动效果。
我用pager.setPageMargin()使下一个和上一个视图可见,不幸的是我的下一个视图与当前视图重叠。
下面是我的代码

pager = (ViewPager) findViewById(R.id.myviewpager);

    adapter = new MyPagerAdapter(this, this.getSupportFragmentManager());
    pager.setAdapter(adapter);
    pager.setOnPageChangeListener(adapter);


    // Set current item to the middle page so we can fling to both
    // directions left and right
    pager.setCurrentItem(FIRST_PAGE);

    // Necessary or the pager will only have one extra page to show
    // make this at least however many pages you can see
    pager.setOffscreenPageLimit(10);

    // Set margin for pages as a negative number, so a part of next and 
    // previous pages will be showed

    //
    pager.setPageMargin(-450);

我正在使用分页器中的片段。我得到的输出作为这个线程的附件,但需要视图被正确放置与出重叠

上图中标记的部分应位于中间卡片的后面。

inb24sb2

inb24sb21#

因为您正在设置寻呼机。setPageMargin(-450);您还需要为ViewPage的子片段和页面调度器给予240的填充。setClipToPadding(false);以获得平滑动画。
如果有人还在寻找解决方案,我已经定制了ViewPage来实现它而不使用负边距,在这里找到一个示例项目https://github.com/44kksharma/Android-ViewPager-Carousel-UI它应该在大多数情况下工作,但您仍然可以使用mPager.setPageMargin(margin in pixel);定义页面边距

7hiiyaii

7hiiyaii2#

试试看:

pager.setClipToPadding(false);
    pager.setPadding(50, 0, 50, 0);

而不是:

pager.setPageMargin(-450);
laximzn5

laximzn53#

实际上我把所需的视野带到了前面。

view.bringToFront();

注意:要识别位于视图寻呼机当前显示页面中心的正确布局

1zmg4dgp

1zmg4dgp4#

pager.setPadding(0, 0, 0, 0);
pager.setPageMargin(0, 0, 0, 0);

你只需要使用match_parent来计算视图的高度和宽度,希望对你有用。

e3bfsja2

e3bfsja25#

我已经找到一个解决方案后KitKat版本。基本上我所做的是增加当前中心视图的标高。(我仍在为前棒棒糖解决方案工作)
下面是我的代码,为您的视图页设置一个OnPageChangeListener,并在OnPageSelected方法中

@Override public void onPageSelected(int position) {

      //Counter for loop
      int count = 0;
      int PAGER_LOOP_THRESHOLD = 2;
      if (position >= PAGER_LOOP_THRESHOLD) {
        count = position - PAGER_LOOP_THRESHOLD;
      }
      do {
        Fragment fragment = (Fragment) adapter.instantiateItem(pager, count);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP
            && fragment.getView() != null) {

          //If it's current center position, increase view's elevation. Otherwise, we reduce elevation
          if (count == position) {
            fragment.getView().setElevation(8.0f);
          }
          else {
            fragment.getView().setElevation(0.0f);
          }
        }
        count++;
      } while (count < position + PAGER_LOOP_THRESHOLD);
    }
inb24sb2

inb24sb26#

首先,Viewpager项目像堆栈一样堆叠。因此,当它给出边距值时,仅在它们之间添加一个空格。为此,您应该使用transformer并为这些功能设置translationZ值。
通常有3个视图,您必须为每个视图设置位置。

position < 0 -> {
  alpha = 1f
  translationX = -width * MAX_SCALE * position
  ViewCompat.setTranslationZ(this, position)
  val scaleFactor = (MIN_SCALE
                       + (1 - MIN_SCALE) * (1 - abs(position)))
  scaleX = scaleFactor
  scaleY = scaleFactor
}

您也可以定义0.75f的最大和最小刻度。对于所有代码:

override fun transformPage(view: View, position: Float) {
        with(view) {
            when {
                position < -1 -> {
                    alpha = 1f
                }
                position < 0 -> {
                    alpha = 1f
                    translationX = -width * MAX_SCALE * position
                    ViewCompat.setTranslationZ(this, position)
                    val scaleFactor = (MIN_SCALE
                            + (1 - MIN_SCALE) * (1 - abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                position == 0f -> {
                    alpha = 1f
                    scaleX = 1f
                    scaleY = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                }
                position <= 1 -> {
                    alpha = 1f
                    translationX = width * MAX_SCALE * -position
                    ViewCompat.setTranslationZ(this, -position)
                    val scaleFactor = (MIN_SCALE
                            + (1 - MIN_SCALE) * (1 - abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> {
                    alpha = 1f
                }
            }
        }
    }

您应该将它应用于您创建的类

class OverlapPageTransformer : ViewPager2.PageTransformer {
     override fun transformPage(view: View, position: Float) {}
}

最后;

yourPager.apply {
     setPageTransformer(OverlapPageTransformer())
 }

相关问题