带有旋转变换的ViewPager

Question

我想创建一个ViewPager，在滑动时围绕其getWidth()和getHeight()轴旋转。我尝试过不同的变换，但只有垂直和水平方向上的效果。

是否有任何方法或提示可以开发这种类型的ViewPager？

编辑-解释旋转的类型：

轴- getWidth，getHeight应该是旋转的中心点，一旦我滑动它，它就会旋转，并且对于下一页，它应该从（0，getHeight）轴旋转。 为了简化，考虑这个简单的场景-

1. 有一个分成4部分的圆 2. 目前只显示1部分，其他3部分在屏幕外面 3. 一旦我从右向左滑动，ViewPager应该从页面1旋转到页面2。 4. 如果我从左到右滑动，ViewPager应该从页面1旋转到页面4。 5. 进入和退出页面都应该每次从圆的中心旋转。 6. 圆的中心在第1页的getWidth，getHeight处。因此，对于下一页，它将始终是0，getHeight作为轴，对于上一页，它将始终是getWidth，0作为轴。

- Jimit Patel

---

不要对负面投票发表评论！ - Jimit Patel

Answer 1

更新 据我所读，您想要像这样的过渡效果。如下所示实现了一个ViewPager.PageTransformer。

这里是ViewPager.PageTransformer类：

public class RotationCircleTransformer implements ViewPager.PageTransformer {


    public RotationCircleTransformer() {
    }

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();
        view.setPivotX((float) pageWidth);
        view.setPivotY((float) pageHeight);

        if (position < -1) { //[-infinity,1)
            //off to the left by a lot
            view.setRotation(0);
            view.setAlpha(0);
        } else if (position <= 1) { //[-1,1]
            view.setTranslationX((-position) * pageWidth); //shift the view over
            view.setRotation(position * (90)); //rotate it
            // Fade the page relative to its distance from the center
            view.setAlpha(Math.max(1, 1 - Math.abs(position) / 3));
        } else { //(1, +infinity]
            //off to the right by a lot
            view.setRotation(0);
            view.setAlpha(0);
        }
    }
}

background_quarter.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="300dp" android:width="300dp"/>
    <solid android:color="#00F"/>
    <corners android:topLeftRadius="300dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"/>
</shape>

activity_circle_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="300dp" />


</FrameLayout>

fragment_content.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:id="@+id/bg"
    android:background="@drawable/background_quarter">

    <TextView
        android:id="@+id/text"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="40dp"
        android:textColor="@android:color/white"
        android:text="" />

</FrameLayout>

CircleFragment.class

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;


public class CircleFragment extends Fragment {

    private String typeString;

    public CircleFragment() {
    }

    public static CircleFragment newInstance(String type) {
        CircleFragment fragment = new CircleFragment();
        Bundle args = new Bundle();
        args.putString("type", type);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            typeString = getArguments().getString("type","1");
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content, container, false);
        ;
        TextView text = (TextView) view.findViewById(R.id.text);
        FrameLayout bg = (FrameLayout) view.findViewById(R.id.bg);
        switch (typeString) {
            case "1":
                bg.setBackgroundDrawable(ContextCompat.getDrawable(getContext(), R.drawable.background_quarter));
                break;
            case "2":
                bg.setBackgroundDrawable(ContextCompat.getDrawable(getContext(), R.drawable.background_quarter));
                break;
            case "3":
                bg.setBackgroundDrawable(ContextCompat.getDrawable(getContext(), R.drawable.background_quarter));
                break;
            case "4":
                bg.setBackgroundDrawable(ContextCompat.getDrawable(getContext(), R.drawable.background_quarter));
                break;
        }
        text.setText(typeString);
        return view;
    }

}

CirclePagerActivity.class

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class CirclePagerActivity extends AppCompatActivity {

    ViewPager mPager;
    CirclePagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circle_pager);
        mPager = (ViewPager) findViewById(R.id.pager);
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(ContentFragment.newInstance("1"));
        fragments.add(ContentFragment.newInstance("2"));
        fragments.add(ContentFragment.newInstance("3"));
        fragments.add(ContentFragment.newInstance("4"));
        mAdapter = new CirclePagerAdapter(getSupportFragmentManager(), fragments);
        mPager.setAdapter(mAdapter);

        mPager.setPageTransformer(true, new RotationCircleTransformer());
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    static class CirclePagerAdapter extends FragmentStatePagerAdapter {

        List<Fragment> mFrags = new ArrayList<>();

        public CirclePagerAdapter(FragmentManager fm, List<Fragment> frags) {
            super(fm);
            mFrags = frags;
        }

        @Override
        public Fragment getItem(int position) {
            int index = position % mFrags.size();
            return mFrags.get(index);
        }

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

    }
}

如果您找不到适合的 ViewPager 转换动画，可以自己实现 ViewPager.PageTransformer 。 这里 提供了很多信息和多个示例。

此外，在这里 您还可以找到一个有用的教程。

---

您能详细解释一下这部分吗？我将根据您的解释更新我的答案（视觉说明更佳）。

绕其宽度（getWidth（））和高度（getHeight（））轴旋转。

（注：此处为回答，没有可供展示的视觉说明）该句话意思是物体会绕着它的宽度和高度轴进行旋转。其中，getWidth() 和 getHeight() 是获取视图宽度和高度的方法。

- Oğuzhan Döngül

---

那些链接我已经看过了。关于解释部分，请查看问题，我已经编辑过了。 - Jimit Patel

很酷...这就是我在找的那个GIF...让我试试。完成后会点赞并纠正答案。谢谢 :) - Jimit Patel

厉害，成功了。抱歉之前没能及时给你点赞，因为我在外出旅行。 - Jimit Patel

嗯，我不太明白 - 使用这种变换是否可以围绕位于可见屏幕外的轴进行旋转？也就是说，视图是否允许pivotX/Y大于屏幕尺寸？ - Antek

@Antek，旋转轴点不在屏幕外面，是的，你可以将视图和轴点放在可见屏幕之外，我确实是用手机制作了这个gif。你可以制作比这更复杂的动画。 - Oğuzhan Döngül