仿淘寶、京東首頁圖片廣告垂直滑動

這是我從事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設置適配器。通過測試，能夠直接使用。歡迎指正。