Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

2024-04-02 19:04:59 275人浏览薄情痞子

摘要

目录1. 问题/坑点 1.1 item宽高不生效问题 2. 常用方法 3. 文字/图片轮播 Demo3.1 文字轮播：TextFlipperAdapter3.2 图片轮播：ImgF

1. 问题/坑点

1.1 item宽高不生效问题

需要注意的是，AdapterViewFlipper 在布局时，宽高一定要用 match_parent 或者具体dp值。

如果宽、高中使用了 wrap_content 时，会导致 AdapterViewFlipper 容器的宽高，最终变成第一个item的宽高。即使后续item的宽高超过第一个item，也不会生效，内容显示只会被限定在第一个的宽高范围内。

原理也很好理解，后续item没有绘制出来时， wrap_content 计算出来的结果，就是第一个item的宽高。当后续 item 显示的时候，没有地方去重新更新父容器 AdapterViewFlipper 的宽高。

2. 常用方法

1.AdapterViewAnimator支持的XML属性如下：

Android:animateFirstView：设置显示组件的第一个View时是否使用动画。
android:inAnimation：设置组件显示时使用的动画。
android:loopViews：设置循环到最后一个组件时是否自动跳转到第一个组件。
android:outAnimation：设置组件隐藏时使用的动画。

2.轮播控制：

startFlipping、stopFlipping : 开始、停止播放
showPrevious、showNext：上一个、下一个

3.轮播状态与参数

isFlipping：是否轮播中
flipInterval: 动画间隔

4.设置入场、出场动画：setInAnimation、setOutAnimation

3. 文字/图片轮播 Demo



class FlipperAniMactivity : AppCompatActivity(), View.OnClickListener {

    private var textFlipper: AdapterViewFlipper? = null
    private var imgFlipper: AdapterViewFlipper? = null
    private var preBtn: Button? = null
    private var nextBtn: Button? = null
    private var autoBtn: Button? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_flipper_anim)
        initTextFlipper()
        initImgFlipper()
    }

    // 文字轮播
    private fun initTextFlipper() {
        textFlipper = findViewById(R.id.text_flipper)
        val list = listOf("文字轮播测试0", "文字轮播测试02...")
        textFlipper?.adapter = TextFlipperAdapter(this, list)
        textFlipper?.setInAnimation(this, R.animator.text_flipper_in_from_bottom)
        textFlipper?.setOutAnimation(this, R.animator.text_flipper_out_to_top)
//        textFlipper?.flipInterval
//        textFlipper?.startFlipping()
    }

    // 图片轮播
    private fun initImgFlipper() {
        imgFlipper = findViewById(R.id.img_flipper)
        val list = listOf("Http://www.nicesoso.com/test/file/img/test.jpg", "http://www.nicesoso.com/test/file/img/test_h_1.jpg",
                "http://www.nicesoso.com/test/file/img/test_h_2.jpg")
        imgFlipper?.adapter = ImgFlipperAdapter(this, list)
        imgFlipper?.setInAnimation(this, R.animator.img_flipper_in)
        preBtn = findViewById(R.id.prev_btn)
        nextBtn = findViewById(R.id.next_btn) as Button
        autoBtn = findViewById(R.id.auto_btn) as Button

        preBtn?.setOnClickListener(this)
        nextBtn?.setOnClickListener(this)
        autoBtn?.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.prev_btn -> {
                imgFlipper?.showPrevious()
                imgFlipper?.stopFlipping()
            }
            R.id.next_btn -> {
                imgFlipper?.showNext()
                imgFlipper?.stopFlipping()
            }
            R.id.auto_btn -> {
                imgFlipper?.startFlipping()
            }
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        textFlipper?.takeIf { it.isFlipping }?.stopFlipping()
        imgFlipper?.takeIf { it.isFlipping }?.stopFlipping()
    }
}

3.1 文字轮播：TextFlipperAdapter


class TextFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() {
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.item_flipper_text, parent, false)
        val textView = view?.findViewById<TextView?>(R.id.text)
        textView?.text = datas.get(position)
        return view
    }

    override fun getItem(position: Int): Any {
        return datas.get(position)
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getCount(): Int {
        return datas.size
    }
}

3.2 图片轮播：ImgFlipperAdapter


class ImgFlipperAdapter(private val context: Context, private val datas: List<String>) : BaseAdapter() {
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view = convertView ?: ImageView(context)
        (view as? ImageView)?.scaleType = ImageView.ScaleType.FIT_XY
        view.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        (view as? ImageView)?.let { Glide.with(context).load(datas.get(position)).into(it) }  

        return view
    }

    override fun getItem(position: Int): Any {
        return datas.get(position)
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getCount(): Int {
        return datas.size
    }
}

3.3 布局：activity_flipper_anim.xml


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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        android:orientation="vertical">

        <!--宽高要必须设置填充满，否则wrap_content时，大小变成第一个item的大小-->
        <AdapterViewFlipper
            android:id="@+id/text_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:autoStart="true"
            android:flipInterval="2000" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <AdapterViewFlipper
            android:id="@+id/img_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:flipInterval="5000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:gravity="center"
            android:text="图片轮播测试（5s）"
            android:textSize="24sp" />

        <Button
            android:id="@+id/prev_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:text="上一个" />

        <Button
            android:id="@+id/next_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="下一个" />

        <Button
            android:id="@+id/auto_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:text="自动播放" />

    </RelativeLayout>
</LinearLayout>

文字item布局：item_flipper_text.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_weight="1"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:maxLines="1"
        android:textSize="22sp" />
