Android中循环滚动View效果的实现（汇总）

最新推荐文章于 2025-07-28 15:33:33 发布

原创最新推荐文章于 2025-07-28 15:33:33 发布 · 1.9k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #移动开发

Android基本组件总结专栏收录该内容

16 篇文章

订阅专栏

一般应用场景：

（1）广告轮播图。

（2）通知列表循环滚动。（循环滚动方向：横向，竖向。）

实现方式：

（1）使用ViewFlipper实现。

（2）使用AdapterViewFlipper实现。（只能实现垂直方向的循环滚动效果，如果宽度固定（数值），那么也可以实现水平方向的循环滚动效果）

备注：以上两种的区别主要是，ViewFlipper通过AddView()方法添加子View，而AdapterViewFlipper则是通过Adapter适配器来添加子View，样式上更加的灵活。

效果图如下：

第一种实现方式：（ViewFlipper）

1、layout布局代码如下：

<?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"
    android:background="@color/colorLightGray">

    <!--轮播图-->
    <ViewFlipper
        android:id="@+id/ViewFlipperBase_vFlipperScrollH"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorWhite"></ViewFlipper>

    <!--通知循环滚动（垂直方向）-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="50dp"
        android:background="@color/colorWhite"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/dk_font_size_10"
        android:paddingRight="@dimen/dk_font_size_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重要通知："
            android:textColor="@color/colorBlack"
            android:textStyle="bold" />

        <ViewFlipper
            android:id="@+id/ViewFlipperBase_vFlipperScrollV"
            android:layout_width="match_parent"
            android:layout_height="40dp"></ViewFlipper>

    </LinearLayout>

    <!--通知循环滚动（水平方向）-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="50dp"
        android:background="@color/colorWhite"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/dk_font_size_10"
        android:paddingRight="@dimen/dk_font_size_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重要通知："
            android:textColor="@color/colorBlack"
            android:textStyle="bold"/>

        <ViewFlipper
            android:id="@+id/ViewFlipperBase_vFlipperScrollVT"
            android:layout_width="match_parent"
            android:layout_height="40dp"></ViewFlipper>

    </LinearLayout>

</LinearLayout>

2、Activity中逻辑代码如下：

public class ViewFlipperBaseActivity extends BaseActivity {

    private Context mContext;

    private ViewFlipper vFlipperScrollH, vFlipperScrollV, vFlipperScrollVT;

    //基本变量
    //图片数组
    private int[] arrayPic = new int[] {R.mipmap.fengjing01, R.mipmap.fengjing02, R.mipmap.fengjing03};
    //通知数组
    private String[] arrayNotice = new String[] {"东北大鹌鹑有点嘟嘟嘟。", "芜湖大司马有点捞。", "余小C着实有点强啊。"};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper_base);
        baseDataInit();
        bindViews();
        viewsAddListener();
        viewsDataInit();
    }

    @Override
    public void baseDataInit() {
        mContext = this;
    }

    @Override
    public void bindViews() {
        vFlipperScrollH = findViewById(R.id.ViewFlipperBase_vFlipperScrollH);
        vFlipperScrollV = findViewById(R.id.ViewFlipperBase_vFlipperScrollV);
        vFlipperScrollVT = findViewById(R.id.ViewFlipperBase_vFlipperScrollVT);
    }

    @Override
    public void viewsAddListener() {

    }

    @Override
    public void viewsDataInit() {
        //轮播图（广告）
        vFlipperScrollH.setFlipInterval(5000);
        vFlipperScrollH.setInAnimation(mContext, R.anim.anim_come_in_h);
        vFlipperScrollH.setOutAnimation(mContext, R.anim.anim_get_out_h);
        for (int i = 0; i < arrayPic.length; i ++) {
            vFlipperScrollH.addView(getImageView(arrayPic[i]));
        }
        vFlipperScrollH.startFlipping();
        //垂直循环滚动（通知之类的）
        vFlipperScrollV.setFlipInterval(5000);
        vFlipperScrollV.setInAnimation(mContext, R.anim.anim_come_in_v);
        vFlipperScrollV.setOutAnimation(mContext, R.anim.anim_get_out_v);
        for (int i = 0; i < arrayNotice.length; i ++) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.layout_item_custom, null,false);
            TextView tvContent = view.findViewById(R.id.Layout_Item_tvContent);
            tvContent.setText(arrayNotice[i]);
            vFlipperScrollV.addView(view);
        }
        vFlipperScrollV.startFlipping();
        //水平循环滚动（通知之类的）
        vFlipperScrollVT.setFlipInterval(5000);
        vFlipperScrollVT.setInAnimation(mContext, R.anim.anim_come_in_h);
        vFlipperScrollVT.setOutAnimation(mContext, R.anim.anim_get_out_h);
        for (int i = 0; i < arrayNotice.length; i ++) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.layout_item_custom, null,false);
            TextView tvContent = view.findViewById(R.id.Layout_Item_tvContent);
            tvContent.setText(arrayNotice[i]);
            vFlipperScrollVT.addView(view);
        }
        vFlipperScrollVT.startFlipping();
    }

    private ImageView getImageView(int resId){
        ImageView img = new ImageView(mContext);
        img.setBackgroundResource(resId);
        return img;
    }
}

