昨天看到Weather&Clock Widget的页面滑动效果不错，了解了下可能是使用ViewPager来实现的，今天研究下，顺便记录下来。
根据Android官网的介绍，ViewPager属于android.support.v4.view包，android.support.v4.view包支持level在4.0及以上的系统，其主要特性是为处理后台与视图交互提供了大量的类。
android.support.v4.view包内与ViewPager相关的类及其功能如下所示：
|
ViewPager
|
布局管理器，允许用户在页面之间左右滑动。
|
|
ViewPager.LayoutParams
|
支持添加到ViewPager中的视图（View）的布局参数。 |
|
ViewPager.SavedState
|
由ViewPager保存的状态。
|
|
ViewPager.SimpleOnPageChangeListener
|
ViewPager.OnPageChangeListener接口的简单实现，包含各种方法的基本实现。
|
ViewPager的功能是可以使视图左右滑动，按照Android官网提供的方法，其使用可分为几个步骤：
1、建立显示卡页面布局
建立显示卡页面布局文件fragment_screen_slide_page.xml，其内容为：
<?xml version="1.0" encoding="utf-8"?> <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:paddingLeft="16dp" android:lineSpacingMultiplier="1.2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="1234"/> </ScrollView>
2、创建Fragment类
ScreenSlidePageFragment.java，在onCreateView()方法中返回显示卡页面布局，其内容为：
public class ScreenSlidePageFragment extends android.support.v4.app.Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment_screen_slide_page, container, false); return rootView; } }
3、添加ViewPager
ViewPager拥有内置的滑动处理方法进行显示卡之间的切换操作，并且自带动画效果。ViewPager通过PagerAdapter为新显示卡提供数据，所以下面新建的ViewPager将用到前面创建的ScreenSlidePageFragment类。
首先，在显示布局文件中添加ViewPager布局
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" />
其次，通过ViewPager来设置内容视图
// Instantiate a ViewPager and a PagerAdapter. mPager = (ViewPager)findViewById(R.id.pager); mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
接下来创建一个继承了FragmentStatePagerAdapter的类，并通过在getItem()方法中实例化新的ScreenSlidePageFragment类来创建新的显示卡。此外，PagerAdapter需要实现getCount()方法，在其中返回显示卡的个数。
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { public ScreenSlidePagerAdapter(android.support.v4.app.FragmentManager fragmentManager) { super(fragmentManager); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } }
将PagerAdapter和ViewPager关联起来
mPager.setAdapter(mPagerAdapter);
Activity的整体代码如下所示，其中对返回键点击事件进行了判断，当显示的是第一个显示卡时关闭应用，其他情况返回上一显示卡。
public class MainActivity extends AppCompatActivity { /* * The number of pages (wizard steps) to show in this demo. * */ private static final int NUM_PAGES = 5; /* * The pager widget, which handles animation and allow swiping horizontally to access previous and next wizard steps. * */ private ViewPager mPager; /* * The pager adapter, which provides the pages to the view pager widget. * */ private PagerAdapter mPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Instantiate a ViewPager and a PagerAdapter. mPager = (ViewPager)findViewById(R.id.pager); mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager()); mPager.setAdapter(mPagerAdapter); } @Override public void onBackPressed() { if(mPager.getCurrentItem() == 0) { // If the user is currently looking at the first step, allow the system to handle the Back button. This calls finish() on this activity and pops the back stack. super.onBackPressed(); } else { // Otherwise, select the previous step. mPager.setCurrentItem(mPager.getCurrentItem() - 1); } } /* * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in sequence. * */ private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { public ScreenSlidePagerAdapter(android.support.v4.app.FragmentManager fragmentManager) { super(fragmentManager); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } } }
另附两个动画效果，可通过以下方法调用：
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; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well 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) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }
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) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }
以上内容大部分来自Android官网
