仿淘宝头条的实现[通俗易懂]

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

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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!<?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里面的属性进行调整