Depth Pager Transformer так же, как SnapChat

Я пытаюсь реализовать ViewPager с DepthPageTransformer же, как приложение Snapchat. В приложении SnapChat есть экран камеры, который всегда входит в центр ViewPager и прокручивание слева или справа приводит к тому, что другие фрагменты поверх экрана камеры.

Я нашел код для DepthPageTransformer по этой ссылке. Но проблема с этой демонстрацией в том, что она выводит все последующие экраны сзади. Точно так же, как SnapChat у меня есть экран камеры в центре и 2 экрана, идущий сверху слева, и два экрана сверху сверху справа на экране камеры.

Итак, как я могу создать PageTransformer который приносит фрагменты слева или справа в верхней части моего центрального экрана, который является Camera?

Solutions Collecting From Web of "Depth Pager Transformer так же, как SnapChat"

Я думаю, вы должны предоставить 5 фрагментов в вашем FragmentPagerAdapter, третий (index = 2) фрагмент будет фрагментом с просмотром камеры,

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

Тогда ваш ViewPager.PageTransformer должен выглядеть следующим образом:

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

Я строю pageIndex то время как представление фрагмента создается в его теге.

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

Вот gif с результатами: https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

Фрагмент с пищей – это тот, который вы должны заменить фрагментом вашей камеры.

Это то, что они сделали, если вы не поняли, что концепция снимает комментарий.

В основном, что они делают, у них есть MainActivity, который показывает камеру, и она удерживает эти три кнопки внизу, а также удерживает viewpager, что viewpager содержит три фрагмента

1.LeftFragment (Фрагмент слева). 2.CenterFragment (Этот фрагмент является прозрачным, поэтому, когда он входит в центр, отображается основное содержимое активной, которое является камерой). 3.RightFragment (Фрагмент справа).

Теперь идет кодирующая часть.

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> 

Затем идут фрагменты

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> 

Я оставил часть анимации, которую, я думаю, вы можете достичь с небольшим количеством вычислений в viewpager OnPageChangeListener.

Счастливое кодирование.