完成以下文件:
· 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);
}
}
}