Depth Pager Transformer podobnie jak SnapChat

Question

Próbuję zaimplementować ViewPager z DepthPageTransformer podobnie jak aplikacja Snapchat. W aplikacji SnapChat znajduje się ekran aparatu, który zawsze znajduje się w środku ViewPager, a przesuwanie z lewej lub prawej strony powoduje wyświetlenie innych fragmentów na ekranie aparatu.

Znalazłem kod dla DepthPageTransformer z linku this. Ale problem z tym demo polega na tym, że przynosi on wszystkie następne widoki ekranu z tyłu. Podobnie jak SnapChat mam ekran kamery w środku i 2 ekrany na górze od lewej i dwa ekrany nadawane z prawej strony na ekranie aparatu.

Jak zatem utworzyć PageTransformer, który przenosi fragmenty z lewej lub prawej strony na środku mojego środkowego ekranu, którym jest Aparat?

Answer 1

myślę, że należy dostarczyć 5 fragmentów w FragmentPagerAdapter, trzecia (indeks = 2) fragment będzie fragment z widoku kamery,

viewPager.setCurrentItem(2); //2 is index of camera fragment 

Wtedy twój ViewPager.PageTransformer powinna wyglądać następująco:

@Override 
public void transformPage(View page, float position) { 
    int pageIndex = (int) page.getTag(); //im stroing pageIndex of fragment in its tag 
    if(pageIndex == 2) { //2 is index of camera fragment 
    float currentTranslation = - position * page.getWidth(); 
    ViewCompat.setTranslationX(page, currentTranslation); 
    ViewCompat.setTranslationZ(page, -1); 
    return; 
} 

Jestem stroing pageIndex, podczas gdy widok fragmentu jest tworzony w jego znaczniku.

@Nullable 
@Override 
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
    ... 
    view.setTag(pageIndex); 
    return view; 
} 

Oto gif z wynikami: https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

Fragment z jedzeniem jest jeden należy wymienić z fragmentem aparatu.

Answer 2

Oto, co zrobili, jeśli nie masz pomysłu, skomentuj komentarz.

Zasadniczo co robią to oni mają główną działalność, która jest przedstawiający aparat i trzyma te trzy przyciski w dolnej części oraz jego odbycie viewpager tym viewpager trzyma trzy fragmenty

1.LeftFragment (fragment na lewa strona). 2.CenterFragment (ten fragment jest przezroczysty, więc gdy dojdzie do środka, widoczna jest główna treść, czyli kamera). 3.Refragmentacja w prawo (fragment po prawej stronie).

Teraz jest częścią kodującą.

MainActivity.java.

public class MainActivity extends AppCompatActivity { 

    private ViewPager mViewPager; 

    @RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH) 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     mViewPager = (ViewPager) findViewById(R.id.view_pager); 
     mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager())); 

     mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
       //Here calculate the amount by which the pages are scrolled and animate your buttons accordingly. 
      } 

      @Override 
      public void onPageSelected(int position) { 

      } 

      @Override 
      public void onPageScrollStateChanged(int state) { 

      } 
     }); 

    } 


    class PagerAdapter extends FragmentStatePagerAdapter { 

     public PagerAdapter(FragmentManager fm) { 
      super(fm); 
     } 

     @Override 
     public Fragment getItem(int position) { 
      switch (position) { 
       case 0: 
        return new LeftFragment(); 
       case 1: 
        return new CenterFragment(); 
       case 2: 
        return new RightFragment(); 
      } 
      return null; 
     } 

     @Override 
     public int getCount() { 
      return 3; 
     } 
    } 
} 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:openDrawer="start"> 


    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="Here is your camera." 
     android:textAppearance="?android:attr/textAppearanceLarge"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 


    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:text="Button"/> 


</RelativeLayout> 

Potem następuje fragmenty

LeftFragment.java

public class LeftFragment extends BaseController { 
    @Override 
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
     View rootView = inflater.inflate(R.layout.fragment_sheet2, container, false); 
     return rootView; 
    } 
} 

fragment_left.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="2dp"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#FFA726" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" 
      android:fontFamily="sans-serif" 
      android:text="Left" 
      android:textColor="#fff" 
      android:textSize="30sp"/> 

    </RelativeLayout> 
</android.support.v7.widget.CardView> 

RightFragment.java

public class RightFragment extends BaseController { 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
     View rootView = inflater.inflate(R.layout.fragment_sheet1, container, false); 

     return rootView; 
    } 
} 

fragment_right.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="2dp"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#FFA726" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" 
      android:fontFamily="sans-serif" 
      android:text="Right" 
      android:textColor="#fff" 
      android:textSize="30sp"/> 

    </RelativeLayout> 
</android.support.v7.widget.CardView> 

zostawiłem część animacji, które myślę, że można osiągnąć przy odrobinie obliczeń w viewpager OnPageChangeListener.

Happy Coding.