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

这是我从事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()
9f38
/ 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设置适配器。经过测试，可以直接使用。欢迎指正。