Android implements ViewPager slideshow actions and adds animation effects

1. The whole file looks like this: one Activity home page, three fragments, two official Google animation examples 2

2,activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:id="@+id/activity_main"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     tools:context="com.example.sky.viewpage.MainActivity">  
  8.   
  9.     <android.support.v4.view.ViewPager  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="match_parent"  
  12.         android:id="@+id/viewPager_test">  
  13.     </android.support.v4.view.ViewPager>  
  14. </RelativeLayout>  

3. fragment_text_one.xml. The other two Fragment layouts are the same as this one, except the background color and the text shown in the middle are different

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context="com.example.sky.viewpage.text_one">  
  6.   
  7.     <!-- TODO: Update blank fragment layout -->  
  8.     <TextView  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:background="#f9f0"  
  12.         android:text="This is the first page"  
  13.         android:textSize="30dp"  
  14.         android:gravity="center"/>  
  15.   
  16. </FrameLayout>  

4. The layout file has been written. Now it is mainly the code in MainActivity. The general idea is to store the three fragments in ArrayList and get an adapter. Here we use the Fragment PagerAdapter, the code is as follows

  1. package com.example.sky.viewpage;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentPagerAdapter;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.support.v7.app.AppCompatActivity;  
  8.   
  9. import com.example.sky.viewpage.transform.ZoomOutPageTransformer;  
  10.   
  11. import java.util.ArrayList;  
  12. import java.util.List;  
  13.   
  14. public class MainActivity extends AppCompatActivity{  
  15.     private static final float MIN_SCALE = 0.75f;  
  16.     private ViewPager viewPager;  
  17.     private List<Fragment> list;  
  18.     private text_one one;  
  19.     private text_two two;  
  20.     private text_three three;  
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState) {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.activity_main);  
  25.         init();  
  26.         viewPager = (ViewPager)this.findViewById(R.id.viewPager_test);  
  27.         //Call Slide Effect  
  28.       //  viewPager.setPageTransformer(true,new DepthPageTransformer());  
  29.         viewPager.setPageTransformer(true,new ZoomOutPageTransformer());  
  30.   
  31.         viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  
  32.             @Override  
  33.             public Fragment getItem(int position) {  
  34.                 return list.get(position);  
  35.             }  
  36.   
  37.             @Override  
  38.             public int getCount() {  
  39.                 return list.size();  
  40.             }  
  41.         });  
  42.     }  
  43.     //Initialize data  
  44.     public void init()  
  45.     {  
  46.   
  47.         list = new ArrayList<>();  
  48.         one = new text_one();  
  49.         two = new text_two();  
  50.         three = new text_three();  
  51.   
  52.         list.add(one);  
  53.         list.add(two);  
  54.         list.add(three);  
  55.     }  
  56. }  

Here is a simple, traditional left-right slider.

5. Next we'll create two animations to make the sliding screen look more comfortable.

1. ViewPager has a method: setPageTransformer (boolean reverseDrawingOrder,PageTransformer transformer) can be used to set the animation effect when switching, and Google has officially given two examples, DepthPageTransformer and ZoomOutPageTransformer, which can be animated simply by calling them in the code above.

(1) DepthPageTransformer
   
  1. package com.example.sky.viewpage.transform;  
  2.   
  3. import android.support.v4.view.ViewPager;  
  4. import android.view.View;  
  5.   
  6. /** 
  7.  * Created by sky on 2017/4/2. 
  8.  */  
  9.   
  10. public class DepthPageTransformer implements ViewPager.PageTransformer {  
  11.     private static final float MIN_SCALE = 0.50f;  
  12.     @Override  
  13.     public void transformPage(View view, float position) {  
  14.         int pageWidth = view.getWidth();  
  15.   
  16.         if (position < -1) { // [-Infinity,-1)  
  17.             // This page is way off-screen to the left.  
  18.             view.setAlpha(0);  
  19.   
  20.         } else if (position <= 0) { // [-1,0]  
  21.             // Use the default slide transition when moving to the left page  
  22.             view.setAlpha(1);  
  23.             view.setTranslationX(0);  
  24.             view.setScaleX(1);  
  25.             view.setScaleY(1);  
  26.   
  27.         } else if (position <= 1) { // (0,1]  
  28.             // Fade the page out.  
  29.             view.setAlpha(1 - position);  
  30.   
  31.             // Counteract the default slide transition  
  32.             view.setTranslationX(pageWidth * -position);  
  33.   
  34.             // Scale the page down (between MIN_SCALE and 1)  
  35.             float scaleFactor = MIN_SCALE  
  36.                     + (1 - MIN_SCALE) * (1 - Math.abs(position));  
  37.             view.setScaleX(scaleFactor);  
  38.             view.setScaleY(scaleFactor);  
  39.   
  40.         } else { // (1,+Infinity]  
  41.             // This page is way off-screen to the right.  
  42.             view.setAlpha(0);  
  43.         }  
  44.     }  

}

Call code:

viewPager.setPageTransformer(true,new DepthPageTransformer());
(2) ZoomOutPageTransformer
  1. package com.example.sky.viewpage.transform;  
  2.   
  3. import android.support.v4.view.ViewPager;  
  4. import android.util.Log;  
  5. import android.view.View;  
  6.   
  7. /** 
  8.  * Created by sky on 2017/4/2. 
  9.  */  
  10.   
  11. public class ZoomOutPageTransformer implements ViewPager.PageTransformer {  
  12.     private static final float MIN_SCALE = 0.85f;  
  13.     private static final float MIN_ALPHA = 0.5f;  
  14.     @Override  
  15.     public void transformPage(View view, float position) {  
  16.         int pageWidth = view.getWidth();  
  17.         int pageHeight = view.getHeight();  
  18.   
  19.         Log.e("TAG", view + " , " + position + "");  
  20.   
  21.         if (position < -1)  
  22.         { // [-Infinity,-1)  
  23.             // This page is way off-screen to the left.  
  24.             view.setAlpha(0);  
  25.   
  26.         } else if (position <= 1//Slide page a to page b; page a from 0.0-1; page B from 1 to 0.0  
  27.         { // [-1,1]  
  28.             // Modify the default slide transition to shrink the page as well  
  29.             float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));  
  30.             float vertMargin = pageHeight * (1 - scaleFactor) / 2;  
  31.             float horzMargin = pageWidth * (1 - scaleFactor) / 2;  
  32.             if (position < 0)  
  33.             {  
  34.                 view.setTranslationX(horzMargin - vertMargin / 2);  
  35.             } else  
  36.             {  
  37.                 view.setTranslationX(-horzMargin + vertMargin / 2);  
  38.             }  
  39.   
  40.             // Scale the page down (between MIN_SCALE and 1)  
  41.             view.setScaleX(scaleFactor);  
  42.             view.setScaleY(scaleFactor);  
  43.   
  44.             // Fade the page relative to its size.  
  45.             view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)  
  46.                     / (1 - MIN_SCALE) * (1 - MIN_ALPHA));  
  47.   
  48.         } else  
  49.         { // (1,+Infinity]  
  50.             // This page is way off-screen to the right.  
  51.             view.setAlpha(0);  
  52.         }  
  53.     }  
  54. }  
Call Code
viewPager.setPageTransformer(true,new ZoomOutPageTransformer());

Okay, that's it. Here's the screenshot

Tags: Android Fragment xml Google

Posted on Thu, 05 Mar 2020 08:14:00 -0800 by jandrews