android学习(十八) 添加动画(二) 使用ViewPager的屏幕幻灯片

    xiaoxiao2021-04-15  30

    完成以下文件: · src/ScreenSlidePageFragment.java · src/ScreenSlideActivity.java · layout/activity_screen_slide.xml · layout/fragment_screen_slide_page.xml


    创建Views

    <!-- fragment_screen_slide_page.xml --> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView style="?android:textAppearanceMedium" android:padding="16dp" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" /> </ScrollView>

    创建Fragment

    public class ScreenSlidePageFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_screen_slide_page,container,false); return rootView; } }

    添加ViewPager

    <!-- activity_screen_slide.xml --> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> 设置content作为viewpager的内容视图创建一个类继承fragmentstatepageradapter抽象类,实现getItem()提供screenslidepagefragment实例。同时活该需要继承getCount()返回page的数量。ViewPager设置适配器 PagerAdapter通过在虚拟堆栈堆栈中向后移动来处理设备的后退按钮。如果用户已经在第一页上,返回活动返回堆栈。 public class ScreenSlideActivity extends FragmentActivity { //pages的个数 private static final int NUM_PAGES = 5; private ViewPager mPager; private PagerAdapter mPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_screen_slide); //实例化ViewPager和PagerAdapter mPager = (ViewPager) findViewById(R.id.pager); mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager()); mPager.setAdapter(mPagerAdapter); } //如果page为一则退出,如果page不为一则返回上一个page @Override public void onBackPressed() { if(mPager.getCurrentItem()==0){ super.onBackPressed(); }else { mPager.setCurrentItem(mPager.getCurrentItem()-1); } } //有5个ScreenSlidePageFragment的Viewpager的PaferAdapter private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter{ public ScreenSlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } } }

    用PageTransformer自定义动画

    显示不同于默认viewpager的动画需要实现viewpager.pagetransformer接口,并提供给viewpager。该接口提供了单一的方法,transformpage()。每页页面有移动时,邻近的页面都会调用这个方法 通过设置setAlpha(),setTranslationX()或 setScaleY()等方法自定义viewpager。

    实现PageTransformer需要调用setPageTransformer()方法实现自定义动画

    ViewPager mPager = (ViewPager) findViewById(R.id.pager); ... mPager.setPageTransformer(true, new ZoomOutPageTransformer());

    缩小页变压器

    public class ZoomOutPageTransformer implements ViewPager.PageTransformer { //最小比例 private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @Override public void transformPage(View page, float position) { int pageWidth = page.getWidth(); int pageHeight = page.getHeight(); //position指两个page之间的位置[-1,1] if(position<-1){ //[-无穷,-1) //这个页面是关闭屏幕左边 page.setAlpha(0); } else if(position<=1){ //[-1,1] //修改默认的幻灯片转换为缩小页面 float scaleFactor = Math.max(MIN_SCALE,1-Math.abs(position)); //竖直边缘 float vertMargin = pageHeight*(1-scaleFactor)/2; //横向边缘 float horzMargin = pageWidth * (1 - scaleFactor) / 2; //定位位置 if(position<0){ page.setTranslationX(horzMargin - vertMargin/2); } else { page.setTranslationX(-horzMargin + vertMargin/2); } //page向下的比例[MIN_SCALE,1] page.setScaleX(scaleFactor); page.setScaleY(scaleFactor); page.setAlpha(MIN_ALPHA+(scaleFactor-MIN_SCALE)/(1-MIN_SCALE)*(1 - MIN_ALPHA)); } else { //[1,+无穷] page.setAlpha(0); } } }

    深度页变压器

    在深度动画,默认的动画(画面幻灯片)仍然发生,所以你必须抵消了负X平移屏幕幻灯片。

    view.setTranslationX(-1 * view.getWidth() * position);

    实现方法:

    public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { view.setAlpha(0); } else if (position <= 0) { // [-1,0] //当移动到左页时使用默认的幻灯片转换 view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] //淡出页面 view.setAlpha(1 - position); //抵消默认幻灯片转换 view.setTranslationX(pageWidth * -position); float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { view.setAlpha(0); } } }

    摘自android developer

    转载请注明原文地址: https://ju.6miu.com/read-671688.html

    最新回复(0)