Android的ViewPager與PageTransformer丟失它的Z-索引

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和變壓器的初始化看起來是這樣的：

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; 

這使它好很多。