用ViewFlipper实现一个仿淘宝头条垂直滚动广告条

用ViewFlipper实现一个仿淘宝头条垂直滚动广告条

ViewFlipper是安卓自带的控件，很多人可能很少知道这个控件，这个控件很简单，也很好理解，能不能用上实战就看你们的本事了。下面是淘宝头条广告的原效果

实现后的效果

从源码可以看出，其实ViewFlipper间接的继承了FrameLayout，也可以说ViewFlipper其实就是个FrameLayout，只不过在内部封装了动画实现和Handler实现一个循环而已

一、ViewFlipper的布局实现

在需要显示此控件的布局中直接引用如下代码并设置相关参数 ，当然参数是可以放在代码里设置的

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ViewFlipper
            android:id="@+id/vf"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:autoStart="true"
            android:background="#fff"
            android:flipInterval="3000"
            android:inAnimation="@anim/anim_marquee_in"
            android:outAnimation="@anim/anim_marquee_out"
            android:paddingLeft="30dp" />
    </RelativeLayout>

这里介绍 ViewFlipper 用到的属性，这些属性其实都可以使用代码实现，只不过这里为了代码看上去美观，才放在布局里的

属性名称	描述
android:autoStart	设置自动加载下一个View
android:flipInterval	设置View之间切换的时间间隔
android:inAnimation	设置切换View的进入动画
android:outAnimation	设置切换View的退出动画
isFlipping	判断View切换是否正在进行
setFilpInterval	设置View之间切换的时间间隔
startFlipping	开始View的切换，而且会循环进行
stopFlipping	停止View的切换
setOutAnimation	设置切换View的退出动画
setInAnimation	设置切换View的进入动画
showNext	显示ViewFlipper里的下一个View
showPrevious	显示ViewFlipper里的上一个View

二、设置 ViewFlipper 移入和移出的动画

这里还涉及到两个动画其实就是一个平移的动画，它们都保存在anim文件夹中

anim_marquee_in.xml 文件

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

anim_marquee_out.xml 文件

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

这里可以根据自己的项目需求定义动画

三、自定义ViewFlipper的广告条

    <?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:padding="8dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/marqueeview_bg"
                android:text="热议"
                android:textColor="#F14C00"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:padding="3dp"
                android:singleLine="true"
                android:text="小米6来了：晓龙835+8G运存！"
                android:textColor="#333"
                android:textSize="14sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/marqueeview_bg"
                android:text="热议"
                android:textColor="#F14C00"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:padding="3dp"
                android:singleLine="true"
                android:text="227斤的胖MM，掀起上衣后，美爆全场！"
                android:textColor="#333"
                android:textSize="14sp" />
        </LinearLayout>
    </LinearLayout>

四、 代码为ViewFlipper添加广告条

关键代码

    public class MainActivity extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            ViewFlipper vf = (ViewFlipper) findViewById(R.id.vf);

            vf.addView(View.inflate(this, R.layout.view_advertisement01, null));
            vf.addView(View.inflate(this, R.layout.view_advertisement02, null));
            vf.addView(View.inflate(this, R.layout.view_advertisement03, null));
        }
    }

我项目中的代码

     /**
     * 竖直广告数据加载
     * 参考链接： https://blog.csdn.net/qq_30379689/article/details/54174838
     */
    private void initVerticalAd() {
        viewflipper.clearDisappearingChildren();

        if (bulletinList == null) {
            return;
        }

        for (int i = 0; i < bulletinList.size(); i++) {
            View inflate = View.inflate(getActivity(), R.layout.layout_home_ad_item1, null);
            ((TextView) inflate.findViewById(R.id.tv_ad_title_top)).setText(bulletinList.get(i).getBulletinTitle());
            int nextIndex = i + 1;
            if (nextIndex >= bulletinList.size()) {  //判断是否到达最后一条
                (inflate.findViewById(R.id.rl_bottom_item)).setVisibility(View.GONE);
            } else {
                i++;
                ((TextView) inflate.findViewById(R.id.tv_ad_title_bottom)).setText(bulletinList.get(i).getBulletinTitle());
            }

            viewflipper.addView(inflate);
        }

    }

运行效果