3、其中用到的anim动画效果文件如下：（因为是补间动画，所以在res->anim下创建动画文件。）

（1）anim_come_in_h.xml（进入效果--水平方向）代码如下：

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

（2）anim_get_out_h.xml（离开效果--水平方向）代码如下：

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

（3）anim_come_in_v.xml（进入效果--垂直方向）代码如下：

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

（4）anim_get_out_v.xml（离开效果--垂直方向）代码如下：

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

ViewFlipper常用方法如下：

isFlipping：判断View切换是否正在进行

setFilpInterval：设置View之间切换的时间间隔

startFlipping：开始View的切换，而且会循环进行

stopFlipping：停止View的切换

setOutAnimation：设置切换View的退出动画

setInAnimation：设置切换View的进入动画

showNext：显示ViewFlipper里的下一个View

showPrevious：显示ViewFlipper里的上一个View

第二种实现方式：（AdapterViewFlipper）

特别说明：由于AdapterViewFlipper设置进入或退出动画，必须为属性动画，没有办法像补间动画一样，设置为100%p之类的，考虑到手机设备宽度的不一致，所以只能用于【垂直方向】的循环滚动效果（因为一般通知类型的高度是固定的）。

1、layout布局代码如下：

<?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"
    android:background="@color/colorLightGray">

    <!--通知循环滚动（垂直方向）-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="50dp"
        android:background="@color/colorWhite"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/dk_font_size_10"
        android:paddingRight="@dimen/dk_font_size_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="重要通知："
            android:textColor="@color/colorBlack"
            android:textStyle="bold" />

        <AdapterViewFlipper
            android:id="@+id/ViewFlipperBase_vFlipperScrollV"
            android:layout_width="match_parent"
            android:layout_height="40dp"></AdapterViewFlipper>

    </LinearLayout>

</LinearLayout>

2、activity逻辑功能代码如下：

public class AdapterViewFlipperBaseActivity extends BaseActivity {

    private Context mContext;

    private AdapterViewFlipper vFlipperScrollV;

    //数据适配器
    private NoticeDisplayListAdapter noticeDisplayListAdapterV;//通知列表（垂直方向）

    //基本变量
    //通知数组
    private String[] arrayNotice = new String[] {"东北大鹌鹑有点嘟嘟嘟。", "芜湖大司马有点捞。", "余小C着实有点强啊。"};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_adapterviewflipper_base);
        baseDataInit();
        bindViews();
        viewsAddListener();
        viewsDataInit();
    }

    @Override
    public void baseDataInit() {
        mContext = this;
    }

    @Override
    public void bindViews() {
        vFlipperScrollV = findViewById(R.id.ViewFlipperBase_vFlipperScrollV);
    }

    @Override
    public void viewsAddListener() {

    }

    @Override
    public void viewsDataInit() {
        //垂直循环滚动（通知之类的）--自定义动画效果
        vFlipperScrollV.setFlipInterval(5000);
        vFlipperScrollV.setInAnimation(mContext, R.animator.animator_come_in_v);
        vFlipperScrollV.setOutAnimation(mContext, R.animator.animator_get_out_v);
        noticeDisplayListAdapterV = new NoticeDisplayListAdapter(mContext, arrayNotice);
        vFlipperScrollV.setAdapter(noticeDisplayListAdapterV);
        vFlipperScrollV.startFlipping();
    }
}

3、其中用到的动画效果文件如下：（因为是属性动画，所以在res->animator下创建动画文件。）

（1）animator_come_in_v.xml动画文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="y"
    android:valueFrom="50dp"
    android:valueTo="0dp"
    android:valueType="floatType"/>

（2）animator_get_out_v.xml动画文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="y"
    android:valueFrom="0dp"
    android:valueTo="-50dp"
    android:valueType="floatType"/>