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和transform的初始化如下所示：

    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

After a lot of digging I changed the "contentView1" a little bit so I set the background on the viewpager and the contentView1´s background to transparent. I also set the level of ALPHA to 0.6f.

public static final float ALPHA_VALUE = 0.6f;

That made it a lot better.

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

1 个答案: