Depth Pager Transformer igual que SnapChat

Estoy tratando de implementar ViewPager con DepthPageTransformer al igual que la aplicación Snapchat. En la aplicación SnapChat, hay una pantalla de la cámara que siempre viene en el centro de ViewPager y pasar de izquierda a derecha trae otros fragmentos en la parte superior de la pantalla de la cámara.

He encontrado el código de DepthPageTransformer desde este enlace. Pero el problema con esta demostración es que trae todas las vistas de la pantalla siguiente desde atrás. Al igual que SnapChat tengo una pantalla de la cámara en el centro y 2 pantallas que vienen en la parte superior de la izquierda y dos pantallas que vienen en la parte superior de la derecha en la pantalla de la cámara.

Entonces, ¿cómo puedo crear un PageTransformer que trae fragmentos de izquierda o derecha en la parte superior de mi pantalla de centro que es la cámara?

Creo que debe proporcionar 5 fragmentos en su FragmentPagerAdapter, el tercer fragmento (índice = 2) será fragmento con la vista de la cámara,

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

Entonces su ViewPager.PageTransformer debe tener este aspecto:

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

Estoy stroing pageIndex mientras que la vista de fragmento se crea en su etiqueta.

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

Aquí está GIF con resultados: https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

Fragmento con alimentos es el que debe reemplazar con su fragmento de cámara.

Esto es lo que han hecho, si usted no consigue el lanzamiento del concepto un comentario.

Básicamente lo que están haciendo es que tienen una MainActivity que está mostrando la cámara y que es la celebración de los tres botones en la parte inferior más su celebración viewpager que viewpager es la celebración de tres fragmentos

1.LeftFragment (Fragmento en el lado izquierdo). 2.CenterFragment (Este fragmento es transparente por lo que cuando se trata en el centro de la mainactivity el contenido es visible que es la cámara). 3.RightFragment (Fragmento en el lado derecho).

Ahora viene la parte de codificación.

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> 

Luego vienen los fragmentos

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> 

He dejado la parte de la animación que creo que se puede lograr con un poco de cálculo en viewpager OnPageChangeListener.

Codificación feliz.

  • No se puede actualizar / actualizar listview en un fragmento de otro fragmento en ViewPager
  • Deshabilitar animación suave al hacer clic en las pestañas con ViewPagerIndicator
  • Desactivar la animación de desplazamiento de ViewPager
  • El ViewPagerIndicator no es fácil con 1000 páginas
  • Guardar / Restaurar fragmentos de estado android
  • El menú deslizante bloquea el evento táctil en la vista superior
  • ¿Cómo mostrar sólo imágenes de memoria caché en ViewPager con Universal Image Loader Android?
  • Vista de desplazamiento horizontal en páginas de desplazamiento horizontal
  • OnClick en ViewPager no activado
  • Animación de visor de Android
  • Cómo interceptar eventos de contacto desde ViewPager.OnPageChangeListener
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.