仿淘宝、头条上下轮播广告

仿淘宝、头条上下滚动自动轮播广告效果

前言：想必大家工作久了，都会接触横向走马灯、纵向走马灯的效果。在这里介绍系统自带的控件来实现纵向走马灯（上下滚动）效果。

布局：

<ViewFlipper
        android:background="@color/black"
        android:id="@+id/view_flipper"
        android:inAnimation="@anim/new_in"
        android:outAnimation="@anim/new_out"
        android:autoStart="true"
        android:flipInterval="3000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

动画文件
new_in.xml:

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

new_out:

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

Activity中初始化数据：

/**
     * 初始化新闻标题数据
     */
    private void initData2() {
        titles = new ArrayList();
        titles.add("小张的家里一共五口人。");
        titles.add("小明的哥哥跑了");
        titles.add("小明的弟弟跑了");
        titles.add("小明的爸爸跑了");
        titles.add("小明的妈妈跑了");
        titles.add("请问小张家中还剩几人？");
        setViews();
    }

设置内容：

/**
     * 为每一页设置视图
     */
    private void setViews() {

        //获取ViewFlipper控件id

        for (int i = 0; i < titles.size(); i++) {
            View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.title_view, null);
            TextView tvTitle = view.findViewById(R.id.tvItem);
            //赋值
            tvTitle.setText(titles.get(i));
            //动态添加视图
            mviewFlipper.addView(view);
        }

        //设置的时间间隔来开始切换所有的View,切换会循环进行
        mviewFlipper.startFlipping();
        //视图进入动画
        mviewFlipper.setInAnimation(TestActivity.this, R.anim.new_in);
        //视图退出动画
        mviewFlipper.setOutAnimation(TestActivity.this, R.anim.new_out);
        //自动开始滚动
        mviewFlipper.setAutoStart(true);
        //视图的切换间隔
        mviewFlipper.setFlipInterval(3000);
    }

大功告成，就是这么简单。