广告
返回顶部
首页 > 资讯 > 移动开发 >iOS实现文字水平无间断滚动效果
  • 517
分享到

iOS实现文字水平无间断滚动效果

ios文字滚动 2022-05-15 11:05:54 517人浏览 安东尼
摘要

iOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface

iOS跑马灯效果,实现文字水平无间断滚动,示例代码如下:

ViewController.h


#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController{
  NSTimer      *timer;
  UIScrollView   *scrollViewText;
}
 
@property (nonatomic ,strong) NSArray *arrData;
 
@end

ViewController.m


//
// ViewController.m
// 滚动
//
#import "ViewController.h"
 
#pragma mark - Class define variable
#define K_MaiN_VIEW_SCROLL_HEIGHT 80.0f
#define K_MAIN_VIEW_SCROLL_TEXT_TAG 300
#define K_MAIN_VIEW_TEME_INTERVAL 0.35        //计时器间隔时间(单位秒)
#define K_MAIN_VIEW_SCROLLER_SPACE 20.0f       //每次移动的距离
#define K_MAIN_VIEW_SCROLLER_LABLE_WIDTH   18.0f  //单个字符宽度(与你设置的字体大小一致)
#define K_MAIN_VIEW_SCROLLER_LABLE_MARGIN  20.0f  //前后间隔距离
#define K_MAIN_VIEW_SCROLLER_SLEEP_INTERVAL 1    //停留时间
 
 
@interface ViewController ()
 
@end
 
 
 
@implementation ViewController
 
#pragma mark - Class property
@synthesize arrData;
 
 
- (void)viewDidLoad {
  [super viewDidLoad];
 
  [self initView];
}
 
- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}
 
 
#pragma mark - Custom method
//初始化数据
-(void) initView{
 
  if (!self.arrData) {
    self.arrData = @[
             @{
               @"newsId"  :@"201507070942261935",
               @"newsImg" :@"/file/imgs/upload/202206/07/r1oyn43qmcx.jpg",
               @"newsTitle":@"三大理由欧元任性抗跌,欧元区峰会将为希腊定调"
             },
             @{
               @"newsId"  :@"201507070929021220",
               @"newsImg"  :@"/file/imgs/upload/202206/07/guzjuawzto0.jpg",
               @"newsTitle" :@"欧盟峰会或现希腊转机,黄金打响1162保卫战"
             },
             @{
               @"newsId"  :@"201507070656471857",
               @"newsImg"  :@"/file/imgs/upload/202206/07/krclljjywga.jpg",
               @"newsTitle" :@"希腊困局欧元不怕,油价服软暴跌8%"
             }
           ];
  }
 
  //文字滚动
  [self initScrollText];
 
  //开启滚动
  [self startScroll];
 
}
 
 
//文字滚动初始化
-(void) initScrollText{
 
  //获取滚动条
  scrollViewText = (UIScrollView *)[self.view viewWithTag:K_MAIN_VIEW_SCROLL_TEXT_TAG];
  if(!scrollViewText){
    scrollViewText = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 80, self.view.frame.size.width, K_MAIN_VIEW_SCROLL_HEIGHT)];
    scrollViewText.showsHorizontalScrollIndicator = NO;  //隐藏水平滚动条
    scrollViewText.showsVerticalScrollIndicator = NO;   //隐藏垂直滚动条
    scrollViewText.scrollEnabled = NO;          //禁用手动滑动
 
    //横竖屏自适应
    scrollViewText.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    scrollViewText.tag = K_MAIN_VIEW_SCROLL_TEXT_TAG;
    [scrollViewText setBackgroundColor:[UIColor grayColor]];
 
    //给滚动视图添加事件
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollerViewClick:)];
    [scrollViewText addGestureRecognizer:tapGesture];
 
    //添加到当前视图
    [self.view addSubview:scrollViewText];
  }else{
    //清除子控件
    for (UIView *view in [scrollViewText subviews]) {
      [view removeFromSuperview];
    }
  }
 
  if (self.arrData) {
 
    CGFloat offsetX = 0 ,i = 0, h = 30;
 
    //设置滚动文字
    UIButton *btnText = nil;
    NSString *strTitle = [[NSString alloc] init];
 
    for (NSDictionary *dicTemp in self.arrData) {
 
      strTitle = dicTemp[@"newsTitle"];
 
      btnText = [UIButton buttonWithType:UIButtonTypeCustom];
      [btnText setFrame:CGRectMake([self getTitleLeft:i],
                     (K_MAIN_VIEW_SCROLL_HEIGHT - h) / 2,
                     strTitle.length * K_MAIN_VIEW_SCROLLER_LABLE_WIDTH,
                     h)];
 
      [btnText setTitleColor:[UIColor redColor] forState:UIControlStateNORMal];
      [btnText setTitle:strTitle forState:UIControlStateNormal];
 
      //横竖屏自适应
      btnText.autoresizingMask = UIViewAutoresizingFlexibleWidth;
      offsetX += btnText.frame.origin.x;
 
      //设置为 NO,否则无法响应点击事件
      btnText.userInteractionEnabled = NO;
 
      //添加到滚动视图
      [scrollViewText addSubview:btnText];
 
      i++;
    }
 
    //设置滚动区域大小
    [scrollViewText setContentSize:CGSizeMake(offsetX, 0)];
  }
}
 
 
#pragma mark - 滚动处理
//开始滚动
-(void) startScroll{
 
  if (!timer)
    timer = [NSTimer scheduledTimerWithTimeInterval:K_MAIN_VIEW_TEME_INTERVAL target:self selector:@selector(setScrollText) userInfo:nil repeats:YES];
 
  [timer fire];
 
}
 
 
//滚动处理
-(void) setScrollText{
 
  [UIView animateWithDuration:K_MAIN_VIEW_TEME_INTERVAL * 2 animations:^{
    CGRect rect;
    CGFloat offsetX = 0.0,width = 0.0;
 
    for (UIButton *btnText in scrollViewText.subviews) {
 
      rect = btnText.frame;
      offsetX = rect.origin.x - K_MAIN_VIEW_SCROLLER_SPACE;
      width = [btnText.titleLabel.text length] * K_MAIN_VIEW_SCROLLER_LABLE_WIDTH;
 
      btnText.frame = CGRectMake(offsetX, rect.origin.y, rect.size.width, rect.size.height);
 
      NSLog(@"offsetX:%f",offsetX);
    }
 
    if (offsetX < -width){
      [UIView setAnimationsEnabled:NO];
      [self initScrollText];
    }else
      [UIView setAnimationsEnabled:YES];
  }];
 
}
 
 
#pragma mark - 动态获取左边位置
-(float) getTitleLeft:(CGFloat) i {
  float left = i * K_MAIN_VIEW_SCROLLER_LABLE_MARGIN;
 
  if (i > 0) {
    for (int j = 0; j < i; j ++) {
      left += [[self.arrData objectAtIndex:j][@"newsTitle"] length] * K_MAIN_VIEW_SCROLLER_LABLE_WIDTH;
    }
  }
 
  return left;
}
 
 
#pragma mark - 新闻点击事件
-(void)btnNewsClick:(UIButton *) sender{
 
  NSString *strNewsTitle = sender.titleLabel.text;
 
  UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统提示"
                          message:strNewsTitle
                          delegate:sender
                     cancelButtonTitle:@"确定"
                     otherButtonTitles:@"其他", nil];
  [alert show];
 
}
 
-(void)scrollerViewClick:(UITapGestureRecognizer*)gesture{
 
  CGPoint touchPoint = [gesture locationInView:scrollViewText];
 
  for (UIButton *btn in scrollViewText.subviews) {
 
    if ([btn.layer.presentationLayer hitTest:touchPoint]) {
      [self btnNewsClick:btn];
      break;
    }
 
  }
 
}
 
@end 

示例源码下载:文字水平无间断滚动效果

