Android 循环滚动控件ViewFlipper，可实现跑马灯或轮播图效果

最新推荐文章于 2024-05-01 18:49:49 发布

原创最新推荐文章于 2024-05-01 18:49:49 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ViewFlipper #跑马灯 #循环滚动控件

移动开发专栏收录该内容

279 篇文章

订阅专栏

本文详细介绍了Android中ViewFlipper控件的使用方法，包括如何创建动画、布局引用及Java代码实现跑马灯效果。同时，提供了实现Banner轮播图效果的思路。

ViewFlipper——Android循环滚动控件

1、效果如下：

2、实现方法

（1）创建进出动画

上下滚动动画

y_in.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="1000"/>
</set>

y_out.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>

左右滚动动画

x_in.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="1000"/>
</set>

x_out.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="1000"/>
</set>

（2）layout文件引用ViewFlipper

<ViewFlipper
    android:id="@+id/filpper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:autoStart="true"
    android:flipInterval="2000"
    android:inAnimation="@anim/x_in"
    android:outAnimation="@anim/x_out"/>

（3）activity中java代码实现ViewFlipper跑马灯效果

TextView textView;
ViewFlipper viewFlipper;

viewFlipper= (ViewFlipper) findViewById(R.id.filpper);
for (int i = 0; i < 5; i++) {
    View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_custom, null);
    textView = view.findViewById(R.id.myte1);
    textView.setText("sssssssss===="+i);

    viewFlipper.addView(view);
}

4、ViewFlipper的item点击事件——demo链接：https://download.youkuaiyun.com/download/meixi_android/10815720

5、demo云盘链接：https://pan.baidu.com/s/1AvqpfbzCAXtZ-TLVmEUyvw

在线回复云盘密码：qq1085220040

6、可实现banner轮播图效果

左右跑马灯

<LinearLayout
    android:id="@+id/ll_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FDC74B">

<TextView
    android:id="@+id/tv_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15pt"
    android:layout_marginRight="15pt"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center_vertical"
    android:includeFontPadding="false"
    android:marqueeRepeatLimit="marquee_forever"
    android:paddingBottom="15pt"
    android:paddingTop="15pt"
    android:singleLine="true"
    android:textColor="@color/black"
    android:textSize="36pt" />

</LinearLayout>

public class StringUtil {
    //长度加倍
    public static String multiplyString(String str, int number) {
        if (str == null) {
            throw new NullPointerException("String is null!");
        }
        if ("".equals(str)) {
            throw new IllegalArgumentException("The length of string is zero !");
        }
        if (number == 0) {
            throw new IllegalArgumentException("Number is zero!");
        }
        StringBuffer buffer = new StringBuffer();
        for (int i = 0; i < number; i++) {
            buffer.append(str);
        }
        return buffer.toString();
    }

}

tvMessage.setText(aboutUsResult.getData().getApkmsg() + StringUtil.multiplyString(" ", 30));