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

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

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

实现后的效果

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

一、ViewFlipper的布局实现

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

这里介绍 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 文件

anim_marquee_out.xml 文件

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

三、自定义ViewFlipper的广告条

四、 代码为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);
        }

    }

运行效果