安卓ViewFlipper跑马灯效果

article/2025/10/22 22:23:21

前言:ViewFlipper是一个切换控件,一般用于图片的切换,当然它是可以添加View的,而不限定只用于ImageView,当然我们也可以自定义View达到跑马灯效果。

效果:
在这里插入图片描述

①:MainActivity使用:

 public class MainActivity extends AppCompatActivity {private ViewFlipper viewFlipper;/*** 获取跑马灯数据*/private String bottomFirst = "https://img.zcool.cn/community/0192ef5548e0ba0000009e320ddbe1.jpg";private String bottomSecond = "https://img.zcool.cn/community/0192b7563725ff32f87512f6e14db1.jpg";private String bottomThird = "https://a.vpimg2.com/upload/merchandise/236513/AK-1102031400044411-1.jpg";private String bottomFourth = "https://img001.hc360.cn/hb/MTQ3NDM5MDAzNjE1Mi0xODU1Njg5MjU4.jpg";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewFlipper = this.findViewById(R.id.view_flipper);initMarquee();}private void initMarquee() {//防止重复添加viewFlipper.removeAllViews();for (int i = 0; i < getFlipperData().size(); i++) {View view = View.inflate(this, R.layout.layout_view_flipper, null);ImageView img = view.findViewById(R.id.flipper_image);TextView text = view.findViewById(R.id.flipper_text);//设置图片圆角角度//RoundedCorners roundedCorners = new RoundedCorners(20);//圆角弧度//通过RequestOptions扩展功能,override:采样率,因为ImageView就这么大,可以压缩图片,降低内存消耗.override(300, 300)//RequestOptions options = RequestOptions.bitmapTransform(roundedCorners);Glide.with(this).load(getFlipperData().get(i).getUrl()).apply(new RequestOptions().transforms(new CenterCrop(), new RoundedCorners(30))).into(img);text.setText(getFlipperData().get(i).getTitle());viewFlipper.addView(view);final int finalI = i;img.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this, "点击的下标" + finalI, Toast.LENGTH_SHORT).show();}});}}private List<ViewFlipperDto> getFlipperData() {List<ViewFlipperDto> list = new ArrayList<>();list.add(new ViewFlipperDto(bottomFirst, "张三发起了拼团"));list.add(new ViewFlipperDto(bottomSecond, "李四发起了拼团"));list.add(new ViewFlipperDto(bottomThird, "王五发起了拼团"));list.add(new ViewFlipperDto(bottomFourth, "赵六发起了拼团"));return list;}
}

②:布局文件activity_main:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ViewFlipperandroid:id="@+id/view_flipper"android:layout_width="match_parent"android:layout_height="wrap_content"android:autoStart="true"android:layout_margin="15dp"android:background="@drawable/marquee_shape"android:flipInterval="1500"android:inAnimation="@anim/anim_marquee_in"android:outAnimation="@anim/anim_marquee_out" /></LinearLayout>

flipInterval:替换的间隔时间(1500=1.5秒)

布局layout_view_flipper:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="5dp"><ImageViewandroid:id="@+id/flipper_image"android:layout_width="30dp"android:layout_height="30dp" /><TextViewandroid:id="@+id/flipper_text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_gravity="center"android:layout_margin="5dp"android:textColor="#ffffff"android:textSize="15sp" /></RelativeLayout>

③:res目录下新建anim动画文件夹
anim_marquee_in:

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

anim_marquee_out:

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

drawable下新建marquee_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="10dp" /><solid android:color="#55000000" />
</shape>

④:数据实体类ViewFlipperDto:

public class ViewFlipperDto {private String url;//图片地址private String title;//标题public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public ViewFlipperDto(String url, String title) {this.url = url;this.title = title;}
}

⑤:图片加载build.gradle加入

implementation 'com.github.bumptech.glide:glide:4.7.1'

AndroidManifest.xml清单文件:

<uses-permission android:name="android.permission.INTERNET" />

http://chatgpt.dhexx.cn/article/Xr8oxq1Q.shtml

相关文章

CSS实现文字跑马灯效果

CSS实现文字跑马灯效果 在完成一个任务的时候&#xff0c;要求在表格中固定宽度的其中一个item文字过长需要滚动显示&#xff0c;然后经过多次效果的尝试&#xff0c;实现代码如下所示&#xff1a; 它需要一个外层包围盒&#xff0c;设置定宽、文字不换行以及超过隐藏子元素为…

html纵向的跑马灯效果,单行文字垂直/水平跑马灯效果

需求描述 接到的需求是这样的&#xff1a;跑马灯效果 一次展示一行文字 循环滚动 文字滚动到视野中停留一秒后滚出。 静态效果如下图&#xff0c;文字从下往上或者从右往左滚动&#xff0c;滚动到此位置时停留一秒(不会传动图... 网络上有比较多的多行文字循环滚动的demo,找了一…

Flutter-跑马灯效果实现

1、背景&#xff1a; 使用三方组件在首页做个跑马灯效果&#xff0c;隔一段时间首页会闪一下&#xff0c;估计是三方组件有内存泄露。趁有空自己写个简单跑马灯效果。 2、效果&#xff1a; 3、调用方法&#xff1a; 将下方代码copy到项目文件内&#xff0c;引用文件&#xff…

TextView 跑马灯效果

