仿淘宝、京东首页图片广告垂直滑动

这是我从事Android开发以来写的第一篇博客，之后会不按期的将我所学习到的东西，分享出来，但愿你们能多多批评指正。 言归正传，这篇博客我要说的是仿淘宝、京东首页的可滑动的导航，不一样的是，我作的不是水平方向的，而是垂直方向的，其实很简单，就是重写ViewPager，将ViewPager的滑动方向改成垂直方向，使用方法和ViewPager差很少，直接在布局中进行引用，而后设置Adapter进行展现就能够了，接下来上代码，首先是加载ViewPager的类。

public class AboutVoucherActivity extends BaseActivity implements OnClickListener {
    private VerticalPager viewPager;
    private List<View> list = null;
    private int[] imgIds = new int[]{R.drawable.v1, R.drawable.v2, R.drawable.v3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.xml_voucher);
        AlbatrossApplication.activityList.add(this);
        initView();
        initData();
        viewPager.setAdapter(new MyAdapter(list));
    }

    private void initData() {
        list = new ArrayList<View>();

        for (int i = 0; i < imgIds.length; i++) {
            ImageView imgView = new ImageView(this);
            imgView.setScaleType(ImageView.ScaleType.FIT_XY);//不按比例缩放图片，目标是把图片塞满整个View。
            imgView.setImageResource(imgIds[i]);
            list.add(imgView);
        }
    }


    /**
     * @param
     * @return void
     * @throws
     * @Title: initView
     * @Description: TODO init view
     * @author Young
     */
    private void initView() {
        viewPager = (VerticalPager) findViewById(R.id.viewPager);
    }
}

class MyAdapter extends PagerAdapter {
    private List<View> list = null;

    public MyAdapter(List<View> list) {
        this.list = list;
    }

    @Override
    public int getCount() {
        if (list != null) {
            return list.size();
        }
        return 0;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(list.get(position));
        return list.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(list.get(position));
    }
}

对应的xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/creditor_background"
    android:orientation="vertical">

    <!--<include layout="@layout/common_title" />-->

    <com.autochina.p2p.mobile.ui.widget.VerticalPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.autochina.p2p.mobile.ui.widget.VerticalPager>
    
</LinearLayout>

注意这里引用的是VerticalPager，也就是我前面说到的重写后的ViewPager，若是直接引用ViewPager的话，就会发现，只能水平的滑动图片。 重写ViewPager：

package com.autochina.p2p.mobile.ui.widget;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by 080249 on 2016/7/12.
 */
public class VerticalPager extends ViewPager {
    public VerticalPager(Context context) {
        super(context);
        init();
    }
    public VerticalPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init() {
        setPageTransformer(true, new VerticalPageTransformer());
        setOverScrollMode(OVER_SCROLL_NEVER);
    }
    private class VerticalPageTransformer implements ViewPager.PageTransformer {
        //设置垂直方向平移的距离
        @Override
        public void transformPage(View view, float position) {
            if (position < -1) {
                view.setAlpha(0);
            } else if (position <= 1) {
                view.setAlpha(1);
                view.setTranslationX(view.getWidth() * -position);
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);
            } else {
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();
        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;
        ev.setLocation(newX, newY);
        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev);
        return intercepted;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }
}

总结来讲，使用方法就是重写ViewPager，设置垂直方向平移的距离，在布局文件中引用VerticalPager，最后给VerticalPager设置适配器。通过测试，能够直接使用。欢迎指正。