登录
当前位置： 首页 > 编程笔记 >

Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总

束高雅
2023-03-14
本文向大家介绍Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总，包括了Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总的使用技巧和注意事项，需要的朋友参考一下

 

方法一、使用系统控件ViewFlipper方式：

布局文件：

<ViewFlipper
    android:id="@+id/view_flipper"
    android:layout_width="300dp"
    android:layout_height="35dp"
    android:layout_centerInParent="true"
    android:autoStart="true"
    android:background="@drawable/warning_bg"
    android:flipInterval="3000"
    android:inAnimation="@anim/slide_in_bottom"
    android:outAnimation="@anim/slide_out_top">
    <TextView
      android:id="@+id/tv_warning_content1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:ellipsize="middle"
      android:gravity="center"
      android:singleLine="true"
      android:text="有预警信息有预警信息有预警信息"
      android:textColor="#000000"
      android:textSize="16sp"/>
    <TextView
      android:id="@+id/tv_warning_content2"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:ellipsize="middle"
      android:gravity="center"
      android:singleLine="true"
      android:text="当前天气状况当前天气状况当前"
      android:textColor="#000000"
      android:textSize="16sp"/>
    <TextView
      android:id="@+id/tv_warning_content3"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:ellipsize="middle"
      android:gravity="center"
      android:singleLine="true"
      android:text="123456465"
      android:textColor="#000000"
      android:textSize="16sp"/>
  </ViewFlipper>

背景文件：warning_bg.xml

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

切入动画：slide_in_bottom.xml

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

切出动画：slide_out_top.xml

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

注意：如果不在布局文件里设置： android:autoStart="true"， 可以在代码中动态设置开始循环mViewFlipper.startFlipping();

在Activity中显示正常，但在fragment中可能会有重影的现象。

方法二、使用三方框架

Gradle:

compile 'com.sunfusheng:marqueeview:1.3.3'

属性

XML

<com.sunfusheng.marqueeview.MarqueeView
  android:id="@+id/marqueeView"
  android:layout_width="match_parent"
  android:layout_height="30dp"
  app:mvAnimDuration="1000"
  app:mvDirection="bottom_to_top"
  app:mvInterval="3000"
  app:mvTextColor="@color/white"
  app:mvTextSize="14sp"
  app:mvSingleLine="true"/>

设置字符串列表数据

MarqueeView marqueeView = (MarqueeView) findViewById(R.id.marqueeView);
List<String> info = new ArrayList<>();
info.add("11111111111111");
info.add("22222222222222");
info.add("33333333333333");
info.add("44444444444444");
info.add("55555555555555");
info.add("66666666666666");
marqueeView.startWithList(info);
// 在代码里设置自己的动画
marqueeView.startWithList(info, R.anim.anim_bottom_in, R.anim.anim_top_out);

设置字符串数据

String notice = "心中有阳光，脚底有力量！心中有阳光，脚底有力量！心中有阳光，脚底有力量！";
marqueeView.startWithText(notice);
// 在代码里设置自己的动画
marqueeView.startWithText(notice, R.anim.anim_bottom_in, R.anim.anim_top_out);

设置事件监听

marqueeView.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
  @Override
  public void onItemClick(int position, TextView textView) {
    Toast.makeText(getApplicationContext(), String.valueOf(marqueeView1.getPosition()) + ". " + textView.getText(), Toast.LENGTH_SHORT).show();
  }
});

重影问题可参考以下解决方案

@Override
public void onStart() {
  super.onStart(); 
  marqueeView.startFlipping();
}
@Override
public void onStop() {
  super.onStop();
  marqueeView.stopFlipping();
}

注意：这个库主要还是继承了ViewFlipper，类似的库还有MarqueeViewLibrary，实现方法基本类似，在Activity中显示正常，但在fragment中可能会有重影的现象。

方法三、使用系统控件TextSwitcher实现

布局文件

<TextSwitcher
      android:id="@+id/text_switcher"
      android:layout_width="285dp"
      android:layout_height="35dp"
      android:background="@drawable/warning_bg"/>

背景文件：warning_bg.xml

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

代码：