备注:该开发工具XCode 版本为 6.4,如无法直接运行,可新建项目将以上文件复制替换即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: iOS实现文字水平无间断滚动效果

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS实现文字水平无间断滚动效果
    IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ...
    99+
    2022-05-15
    ios 文字滚动
  • JavaScript怎么实现无间隙文字向上滚动效果
    本篇内容主要讲解“JavaScript怎么实现无间隙文字向上滚动效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript怎么实现无间隙文字向上滚动...
    99+
    2022-10-19
  • Android实现文字滚动效果
    Android 实现文字滚动效果,自己写了个timer小计时器,textview文字上下翻动效果: public class AutoTextView extends Te...
    99+
    2022-06-06
    动效 Android
  • vue实现文字滚动效果
    本文实例为大家分享了vue实现文字滚动效果的具体代码,供大家参考,具体内容如下 项目需求:系统公告,要从右忘左循环播放的牛皮广告效果。 实现: 方案一:使用定时器和CSS3的过渡属性...
    99+
    2022-11-13
  • js实现文字滚动的效果
    本文实例为大家分享了js实现文字滚动的效果的具体代码,供大家参考,具体内容如下 在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果。该动画效...
    99+
    2022-11-13
  • js如何实现文字无缝向上滚动效果
    这篇文章给大家分享的是有关js如何实现文字无缝向上滚动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。静态效果如下:(动态效果复制粘贴下面代码可见)代码如下:<!DOCT...
    99+
    2022-10-19
  • HTML如何实现滚动文字效果
    小编给大家分享一下HTML如何实现滚动文字效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在HTML中,可以使用marquee标签实现滚动文字效果,该标签可以向...
    99+
    2023-06-15
  • 如何用javascript实现文字滚动效果
    这篇文章主要介绍“如何用javascript实现文字滚动效果”,在日常操作中,相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2022-10-19
  • js如何实现文字滚动的效果
    这篇文章主要介绍“js如何实现文字滚动的效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js如何实现文字滚动的效果”文章能帮助大家解决问题。1、取值:(1)writing-mode:horizon...
    99+
    2023-07-02
  • css如何实现文字循环滚动效果
    这篇文章主要介绍“css如何实现文字循环滚动效果”,在日常操作中,相信很多人在css如何实现文字循环滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何实现文字循...
    99+
    2022-10-19
  • jquery怎么实现文字上下滚动效果
    你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码:HTML部分:```htmlLorem ...
    99+
    2023-08-09
    jquery
  • js如何实现中奖信息无间隙滚动效果
    小编给大家分享一下js如何实现中奖信息无间隙滚动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!知识要点1.实现原理:通过定时...
    99+
    2022-10-19
  • Android UI实现单行文本水平触摸滑动效果
    本文实例为大家分享了单行文本水平触摸滑动效果,通过EditText实现TextView单行长文本水平滑动效果。 下一篇再为大家介绍 多行文本折叠展开效果,自定义布局View实现...
    99+
    2022-06-06
    动效 Android
  • Javascript中怎么实现逐行滚动文字效果
    Javascript中怎么实现逐行滚动文字效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。//FILE: scrolltext.js CREATED: DannyKang...
    99+
    2023-06-03
  • CSS实现文字滚动效果的技巧和方法
    在网页设计中,文字滚动效果可以增加页面的活力和吸引力,为用户提供更好的视觉体验。通常情况下,我们可以使用CSS来实现文字滚动效果,使文字以流畅的动画形式在页面上滚动。本文将介绍一些常用的技巧和方法,帮助您实现文字滚动效果,并提供具体的代码示...
    99+
    2023-10-21
    文字效果 技巧方法 CSS滚动
  • 微信小程序实现多行文字滚动效果
    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;o...
    99+
    2022-11-11
  • 使用微信小程序实现文字滚动效果
    使用微信小程序实现文字滚动效果小程序作为一种新兴的应用开发方式,具备快速开发、跨平台、用户友好等特点,已经成为越来越多开发者的首选。在微信小程序中,实现文字滚动效果是一种常见的需求,本文将通过具体的代码示例,介绍如何使用微信小程序实现文字滚...
    99+
    2023-11-21
    微信小程序 实现 文字滚动
  • 怎么使用css实现文字循环滚动效果
    今天小编给大家分享一下怎么使用css实现文字循环滚动效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先创建一个html文...
    99+
    2023-07-04
  • js文字左右循环滚动效果怎么实现
    要实现文字的左右循环滚动效果,可以使用以下步骤:1. 创建一个包裹文字的容器元素,并设置其宽度为容器元素的父元素宽度的倍数,这样文字...
    99+
    2023-08-09
    js
  • 如何使用CSS制作水平滚动的新闻栏效果的实现步骤
    在网页设计中,为了增加新闻内容的展示效果和用户体验,经常会使用水平滚动的新闻栏效果。本文将介绍使用CSS实现水平滚动新闻栏的具体步骤,并提供代码示例供参考。创建HTML结构首先,在HTML中创建一个div容器,用来包裹新闻内容。例如:<...
    99+
    2023-10-21
    CSS 水平滚动 关键词:
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作