android3.0自带ViewPager动画

Create ViewPager transitions: a PagerTransformer example

The ViewPager is a great UI element, providing a smooth swipe animation for switching between pages. But what if a different scrolling effect is required? Fear not, the support library provides a useful solution called the PagerTransformer. It was introduced in revision 11, and is supported from API level 11 (Honeycomb) or greater.

Usage is pretty straightforward, just attach a PageTransformer to the ViewPager:

viewpager.setPageTransformer(false, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(View page, float position) {
        // do transformation here
        }
});

The transformPage() method has a View and a position parameter. The former represents the current view or fragment, while the latter contains its position. Scrolling events are triggered by both the starting page and the target page, the corresponding _transformPage() _calls occur simultaneously. A value of zero means the current page is in the center, 1 means a full page offset to the right side, -1 means a full page offset to the left side. Quoted from the developer site: > The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. 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. It is a good idea to normalize the position, so you don’t have to bother with the numbers being negative or positive. It’s pretty easy, just do this in every call:

final float normalizedposition = Math.abs(Math.abs(position) - 1);

Now you have a variable that goes from 0 to 1 (and the other way, respectively) if the user scrolls the ViewPager. What you do with it is up to your imagination; here are some basic examples. First, we’ll fade the pages in and out:

@Override
public void transformPage(View page, float position) {
    final float normalizedposition = Math.abs(Math.abs(position) - 1);
    page.setAlpha(normalizedposition);
}

These lines perform a scaling effect from and to 50%:

@Override
public void transformPage(View page, float position) {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
    page.setScaleX(normalizedposition / 2 + 0.5f);
    page.setScaleY(normalizedposition / 2 + 0.5f);
}

The last example rotates the pages around their Z axis by 30 degrees; you don’t need to normalize for this one. The effect is similar to the cover flow UI pattern:

@Override
public void transformPage(View page, float position) {
    page.setRotationY(position * -30);
}

Of course rotating the views or fragments around the axes is also possible, but the effect might be a bit overwhelming for the user, so I don’t recommend it. Anyway, it can be done with the other setRotation()methods.

These are just some basic examples, you can do much neater stuff with the PagerTransformer. See this linkat the official dev site for two good looking effects. You can also combine it with a PagerTitleStrip or aPagerTabStrip.

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wubincsdn/article/details/51536495
文章标签: android viewpager 动画
个人分类: android
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

android3.0自带ViewPager动画

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