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.
- Pestañas de la barra de acciones anidadas (con ViewPager)
- Cambios de color de fondo de Android con ViewPager en ICS
- ViewPager dentro de Fragmento pierde su contenido cuando se vuelve a mostrar el fragmento
- PagerTabStrip: cambia el ancho de la pestaña
- Fragmentos dentro de ViewPager no se destruyen
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?
- Cómo forzar a ViewPager a volver a instanciar sus elementos
- Endless ViewPager android
- Sincronizar todo el ListView en un ViewPager
- Recyclerviews en ViewPager
- Deshabilitar ItemTouchHelper para una parte de un visor
- Android ViewPager w / varias clases de fragmentos cada w / archivo de diseño independiente
- NullPointerException al mostrar un ViewPager una segunda vez
- Asistente condicional / inicialización con ViewPager
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.
- Diferencia entre dibujable y drawable-mdpi
- ¿Puedo obtener un seguimiento de pila de C ++ cuando se bloquea la aplicación de Android?