使用翻转动画在视图寻呼机中切换片段
Switch fragments in view pager with flip animation
我一直在尝试在 fragmentStatePagerAdapter 中切换片段,但即使我能够在同一位置从片段 C-D 进行更改;我无法为过渡设置动画。
对于实现此效果的任何建议,我将不胜感激:
A - B - C
| - >来回翻转过渡
D
ABC 或 ABD 有正常的动画过渡,但在 C 中,如果我单击一个按钮,我需要用翻转动画交换片段 D,如果我正在看 D 翻转回 C。
*您可以使用 * PageTransformer.
对其进行动画处理
参见下面的示例代码。
public class MainActivity extends FragmentActivity {
SectionsPagerAdapter mSectionsPagerAdapter;
ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// activity_main.xml should contain a ViewPager with the id "@+id/pager"
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// set the card transformer and set reverseDrawingOrder to true, so the fragments are drawn from the right to
// the left
mViewPager.setPageTransformer(true, new CardTransformer(0.7f));// Animation.
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = new DummyFragment();
return fragment;
}
@Override
public int getCount() {
return 10;
}
}
public static class DummyFragment extends Fragment {
public DummyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
LinearLayout root = new LinearLayout(getActivity());
root.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
root.setOrientation(LinearLayout.VERTICAL);
for (int r = 0; r < 5; r++) {
LinearLayout row = new LinearLayout(getActivity());
row.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1.0f));
row.setOrientation(LinearLayout.HORIZONTAL);
row.setGravity(Gravity.CENTER);
for (int c = 0; c < 4; c++) {
ImageView icon = new ImageView(getActivity());
icon.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f));
icon.setScaleType(ScaleType.CENTER);
icon.setImageResource(R.drawable.ic_launcher);
row.addView(icon);
}
root.addView(row);
}
return root;
}
}
public class CardTransformer implements PageTransformer {
private final float scalingStart;
public CardTransformer(float scalingStart) {
super();
this.scalingStart = 1 - scalingStart;
}
@Override
public void transformPage(View page, float position) {
if (position >= 0) {
final int w = page.getWidth();
float scaleFactor = 1 - scalingStart * position;
page.setAlpha(1 - position);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setTranslationX(w * (1 - position) - w);
}
}
}
}
或
您可以使用 ViewPagerTransforms Libraray.
它会在切换片段时进行动画处理。
training documentation 详细介绍了如何创建卡片翻转动画。要按照您的描述实现这一点,您需要做的就是将 ViewPager
的最后两个片段('C' 和 'D' 片段嵌套在一个片段中;然后将动画应用于过渡:
public class CardFlipFragment extends Fragment {
private boolean mShowingBack = false;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_card_flip, container, false);
if(savedInstanceState == null) {
getChildFragmentManager()
.beginTransaction()
.add(R.id.container, new FrontFragment())
.commit();
}
return view;
}
public void onFlip(View view) {
if(mShowingBack) {
getChildFragmentManager().popBackStack();
} else {
mShowingBack = true;
getChildFragmentManager()
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out)
.replace(R.id.container, new BackFragment())
.addToBackStack(null)
.commit();
}
}
}
我一直在尝试在 fragmentStatePagerAdapter 中切换片段,但即使我能够在同一位置从片段 C-D 进行更改;我无法为过渡设置动画。
对于实现此效果的任何建议,我将不胜感激:
A - B - C | - >来回翻转过渡 D
ABC 或 ABD 有正常的动画过渡,但在 C 中,如果我单击一个按钮,我需要用翻转动画交换片段 D,如果我正在看 D 翻转回 C。
*您可以使用 * PageTransformer.
对其进行动画处理参见下面的示例代码。
public class MainActivity extends FragmentActivity {
SectionsPagerAdapter mSectionsPagerAdapter;
ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// activity_main.xml should contain a ViewPager with the id "@+id/pager"
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// set the card transformer and set reverseDrawingOrder to true, so the fragments are drawn from the right to
// the left
mViewPager.setPageTransformer(true, new CardTransformer(0.7f));// Animation.
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = new DummyFragment();
return fragment;
}
@Override
public int getCount() {
return 10;
}
}
public static class DummyFragment extends Fragment {
public DummyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
LinearLayout root = new LinearLayout(getActivity());
root.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
root.setOrientation(LinearLayout.VERTICAL);
for (int r = 0; r < 5; r++) {
LinearLayout row = new LinearLayout(getActivity());
row.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1.0f));
row.setOrientation(LinearLayout.HORIZONTAL);
row.setGravity(Gravity.CENTER);
for (int c = 0; c < 4; c++) {
ImageView icon = new ImageView(getActivity());
icon.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f));
icon.setScaleType(ScaleType.CENTER);
icon.setImageResource(R.drawable.ic_launcher);
row.addView(icon);
}
root.addView(row);
}
return root;
}
}
public class CardTransformer implements PageTransformer {
private final float scalingStart;
public CardTransformer(float scalingStart) {
super();
this.scalingStart = 1 - scalingStart;
}
@Override
public void transformPage(View page, float position) {
if (position >= 0) {
final int w = page.getWidth();
float scaleFactor = 1 - scalingStart * position;
page.setAlpha(1 - position);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setTranslationX(w * (1 - position) - w);
}
}
}
}
或
您可以使用 ViewPagerTransforms Libraray.
它会在切换片段时进行动画处理。
training documentation 详细介绍了如何创建卡片翻转动画。要按照您的描述实现这一点,您需要做的就是将 ViewPager
的最后两个片段('C' 和 'D' 片段嵌套在一个片段中;然后将动画应用于过渡:
public class CardFlipFragment extends Fragment {
private boolean mShowingBack = false;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_card_flip, container, false);
if(savedInstanceState == null) {
getChildFragmentManager()
.beginTransaction()
.add(R.id.container, new FrontFragment())
.commit();
}
return view;
}
public void onFlip(View view) {
if(mShowingBack) {
getChildFragmentManager().popBackStack();
} else {
mShowingBack = true;
getChildFragmentManager()
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out)
.replace(R.id.container, new BackFragment())
.addToBackStack(null)
.commit();
}
}
}