带有DepthPageTransformer z-index问题的Android viewpager

Question

我实现了一个带有DepthPageTransformer的viewpager，在页面中我有一些输入（收音机，复选框，选择选项......）。除了一个有线错误之外它工作正常：有时当我点击页面P1上的位置（x，y）时，页面P2的该位置的输入被触发。

P1：

P2（P1之后的那个）：

现在当我点击P1页面上的这个位置时：

我得到了第P2页显示的选择选项：

它类似于Web开发中的z-index问题。

DepthPage Transformer的代码与文档中的代码相同：http://developer.android.com/training/animation/screen-slide.html#pagetransformer。

public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);

    } else if (position <= 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1 - position);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);

        // Scale the page down (between MIN_SCALE and 1)
        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

    } else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(0);
    }
}
}

关于如何解决这个重叠问题的任何想法？

Answer 1

试试这个：

public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

if (position < -1) { // [-Infinity,-1)
    // This page is way off-screen to the left.
    view.setAlpha(0);

} else if (position <= 0) { // [-1,0]
    // Use the default slide transition when moving to the left page
    view.setAlpha(1);
    view.setTranslationX(0);
    view.setScaleX(1);
    view.setScaleY(1);
    // -------- THIS LINE ---
    view.bringToFront();
    // -------- THIS LINE ---

} else if (position <= 1) { // (0,1]
    // Fade the page out.
    view.setAlpha(1 - position);

    // Counteract the default slide transition
    view.setTranslationX(pageWidth * -position);

    // Scale the page down (between MIN_SCALE and 1)
    float scaleFactor = MIN_SCALE
            + (1 - MIN_SCALE) * (1 - Math.abs(position));
    view.setScaleX(scaleFactor);
    view.setScaleY(scaleFactor);

} else { // (1,+Infinity]
    // This page is way off-screen to the right.
    view.setAlpha(0);
}
}
}

Answer 2

您只需要反转绘制顺序：

public function actionHomepage()
{
    $values = $_GET['contentIds'];
    $sql = "UPDATE news SET idChecked=0,homepagePos = -1";
    Yii::app()->db
        ->createCommand($sql)
        ->execute();
    for($ii = 0; $ii < 3; $ii++) {
        $sql = "UPDATE news SET idChecked = 1,homepagePos = ':homepagePos' WHERE id=:id";
        Yii::app()->db
            ->createCommand($sql)
            ->bindValues(array(':homepagePos' => array_search($ii, $values), ':id' => $values[$ii]))
            ->execute();
    }
}

在任何情况下，您都可以使用代码示例here

Answer 3

其他解决方案是使用OnPageChangeListener：

pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
    @Override public void onPageSelected(final int position) {
        pager.postDelayed(new Runnable() {
            @Override
            public void run() {
                pagerAdapter.getItem(position).getView().bringToFront();
            }
        }, 300);
    }
    @Override public void onPageScrollStateChanged(int state) { }
});

效率更高。