private int index = 0;//textview上下滚动下标
  private Handler handler = new Handler();
  private boolean isFlipping = false; // 是否启用预警信息轮播
  private List<String> mWarningTextList = new ArrayList<>();
  private void setTextSwitcher() {
    mTextSwitcher.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.slide_in_bottom));
    mTextSwitcher.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.slide_out_top));
    mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
      @Override
      public View makeView() {
        TextView textView = new TextView(mContext);
        textView.setSingleLine();
        textView.setTextSize(12);//字号
        textView.setTextColor(Color.parseColor("#ffffff"));
        textView.setEllipsize(TextUtils.TruncateAt.MIDDLE);
        textView.setSingleLine();
        textView.setGravity(Gravity.CENTER);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        params.gravity = Gravity.CENTER;
        textView.setLayoutParams(params);
        textView.setPadding(25, 0, 25, 0);
        return textView;
      }
    });
  }
    private Runnable runnable = new Runnable() {
    @Override
    public void run() {
      if (!isFlipping) {
        return;
      }
      index++;
      mTextSwitcher.setText(mWarningTextList.get(index % mWarningTextList.size()));
      if (index == mWarningTextList.size()) {
        index = 0;
      }
      startFlipping();
    }
  };
  //开启信息轮播
  public void startFlipping() {
    if (mWarningTextList.size() > 1) {
      handler.removeCallbacks(runnable);
      isFlipping = true;
      handler.postDelayed(runnable, 3000);
    }
  }
  //关闭信息轮播
  public void stopFlipping() {
    if (mWarningTextList.size() > 1) {
      isFlipping = false;
      handler.removeCallbacks(runnable);
    }
  }
  //设置数据
  private void setData() {
    if (mWarningTextList.size() == 1) {
      mTextSwitcher.setText(mWarningTextList.get(0));
      index = 0;
    }
    if (mWarningTextList.size() > 1) {
      handler.postDelayed(new Runnable() {
        @Override
        public void run() {
          mTextSwitcher.setText(mWarningTextList.get(0));
          index = 0;
        }
      }, 1000);
      mTextSwitcher.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.slide_in_bottom));
      mTextSwitcher.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.slide_out_top));
      startFlipping();
    }
  }
    @Override
  public void onResume() {
    super.onResume();
    startFlipping();
  }
  @Override
  public void onStop() {
    super.onStop();
    stopFlipping();
  }

切入动画：slide_in_bottom.xml

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

切出动画：slide_out_top.xml

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

注意：这种方法在Activity和Fragment中均使用正常，可以解决Android文字垂直滚动、纵向走马灯在Fragment中重叠的现象。

总结

以上所述是小编给大家介绍的Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！

 类似资料：
  • Android实现垂直跑马灯效果

    本文向大家介绍Android实现垂直跑马灯效果，包括了Android实现垂直跑马灯效果的使用技巧和注意事项，需要的朋友参考一下 在我们开发过程中，跑马灯这个功能非常实用的，在实现这个功能的时候，这个时候我们通常需要找demo来实现这个方法，我从github上面找到这个demo感觉很好用，所以就要实现了这个功能喽MarqueeView，看这个工具类，因为我找这个类的时候是没有点击事件的，所以我给它加

  • Android实现图文垂直跑马灯效果

    本文向大家介绍Android实现图文垂直跑马灯效果，包括了Android实现图文垂直跑马灯效果的使用技巧和注意事项，需要的朋友参考一下 最近在维护老项目，老项目有一个地方需要修改，就是垂直跑马灯的问题，之前的垂直跑马灯是只有文字跑马灯，新版需要加上。 之前是用的MarqueeView，看了下源代码是只支持文字的，于是我就改了下原作者的源代码。 MarqueeView类之前作者的 原实现效果： 这里

  • vue 实现走马灯效果

    本文向大家介绍vue 实现走马灯效果，包括了vue 实现走马灯效果的使用技巧和注意事项，需要的朋友参考一下 Part.1  问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2  实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3  代码 HTML CSS JS Part.4  注意点 在 js 中我使用的是

  • JavaScript实现垂直滚动条效果

    本文向大家介绍JavaScript实现垂直滚动条效果，包括了JavaScript实现垂直滚动条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js垂直滚动条的实现代码，供大家参考，具体内容如下 1、红色盒子高度计算公式： 容器的高度 / 内容的高度 * 容器的高度 2、红色方块移动一像素 ，我们的内容盒子移动多少呢？ （内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒

  • Android自定义View实现纵向跑马灯效果详解

    本文向大家介绍Android自定义View实现纵向跑马灯效果详解，包括了Android自定义View实现纵向跑马灯效果详解的使用技巧和注意事项，需要的朋友参考一下 首先看看效果图(录制的gif有点卡，真实的效果还是很流畅的) 实现思路 通过上面的gif图可以得出结论，其实它就是同时绘制两条文本信息，然后通过动画不断的改变两条文本信息距离顶部的高度，以此来实现滚动的效果。 具体实现 首先定义一些要用

  • javascript实现文字跑马灯效果

    本文向大家介绍javascript实现文字跑马灯效果，包括了javascript实现文字跑马灯效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现文字跑马灯效果的具体代码，供大家参考，具体内容如下 思路： 1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。 2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归。 判断

相关阅读

Android自定义View实现纵向跑马灯效果详解javascript实现文字跑马灯效果Android TextView跑马灯效果实现方法Android TextView实现跑马灯效果的方法jquery实现页面百叶窗走马灯式翻滚显示效果的方法

相关文章

实战-Swing实现文件夹浏览WebSocket实现回文树/回文自动机 (PAM) 实现及模板MySQL 读写分离的基本概念和实现方式字节前端搜索方向实习

相关问答

javascript - 自动无缝无限滚动的走马灯插件有哪些？水平和垂直滚动GridView Android垂直方向上的多实例垂直。x是线程安全的JTable：如何使用TableCellRenderer实现自定义滚动效果javascript - 产品页的这种滚动效果是怎么实现的？

相关工具

瀑布效果，不同的实现方式读取txt并实现翻页效果jQuery的垂直Slideshow双向滚动scrollviewphp 实现数据库连接池、直播平台

相关文档

常用算法实现方法各种算法的 Python 实现方案如何实现自己的 jQueryRedis 设计与实现机器学习算法 Python 实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.