Android使用ViewPager实现屏幕滑动效果
使用viewpager实现屏幕滑动
从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导、幻灯片中应用广泛。下面介绍如何利用android support库的viewpager来实现屏幕滑动。
创建view
创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个textview,用来展示一些文字。
<!-- 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
创建一个fragment子类,并在oncreateview()方法中加载上一步里创建的布局。
import android.support.v4.app.fragment; ... public class screenslidepagefragment extends 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; } }
创建完成之后,就可以在父activity中创建任意个该fragment的实例来向用户展示内容了。
添加viewpager
viewpager内嵌了对滑动手势的支持,因此它在默认设置下就能够实现屏幕滑动。
首先,创建一个布局文件,包含一个viewpager:
<!-- activity_screen_slide.xml --> <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" />
创建一个activity,包含以下内容:
将其content view设置为上面创建的布局
创建一个fragmentstatepageradapter的子类,并实现其getitem()方法来提供页面、getcount()方法来确定页面数量。
将fragmentstatepageradapter实例和viewpager实例绑定。
处理设备的返回键,使其能够从虚拟的fragment栈中移除fragment来实现返回上一页的效果。如果当前已经处于第一页,那么就从activity中返回。
import android.support.v4.app.fragment; import android.support.v4.app.fragmentmanager; ... public class screenslidepageractivity extends fragmentactivity { /** * 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 allows 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_screen_slide); // 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(fragmentmanager fm) { super(fm); } @override public fragment getitem(int position) { return new screenslidepagefragment(); } @override public int getcount() { return num_pages; } } }
使用pagetransformer自定义屏幕滑动效果
可以实现viewpager.pagetransformer接口来展示一个不同于默认实现的屏幕滑动效果。这个接口中只有一个transformpage()方法。在屏幕滑动过程中它会在那些能够看到的页面(当前页面以及邻近页面)上反复调用。例如,假设当前位于第三页,如果用户向第四页滑动,那么transformpage()会在第二、第三、第四页上被调用。
当实现transformpage()时,你需要根据页面当前所处的位置(相对于屏幕)来确定它的变化。不同的变化就能带来不同的屏幕滑动效果。页面相对于屏幕的位置包含在参数position中。
position指明了一个给定的页面相对于屏幕中心的位置。这是一个动态的属性,会随着用户的滑动手势而变化。当页面充满屏幕时,position的值为0;当页面即将在屏幕左侧消失时,它的值趋近于-1;当页面即将在屏幕右侧消失时,它的值趋近于1。根据position的值,你可以使用settranslationx()、setscaley()等方法来实现自定义的动画效果。
当实现了一个pagetransformer之后,使用viewpager的setpagetransformer()方法将动画投入使用。示例如下:
viewpager mpager = (viewpager) findviewbyid(r.id.pager); ... mpager.setpagetransformer(true, new zoomoutpagetransformer());
需要注意的是,默认的屏幕滑动效果不会被pagetransformer覆盖,因此计算属性值是要考虑是否会导致滑动速度变快或是变慢。
下面是两个pagetransformer的实现示例:
zoom-out page transformer
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); } } }
depth page transformer
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); } } }
原文:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。