垂直跑马灯效果

   我们经常会在很多的APP上看到跑马灯的效果，不管是横向的跑马灯效果，还是垂直跑马灯效果，相对来说垂直的实现起来会比较麻烦。正好最近项目上有这样一个功能，我也查了些资料才实现。下边让我们先看看效果图。和淘宝的垂直跑马灯很相似。

好了， 下面我们看一下代码的实现：这里我是使用自定义的MarqueeView继承ViewFlipper实现的。

首先我们要定义一个attrs.xml，具体代表的含义我们可以自己查。

  <declare-styleable name="MarqueeViewStyle">
        <attr name="mvInterval" format="integer|reference" />
        <attr name="mvAnimDuration" format="integer|reference" />
        <attr name="mvTextSize" format="dimension|reference" />
        <attr name="mvTextColor" format="color|reference" />
    </declare-styleable>

然后就是我们的自定义类MarqueeView了。

/**
 * Created by 李金伟 on 2017/4/13.
 */
public class MarqueeView extends ViewFlipper {

    private int animDuration = 500; //动画执行时间（滚动速度，值越小，滚动速度越快）
    private boolean isSetAnimDuration = false;
    private int interval  = 2000;  //翻页时间间隔（每隔多长时间滚动下一条）

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

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {

        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle, defStyleAttr, 0);
        interval = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvInterval, interval);
        isSetAnimDuration = typedArray.hasValue(R.styleable.MarqueeViewStyle_mvAnimDuration);
        animDuration = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvAnimDuration, animDuration);

        setFlipInterval(interval);
        Animation animIn = AnimationUtils.loadAnimation(context, R.anim.anim_marquee_in);
        if (isSetAnimDuration) animIn.setDuration(animDuration);
        setInAnimation(animIn);
        Animation animOut = AnimationUtils.loadAnimation(context, R.anim.anim_marquee_out);
        if (isSetAnimDuration) animOut.setDuration(animDuration);
        setOutAnimation(animOut);

    }


    /**
     * 设置循环滚动的View数组
     * @param views
     */
    public void setViews(List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        for (int i = 0; i < views.size(); i++) {
            addView(views.get(i));
        }
        startFlipping();
    }

}

直接使用自定义类布局

 <包名.view.marqueeview.MarqueeView
   android:id="@+id/marqueeView"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
    android:layout_centerVertical="true" />

这里我们使用假数据进行展示

/**
 * Created by 李金伟 on 2016/10/31.
 * 首页
 */
public class HomeFragment2 extends BaseFragment {

    //MarqueeView垂直跑马灯
    private MarqueeView marqueeView;
    List<String> data = new ArrayList<>();//先以假数据代替假数据
    List<View> views = new ArrayList<>();

    @Override
    public int getLayoutResId() {
     
        return R.layout.fragment_home2;
    }

    @Override
    public void initView(View view) {

        marqueeView = (MarqueeView) view.findViewById(R.id.marqueeView);

    }

    @Override
    public void initListener() {
    }

    @Override
    public void initData() {
        //MarqueeView垂直跑马灯假数据
        data = new ArrayList<>();
        data.add("家人给2岁孩子喝这个，孩子智力倒退10岁!!!");
        data.add("iPhone8最感人变化成真，必须买买买买!!!!");
        data.add("简直是白菜价！日本玩家33万甩卖15万张游戏王卡");
        data.add("iPhone7价格曝光了！看完感觉我的腰子有点疼...");
        data.add("主人内疚逃命时没带够，回废墟狂挖30小时！");

        setMarqueeView();
        marqueeView.setViews(views);

    }


    /**
     * 初始化需要循环的View
     * 为了灵活的使用滚动的View，所以把滚动的内容让用户自定义
     * 假如滚动的是三条或者一条，或者是其他，只需要把对应的布局，和这个方法稍微改改就可以了，
     */
    private void setMarqueeView() {
        for (int i = 0; i < data.size(); i = i + 2) {
            //设置滚动的单个布局
            LinearLayout moreView =   (LinearLayout) LayoutInflater.from(getActivity()).inflate(R.layout.item_marqueeview, null);
            //初始化布局的控件
            TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);
            TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);
            //进行对控件赋值
            tv1.setText(data.get(i).toString());
            if (data.size() > i + 1) {
                //因为淘宝那儿是两条数据，但是当数据是奇数时就不需要赋值第二个，所以加了一个判断，还应该把第二个布局给隐藏掉
                tv2.setText(data.get(i + 1).toString());
            }else {
                moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
            }

            //添加到循环滚动数组里面去
            views.add(moreView);
        }
    }

}

这样就实现我们的垂直跑马灯效果了，是不是很厉害！！