仿淘宝头条的实现

在淘宝客户端中,有一个垂直轮播的广告条(如下图),这个是怎么显示的呢?其实很简单,只要用系统提供的控件就可以了,三步轻松搞定! image.jpeg

1.设置布局,轮播控件用的是系统的

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

    <ViewFlipper android:id="@+id/vf"
                 android:autoStart="true"
                 android:flipInterval="5000"
                 android:inAnimation="@anim/anim_marquee_in"
                 android:outAnimation="@anim/anim_marquee_out"
                 android:layout_width="match_parent"
                 android:layout_height="100dp"/>
</LinearLayout>

2.设置滚动动画,一个是进入的,一个是出去的

<?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>

<?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>

3.添加View

data.forEachIndexed { index, s ->
            vf.addView(View.inflate(this,R.layout.list_item,null))
        }

4.大功告成,这样你就能在手机中看到类似淘宝的滚动效果,如果滚动速度太慢,还可以通过XML里面的属性进行调整