VerticalViewPager

介绍：

垂直方向的ViewPager以及transformer，实现这种ViewPager作者只花了不到100行代码。 不过这个控件只适合一屏幕装得下的情况.放个ScrollView ,内容超过屏幕,问题就会暴露出来. 因为touch事件会被ScrollView吃掉。

运行效果：

使用说明：

VerticalViewPager的所有代码：

package me.kaelaela.verticalviewpager;
/**
 * Copyright (C) 2015 Kaelaela
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 */
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import me.kaelaela.verticalviewpager.transforms.DefaultTransformer;
public class VerticalViewPager extends ViewPager {
    public VerticalViewPager(Context context) {
        this(context, null);
    }
    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        setPageTransformer(false, new DefaultTransformer());
    }
    private MotionEvent swapTouchEvent(MotionEvent event) {
        float width = getWidth();
        float height = getHeight();
        float swappedX = (event.getY() / height) * width;
        float swappedY = (event.getX() / width) * height;
        event.setLocation(swappedX, swappedY);
        return event;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        swapTouchEvent(event);
        return super.onInterceptTouchEvent(swapTouchEvent(event));
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapTouchEvent(ev));
    }
}

在构造方法中调用了

setPageTransformer(false, new DefaultTransformer());

如果去掉这行代码，将不能实现垂直切换。可见它正是实现垂直切换的关键。

DefaultTransformer：

public class DefaultTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        float alpha = 0;
        if (0 <= position && position <= 1) {
            alpha = 1 - position;
        } else if (-1 < position && position < 0) {
            alpha = position + 1;
        }
        //view.setAlpha(alpha);
        view.setTranslationX(view.getWidth() * -position);
        float yPosition = position * view.getHeight();
        view.setTranslationY(yPosition);
    }
}

整个项目提供了三个Transformer，每个Transformer都有一些透明度改变之类的效果，如果想做到普通ViewPager的默认效果，可以删除相关的代码，这里以DefaultTransformer为例。

把它改成这样就和普通ViewPager的默认效果一致了：

public class DefaultTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        float alpha = 0;
        if (0 <= position && position <= 1) {
            alpha = 1 - position;
        } else if (-1 < position && position < 0) {
            alpha = position + 1;
        }
        //view.setAlpha(alpha);
        view.setTranslationX(view.getWidth() * -position);
        float yPosition = position * view.getHeight();
        view.setTranslationY(yPosition);
    }
}

使用和普通ViewPager一样：

private void initViewPager() {
    VerticalViewPager viewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
    //viewPager.setPageTransformer(false, new ZoomOutTransformer());
    //viewPager.setPageTransformer(true, new StackTransformer());
    String title = "ContentFragment";
    viewPager.setAdapter(new ContentFragmentAdapter.Holder(getSupportFragmentManager())
            .add(ContentFragment.newInstance(title, 1))
            .add(ContentFragment.newInstance(title, 2))
            .add(ContentFragment.newInstance(title, 3))
            .add(ContentFragment.newInstance(title, 4))
            .add(ContentFragment.newInstance(title, 5))
            .set());
    //If you setting other scroll mode, the scrolled fade is shown from either side of display.
    viewPager.setOverScrollMode(View.OVER_SCROLL_NEVER);
}