垂直广告条，垂直轮播效果，仿照淘宝的纵向滚动实现

开发中，产品让仿照淘宝的做纵向滚动的效果，刚开始想到的是自定义一个垂直的Viewpager来实现，看了一些相关的资料，果不其然可以实现，但是很麻烦。我就在想，肯定有简单的办法，终于让我找到了，简直是完美啊，一两个动画就可以解决的的事啊，关键是ViewFlipper，看了看源码，原来ViewFlipper 是继承了ViewAnimator 的，这下可以完美的解决了，下面看看是怎么实现的吧。

• 1.继承ViewFlipper这个类，自定义来走吧

 public class UPMarqueeView extends ViewFlipper {

    private Context mContext;
    private boolean isSetAnimDuration = false;
    private int interval = 4000;  //循环的时间，根据自己的需求来调整
    /**
     * 动画时间
     */
    private int animDuration = 2000;

    public UPMarqueeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        this.mContext = context;
        setFlipInterval(interval);
        Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
        if (isSetAnimDuration) animIn.setDuration(animDuration);
        setInAnimation(animIn);
        Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
        if (isSetAnimDuration) animOut.setDuration(animDuration);
        setOutAnimation(animOut);
    }


    /**
     * 设置循环滚动的View数组
     *
     * @param views
     */
    public void setViews(final List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        for ( int i = 0; i < views.size(); i++) {
            final int position=i;
            //设置监听回调
            views.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onItemClickListener != null) {
                        onItemClickListener.onItemClick(position, views.get(position));
                    }
                }
            });
            addView(views.get(i));
        }
        startFlipping();
    }

    /**
     * 点击
     */
    private OnItemClickListener onItemClickListener;

    /**
     * 设置监听接口
     * @param onItemClickListener
     */
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    /**
     * item_view的接口
     */
    public interface OnItemClickListener {
        void onItemClick(int position, View view);
    }
}   

• 2.里面用的两个文件，在下面：

进入界面的动画 anim_marquee_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

• 3.出界面的动画 anim_marquee_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

• 4.具体的引用，直接在布局文件里面拿上用，即可。

<UPMarqueeView
            android:id="@+id/banner_view"
            android:layout_width="match_parent"
            android:layout_centerVertical="true"
            android:layout_height="80dp" />

• 5.而在Activity里面的初始化

根据自己的需要来走，看看我的引用，大家可以参考，

 UPMarqueeView mBannerView= ((UPMarqueeView) findInnerViewById(R.id.banner_view));
ArrayList<View> verticalBannerView = new ArrayList<>();
 for (int i = 0; i < 10; i++) {
                View view = LayoutInflater.from(getContext()).inflate(R.layout.***, null);
                TextView mBannerViewTitle = (TextView) view.findViewById(R.id.**);
                TextView mBannerViewJob = (TextView) view.findViewById(R.id.**);
                TextView mBannerViewNum = (TextView) view.findViewById(R.id.**);
                //设置控价的值
                verticalBannerView.add(view);
            }
            mBannerView.setViews(verticalBannerView);
            /**
             * 设置item_view的监听
             */
            mBannerView.setOnItemClickListener(new UPMarqueeView.OnItemClickListener() {
                @Override
                public void onItemClick(int position, View view) {
                  // 设置点击的监听事件
                }
            });

好了，基本的用法就是这个简单，如果有人对ViewFlipper 不懂是什么的话，自己学习一下吧。

如果有不懂的，可以留言，有需要源码的可以留言哦。
好了，今天就到这里，准备下班吧。