带有 Page Transformer 的 Android ViewPager 失去了它的 Z-index

Question

我有一个关于viewpager 上的交叉淡入淡出的问题，其中我的对象取决于它们的z 层。我找到了这个主题OnPageChangeListener alpha crossfading，它提供了我所追求的确切解决方案，除了在滑动中忽略 z 层，但仅适用于左侧的项目，而不是右侧的项目。

首先，您可以看到左侧的内容，其中按钮被“切成两半”，然后是过渡，第三，右侧的项目显示了按钮的全部内容。我不明白为什么该按钮仅部分可见以及我需要做什么才能使其完全可见？

content_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/sand">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textSize="30dp"
        android:text="Hello World!" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_below="@+id/title" />

</RelativeLayout>

content_main_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="350dp">

    <ImageView
        android:id="@+id/background_color"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="center" />

    <RelativeLayout
        android:id="@+id/background_part"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/sand"
        android:layout_gravity="center_horizontal|bottom">

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/item_container"
        android:layout_width="match_parent"
        android:layout_height="350dp">

        <ImageView
            android:id="@+id/page_image"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerInParent="true"
            android:src="@drawable/smaller" />

        <TextView
            android:id="@+id/page_header"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignBottom="@+id/page_image"
            android:layout_marginBottom="45dp"
            android:text="Header Blue"
            android:lines="2"
            android:textColor="@android:color/black"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:gravity="center"
            android:textSize="20dp" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            >

        <Button
            android:id="@+id/page_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:text="Click me"
            />

        </FrameLayout>

    </RelativeLayout>

</FrameLayout>

我修改后的CustomPageTransformer：

  public class CustomPageTransformer implements ViewPager.PageTransformer {

        public static final float ALPHA_VALUE = 0.8f;

        public void transformPage(View view, float position) {
            int pageWidth = view.getWidth();
            View backgroundImageView = view.findViewById(R.id.background_color);

            View contentView1 = view.findViewById(R.id.item_container);

            if (position < -1) {
                // This page is way off-screen to the left
            } else if (position <= 0) { // [-1,0]
                // This page is moving out to the left

                if (backgroundImageView != null) {
                    // Fade the image in
                    backgroundImageView.setAlpha(ALPHA_VALUE + position);
                }

                // But swipe the contentView
                swipeContent(position, pageWidth, contentView1);

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

            } else if (position <= 1) { // (0,1]
                // This page is moving in from the right

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

                swipeContent(position, pageWidth, contentView1);

                if (backgroundImageView != null) {
                    // Fade the image out
                    backgroundImageView.setAlpha(ALPHA_VALUE - position);
                }

            } else {
                // This page is way off-screen to the right
            }

            contentView1.bringToFront();
        }

        private void swipeContent(float position, int pageWidth, View view) {
            if (view != null) {
                view.setTranslationX(pageWidth * position);
            }
        }
    }

viewpager和transformer的初始化是这样的：

    viewPager = (ViewPager) findViewById(R.id.viewPager);
    viewPager.setPageTransformer(false, new CustomPageTransformer());
    pagerAdapter = new ItemPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(pagerAdapter);
    viewPager.setOffscreenPageLimit(1);

    pagerAdapter.setItems(items);

您可以找到完整的源代码here。

Answer 1

经过大量挖掘后，我稍微更改了“contentView1”，因此我将 viewpager 上的背景和 contentView1 的背景设置为透明。我还将 ALPHA 的级别设置为 0.6f。

public static final float ALPHA_VALUE = 0.6f;

这让它变得更好了。