</LinearLayout>

3.4 动画

文字轮播，入场动画：res/animator/text_flipper_in_from_bottom.xml


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

文字轮播，出场动画：res/animator/text_flipper_out_to_top.xml


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

图片轮播，入场动画：res/animator/img_flipper_in.xml


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

参考

https://www.jb51.net/article/210687.htm

以上就是Android基于AdapterViewFlipper实现的图片/文字轮播动画控件的详细内容，更多关于Android 实现图片/文字轮播动画控件的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

本文链接: https://www.lsjlt.com/news/124581.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

目录1. 问题/坑点 1.1 item宽高不生效问题 2. 常用方法 3. 文字/图片轮播 Demo3.1 文字轮播：TextFlipperAdapter3.2 图片轮播：ImgF...

99+

2024-04-02
基于CSS3的animation动画属性如何实现轮播图效果

这篇文章将为大家详细讲解有关基于CSS3的animation动画属性如何实现轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。animation简介：CSS3的an...

99+

2024-04-02
怎么利用纯CSS实现文字轮播与图片轮播

本文小编为大家详细介绍“怎么利用纯CSS实现文字轮播与图片轮播”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么利用纯CSS实现文字轮播与图片轮播”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...

99+

2024-04-02
基于WPF实现控件轮廓跑马灯动画效果

代码如下一、创建EdgeLight.xaml代码如下。 <ResourceDictionary xmlns="http://schemas.microsoft.com/win...

99+

2022-11-13

WPF 控件轮廓跑马灯动画 WPF轮廓动画 WPF跑马灯动画
android控件Banner实现简单轮播图效果

本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码，供大家参考，具体内容如下实现这个轮播图是在Fragment里实现的，所以要想实现，首先要创建Frag...

99+

2024-04-02
基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析

这篇文章主要为大家展示了“基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于vu...

99+

2024-04-02
基于WPF实现一个简单的音频播放动画控件

目录1.实现代码2.效果预览1.实现代码一、创建AnimationAudio.xaml代码如下 <ResourceDictionary xmlns="http://schem...

99+

2024-04-02
android控件Banner如何实现简单轮播图效果

小编给大家分享一下android控件Banner如何实现简单轮播图效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码，供大家参考，具体内容如下实...

99+

2023-06-15
Android如何使用ViewFlipper实现图片上下自动轮播

这篇文章主要介绍了Android如何使用ViewFlipper实现图片上下自动轮播，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：先看效果：1.xml代码： ...

99+

2023-06-15
Android使用Recyclerview实现图片轮播效果的方法

这篇文章将为大家详细讲解有关Android使用Recyclerview实现图片轮播效果的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：思路：准备m张图片使用Recyclerview实现，返回无...

99+

2023-05-30

android recyclerview 滚动效果
css3怎么实现图片的自动轮播特效

这篇文章主要介绍css3怎么实现图片的自动轮播特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！使用css3实现轮播特效的主体思想 &...

99+

2024-04-02
Android使用ViewFlipper实现图片上下自动轮播的示例代码

本文主要介绍了Android使用ViewFlipper实现图片上下自动轮播的示例代码，分享给大家，具体如下：先看效果： 1.xml代码： ...

99+

2024-04-02
基于C#实现在图片上绘制文字

目录实践过程效果代码实践过程效果代码 public partial class Form1 : Form { public Form1() { ...

99+

2022-12-19

C#图片绘制文字 C#图片文字
基于Qt实现图片播放器的示例代码

前言：使用qt制作了一个简单的图片播放器，可以播放gif、png等格式图片先来看看播放器的功能（当然是很简陋的，没有很深入的设计）： 1、点击图片列表中图片进行播放。 2、自动播放...

99+

2022-12-16

Qt实现图片播放器 Qt图片播放器 Qt图片播放
基于C#如何实现在图片上绘制文字

本篇内容介绍了“基于C#如何实现在图片上绘制文字”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果代码public partial...

99+

2023-07-04
使用CSS实现响应式图片自动轮播效果的教程

随着移动设备的普及，网页设计需要考虑到不同终端的设备分辨率和屏幕尺寸等因素，以实现良好的用户体验。在实现网站的响应式设计时，常常需要使用到图片轮播效果，以展示多张图片在有限的可视窗口中的内容，同时也能够增强网站的视觉效果。本文将介绍如何使用...

99+

2023-11-21

图片轮播响应式 CSS
基于jquery实现滚轮放大缩小图片的函数代码

以下是一份基本的jquery实现滚轮放大缩小图片的函数代码（1）滚轮控制放大缩小图片效果如图：实现代码如下： <!DOCTYPE html> <html>...

99+

2023-05-18

js滚轮放大缩小图片 jquery滚轮放大缩小
基于JS如何实现仿百度百家主页的轮播图效果

这篇文章将为大家详细讲解有关基于JS如何实现仿百度百家主页的轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。HTML ...

99+

2024-04-02
基于Python实现简易的动漫图片转换器

本文旨在制作一个将普通照片转换成动漫图片的小工具，其中使用opencv的非标准库实现对图片完成转换。 UI界面的制作使用的还是pyqt5，因为用习惯了使用起来相当方便，接下来还是先...

99+

2024-04-02
基于Vue如何实现移动端图片裁剪组件功能

小编给大家分享一下基于Vue如何实现移动端图片裁剪组件功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！最近项目上要做一个车牌识别的功能。本来以为很简单，只需要将图片扔给后台就可以了，但是...

99+

2024-04-02