Question

我正在尝试使用ViewPager实现DepthPageTransformer，就像Snapchat应用程序一样。在SnapChat应用程序中，有一个Camera屏幕始终位于ViewPager的中心，从左或右滑动会在摄像机屏幕上方显示其他碎片。

我从this链接找到了DepthPageTransformer的代码。但是这个演示的问题在于它从后面带来了所有下一个屏幕视图。就像SnapChat一样，我在中央有一个摄像头屏幕，两个屏幕从左上方开始，两个屏幕从摄像头屏幕右上方显示。

那么，我怎样才能创建一个PageTransformer，它会在我的中心屏幕顶部左侧或右侧显示片段，即Camera？

Answer 1

我认为你应该在你的FragmentPagerAdapter中提供5个片段，第三个（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

食物碎片是您应该用相机碎片替换的碎片。

Answer 2

这是他们所做的，如果你没有得到这个概念的评论。

基本上他们正在做的是他们有一个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中进行一点点计算。

快乐编码。

深度寻呼机变压器就像SnapChat

2 个答案: