Depth Pager Transformer wie SnapChat

Question

Ich versuche ViewPager mit DepthPageTransformer wie Snapchat-Anwendung zu implementieren. In der SnapChat-Anwendung gibt es einen Kamera-Bildschirm, der immer in der Mitte von ViewPager erscheint und durch Wischen von links oder rechts andere Fragmente auf den Kamerabildschirm bringt.

Ich habe Code für DepthPageTransformer von this Link gefunden. Aber das Problem mit dieser Demo ist, dass es alle folgenden Bildschirmansichten von hinten bringt. Genau wie SnapChat habe ich einen Kamera-Bildschirm in der Mitte und zwei Bildschirme, die von links oben kommen und zwei Bildschirme, die oben rechts auf dem Kamera-Bildschirm erscheinen.

Also, wie kann ich eine PageTransformer erstellen, die Fragmente von links oder rechts auf der Oberseite meines Center-Bildschirms bringt, die Kamera ist?

Answer 1

Ich glaube, Sie 5 Fragmente in Ihrem FragmentPagerAdapter bieten sollten, der dritte (Index = 2) Fragment Fragment mit Kamera-Ansicht sein,

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

Dann wird Ihre ViewPager.PageTransformer soll wie folgt aussehen:

@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; 
} 

Ich stroße pageIndex während Fragments Ansicht in seinem Tag erstellt wird.

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

Hier gif mit den Ergebnissen: https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

Fragment mit der Nahrung die ist, die Sie mit Ihrer Kamera Fragmente ersetzen sollen.

Answer 2

Dies ist, was sie getan haben, wenn Sie nicht das Konzept schießen einen Kommentar bekommen.

Im Allgemeinen, was sie tun, ist sie haben eine MainActivity die die Kamera zeigt, und es wird viewpager dieser viewpager diese drei Tasten in der unteren plus seine Halte Halten hält drei Fragmente

1.LeftFragment (Fragment auf das linke Seite). 2.CenterFragment (Dieses Fragment ist transparent, also wenn es in der Mitte kommt, ist der Inhalt der Hauptaktivität sichtbar, was die Kamera ist). 3.RightFragment (Fragment auf der rechten Seite).

Jetzt kommt der Codierteil.

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> 

Dann kommt die Fragmente

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> 

ich die Animation Teil verlassen haben, was ich denke, Sie mit wenig Rechen in viewpager OnPageChangeListener erreichen können.

Glückliche Kodierung.