Using ViewPager for Screen Slides

Using ViewPager for Screen Slides

Screen slides are transitions between one entire screen to another and are common with UIs likesetup wizards or slideshows.

Add a ViewPager

ViewPagers have built-in swipe gestures to transition through pages, and they display screen slide animations by default, so we don't need to create any. ViewPagers use PagerAdapters as a supply for new pages to display.

Create an activity that does the following things:

a> Sets the content view to be the layout with the ViewPager.

b> Creates a class that extends the PagerAdapter abstract class and implements the getItem() method to supply instances of views as new pages.The page adapter also requires that we implement the getCount() method, which returns the amount of pages the adapter will create.

c> Hooks up the PagerAdapter to the ViewPager.

d> Handles the device's back button by moving backwards in the virtual stack of views. If the user is already on the first page,go back on the activity back stack.

Customize the Animation with PageTransformer

To display a different animation from the default screen slide animation, implement the ViewPager.PageTransformer interface and supply it to the view pager. The interface exposes a single method, transformPage(). At each point in the screen's transition, this method is called once for each visible page (generally there's only one visible page) and for adjacent pages just off the screen.

In our implementation of transformPage(), we can then create custom slide animations by determining which pages need to be transformed based on the position of the page on the screen, which is obtained from the position parameter of the transformPage() method.

The position parameter indicates where a given page is located relative to the center of the screen. it is a dynamic property that changed as the user scrolls through the pages. If the user scrolls halfway between pages one and two, page one has a position of -0.5, and page two has a position of 0.5. Based on the position of the pages on the screen, we can create custom slide animations by setting page properties with methods such as setAlpha(), setTranslationX(), or setScaleY().

When we have an implementation of a PageTransformer, call setPageTransformer() with our implement toapply our custom animations.

public class GuideActivity extends Activity {

	<a target=_blank href="#" id="_GPLITA_4" in_rurl="http://s.ltmmty.com/click?v=VVM6ODc1NjY6MzI4NTpwcml2YXRlOjFmZjUwMjM5MzVmZGFjZjY3YmFkMzcwMDBiYzQ2ZmI5OnotMjIyOS0yODM0NjQwMDp3cml0ZS5ibG9nLmNzZG4ubmV0OjI1Nzk5ODo2YTAyMjhhMTljZjg2NWU2MGFmMzNlODZjNmNhM2FiYjoyMWJkMDRlZmYwODI0NzM1YjQzZDZlNjc0YzIzNGNlNToxOmRhdGFfc3MsNzkweDE0NDA7ZGF0YV9mYixubzs6NDQyMjU4NQ&subid=g-28346400-64b181dc6c1f4223a3b976964028e884-&data_ss=790x1440&data_fb=no&data_tagname=PRE" title="Click to Continue > by Deal Top" style="border: none !important; display: inline-block !important; text-indent: 0px !important; float: none !important; font-weight: bold !important; height: auto !important; margin: 0px !important; min-height: 0px !important; min-width: 0px !important; padding: 0px !important; text-transform: uppercase !important; text-decoration: underline !important; vertical-align: baseline !important; width: auto !important; background: transparent !important;">private<img src="https://i-blog.csdnimg.cn/blog_migrate/967e5b9afc9c7c88a4dc8436fa94f9ac.png" style="border: none !important; display: inline-block !important; text-indent: 0px !important; float: none !important; font-weight: bold !important; height: 10px !important; margin: 0px 0px 0px 3px !important; min-height: 0px !important; min-width: 0px !important; padding: 0px !important; text-transform: uppercase !important; text-decoration: underline !important; vertical-align: super !important; width: 10px !important; background: transparent !important;" alt="" /></a> ViewPager mViewPager;
	private InnerPagerAdapter mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		mViewPager = new ViewPager(this);
		setContentView(mViewPager);

		mPagerAdapter = new InnerPagerAdapter();

		List<View> views = new ArrayList<View>();
		ImageView imageview1 = new ImageView(this);
		ImageView imageview2 = new ImageView(this);
		ImageView imageview3 = new ImageView(this);
		views.add(imageview1);
		imageview1.setImageResource(R.drawable.image01);
		views.add(imageview2);
		imageview2.setImageResource(R.drawable.image02);
		views.add(imageview3);
		imageview3.setImageResource(R.drawable.image03);
		mPagerAdapter.setViews(views);

		mViewPager.setAdapter(mPagerAdapter);
		
		mViewPager.setPageTransformer(true, new InnerPageTransformer());
	}

	private static class InnerPageTransformer implements PageTransformer {

		private static final float MIN_SCALE = 0.75F;

		@Override
		public void transformPage(View view, float position) {
			int width = view.getWidth();

			if (position < -1F) {
				view.setAlpha(0.0F);
			} else if (position <= 0.0F) {
				view.setAlpha(1.0F);
				view.setTranslationX(0.0F);
				view.setScaleX(1.0F);
				view.setScaleY(1.0F);
			}else if (position <= 1.0F) {
				view.setAlpha(1.0F - position);

				view.setTranslationX((float) width * -position);
				float scale = MIN_SCALE + (1.0F - MIN_SCALE)
						* (1.0F - Math.abs(position));
				view.setScaleX(scale);
				view.setScaleY(scale);
			} else {
				view.setAlpha(0.0F);
			}
		}
	}

	private static class InnerPagerAdapter extends PagerAdapter {

		private List<View> mViews;

		@Override
		public int getCount() {
			return getViews() == null ? 0 : getViews().size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(getViews().get(position), position);
			return getViews().get(position);
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(getViews().get(position));
		}

		public List<View> getViews() {
			return mViews;
		}

		public void setViews(List<View> views) {
			mViews = views;
		}
	}
}