1、重写TextView class TextViewMarquee : AppCompatTextView {constructor(context: Context?) : super(context!!) {}constructor(context: Context?, attrs: AttributeSet?) : super(context!!, attrs) {}constructor(context: Context?, attrs: AttributeSet?, defSt…

html js 跑马灯效果,Javascript实现跑马灯效果的简单实例

页面html&#xff1a; var speed 10 var demo document.getElementById("demo"); var demo1 document.getElementById("demo1"); var demo2 document.getElementById("demo2"); demo2.innerHTML demo1.innerHTML function Marquee() { if (…

Vue跑马灯效果

1、跑马灯效果 说明&#xff1a;单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动 2、完整代码 (注意&#xff1a;代码中需要引入vue.js文件&#xff0c;这个文件自己根据目录位置引入&#xff0c;具体位置代码中有注释) <!DOCTYPE html>…

跑马灯效果

最近做项目需要展示一个展示广告的跑马灯效果&#xff0c;网上找到一个继承 HorizontalScrollView 实现的&#xff0c;但是不能循环滚动&#xff1b;还有用 RecyclerView 实现的&#xff0c;比较好&#xff0c;但是会可以手动滑动&#xff0c;也不符合需求&#xff0c;下面自己…

android布局跑马灯,Android自定义跑马灯效果(适合任意布局)

因为项目需要&#xff0c;做了一个自定义垂直跑马灯&#xff0c;分享给大家。 先上个效果图&#xff1a; 从图片中可以看到布局是由包含两个TextView的布局组成&#xff0c;一般的垂直跑马灯效果只支持单个TextView&#xff0c;水平方向的跑马灯更是不需要自定义&#xff0c;原…

android跑马灯效果不起作用,Android跑马灯效果失效问题

Android中的跑马灯效果在特定情况下用的效果很不错&#xff0c;调试的时候发现在2.3系统下&#xff0c;文字跑动正常&#xff0c;后来无意换了另一个手机&#xff0c;4.0以上的系统&#xff0c;发现文字跑动效果失效&#xff0c;研究后发现有两种情况会导致失效。 先看跑马灯效…

Unity 跑马灯效果

一、效果 二、需要动画插件DOTween 三、脚本 1.每个格子上的脚本文件 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using DG.Tweening; public class MarqueeUIItem : MonoBehaviour {private RawImage m_RawImag…

Android TextView设置跑马灯效果

【前言】 在Textview设置的宽度有限&#xff0c;而需要显示的文字又比较多的情况下&#xff0c;往往需要给Textview设置跑马灯效果才能让用户完整地看到所有设置的文字&#xff0c;所以给TextView设置跑马灯效果的需求是很常见的 一、新手设置跑马灯效果 1、先在xml中给Textvi…

css 实现跑马灯效果

最近有一个跑马灯的效果&#xff0c;需要实现。本来想偷个懒从网上随便拷贝一个&#xff0c;结果发现都不太理想&#xff0c;于是自己动手封装了一个&#xff0c;和大家分享一下。 首先我们要知道跑马灯的具体效果是什么样子的。 效果图 我们通过效果图可以看到&#xff0c;在…

h5跑马灯效果

无缝滚动效果 &#xff0c;外加 手指的移动效果 思路&#xff1a; 1.无缝滚动1个内容区域&#xff0c;复制一下这个内容&#xff0c;追加到改内容的后面&#xff0c;形成无缝滚动的效果 2.手指左滑右滑进行x轴方向的加减 代码如下&#xff1a; <template><div cl…

Android --- 跑马灯效果

1、基于开发者文档的官方说明 跑马灯效果主要使用的控件为TextView&#xff0c;其中涉及的几个标签如下所示&#xff1a; android:ellipsize If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle. You will often …

html跑马灯效果

该笔记记录 <marquee> 标签&#xff0c;跑马灯除了使用js实现&#xff0c;还可以使用 marquee标签&#xff0c;自带跑马灯效果。&#xff08;marquee已经 Obsolete了&#xff0c;但是它很好用&#xff09; 基本用法 <!-- marquee是块元素&#xff0c;直接在其内部放…

跑马灯效果如何实现?Smartbi一文助你掌握

大数据时代&#xff0c;人的注意力越来越成为一种稀缺资源&#xff0c;让信息去匹配读者注意力&#xff0c;显然优于让人的注意力去适应信息。因此我们就需要在数据呈现上进行创新。那么如何让数据变得动态化&#xff0c;可视化呢&#xff1f;或许可以尝试一下跑马灯效果。 跑…

滚动动画(跑马灯动画)的几种实现方式

在大屏可视化应用中&#xff0c;滚动动效&#xff08;跑马灯效果&#xff09;也是常见的一种数据展现方式&#xff0c;本章节针对字幕滚动和列表滚动效果做一个小小的总结&#xff0c;结合vue框架&#xff0c;具体展示效果如下&#xff0c;从左至右选型技术分别为&#xff1a;m…

本地KMS虚拟服务器,搭建kms本地服务器

搭建kms本地服务器 内容精选 换一换 Kerberos是一种计算机网络认证协议&#xff0c;它允许某实体在非安全网络环境下通信&#xff0c;向另一个实体以一种安全的方式证明自己的身份。它也指由麻省理工实现此协议&#xff0c;并发布的一套免费软件。软件设计上采用客户端/服务器模…

Ubuntu搭建kms服务器

Key Management Service&#xff08;简称:KMS&#xff09;&#xff0c;这个功能是在Windows Vista之后的产品中的一种新型产品激活机制。我们可以利用手里闲置的VPS安装vlmcsd来搭建KMS激活服务器&#xff0c;这篇文章以Ubuntu为例&#xff0c;当然vlmcsd并不局限限于Ubuntu&am…

linux系统安装kms,Linux安装部署KMS服务器

Loading... # Linux 安装部署 KMS 服务器 ## 一、强制关闭kms-server服务 killall kms-server ## 二、下载 kms 服务文件 ### 1、下载 32bit包 如果你要安装 32位包&#xff0c;请直接下载 bash wget https://dl.wxlost.com/2017/01/Linux/vlmcsd-x86-musl-static -O /usr/bi…