IOS跑马灯效果,实现文字水平无间断滚动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IOS跑马灯效果,实现文字水平无间断滚动相关的知识,希望对你有一定的参考价值。

ViewController.h

 1 #import <UIKit/UIKit.h>
 2 
 3 @interface ViewController : UIViewController{
 4     NSTimer           *timer;
 5     UIScrollView      *scrollViewText;
 6 }
 7 
 8 @property (nonatomic ,strong) NSArray *arrData;
 9 
10 
11 @end

ViewController.m

  1 //
  2 //  ViewController.m
  3 //  跑马灯文字广告
  4 //
  5 //  Created by Time.X on 16/2/15.
  6 //  Copyright © 2016年 Time.X. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 #pragma mark - Class define variable
 12 #define K_MAIN_VIEW_SCROLL_HEIGHT 80.0f
 13 #define K_MAIN_VIEW_SCROLL_TEXT_TAG 300
 14 #define K_MAIN_VIEW_TEME_INTERVAL 0.35         //计时器间隔时间(单位秒)
 15 #define K_MAIN_VIEW_SCROLLER_SPACE 20          //每次移动的距离
 16 #define K_MAIN_VIEW_SCROLLER_LABLE_WIDTH  280  //字体宽度
 17 #define K_MAIN_VIEW_SCROLLER_LABLE_MARGIN 20   //前后间隔距离
 18 
 19 @interface ViewController ()
 20 
 21 @end
 22 
 23 @implementation ViewController
 24 
 25 #pragma mark - Class property
 26 @synthesize arrData;
 27 
 28 - (void)viewDidLoad {
 29     [super viewDidLoad];
 30     
 31     [self initView];
 32 }
 33 
 34 - (void)didReceiveMemoryWarning {
 35     [super didReceiveMemoryWarning];
 36     // Dispose of any resources that can be recreated.
 37 }
 38 
 39 
 40 #pragma mark - Custom method
 41 //初始化数据
 42 -(void) initView{
 43     
 44     if (!self.arrData) {
 45         self.arrData = @[
 46                          @{
 47                              @"newsId"   :@"201507070942261935",
 48                               @"newsImg"  :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/sy_2015070709395519.jpg",
 49                               @"newsTitle" : @"三大理由欧元任性抗跌,欧元区峰会将为希腊定调"
 50                                   },
 51                          @{
 52                              @"newsId"   :@201507070929021220,
 53                               @"newsImg"   :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/sy_2015070709273545.jpg",
 54                               @"newsTitle" :@"欧盟峰会或现希腊转机,黄金打响1162保卫战"
 55                               },
 56                          @{
 57                              @"newsId"    :@201507070656471857,
 58                               @"newsImg"   :@"http://bg.fx678.com/HTMgr/upload/UpFiles/20150707/2015070706533134.jpg",
 59                               @"newsTitle" :@"希腊困局欧元不怕,油价服软暴跌8%"
 60                               }
 61                          ];
 62     }
 63     
 64     //文字滚动
 65     [self initScrollText];
 66     
 67     //开启滚动
 68     [self startScroll];
 69 }
 70 
 71 
 72 //文字滚动初始化
 73 -(void) initScrollText{
 74     
 75     //获取滚动条
 76     scrollViewText = (UIScrollView *)[self.view viewWithTag:K_MAIN_VIEW_SCROLL_TEXT_TAG];
 77     if(!scrollViewText){
 78         scrollViewText = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, K_MAIN_VIEW_SCROLL_HEIGHT)];
 79         scrollViewText.showsHorizontalScrollIndicator = NO;   //隐藏水平滚动条
 80         scrollViewText.showsVerticalScrollIndicator = NO;     //隐藏垂直滚动条
 81         scrollViewText.tag = K_MAIN_VIEW_SCROLL_TEXT_TAG;
 82         [scrollViewText setBackgroundColor:[UIColor grayColor]];
 83         
 84         //清除子控件
 85         for (UIView *view in [scrollViewText subviews]) {
 86             [view removeFromSuperview];
 87         }
 88         
 89         //添加到当前视图
 90         [self.view addSubview:scrollViewText];
 91     }
 92     
 93     
 94     if (self.arrData) {
 95         
 96         CGFloat offsetX = 0 ,i = 0, h = 30;
 97         
 98         //设置滚动文字
 99         UILabel *labText = nil;
100         for (NSDictionary *dicTemp in self.arrData) {
101             labText = [[UILabel alloc] initWithFrame:CGRectMake(
102                                                                 i * (K_MAIN_VIEW_SCROLLER_LABLE_WIDTH + K_MAIN_VIEW_SCROLLER_LABLE_MARGIN),
103                                                                 (K_MAIN_VIEW_SCROLL_HEIGHT - h) / 2,
104                                                                 K_MAIN_VIEW_SCROLLER_LABLE_WIDTH,
105                                                                 h)];
106             [labText setFont:[UIFont systemFontOfSize:18]];
107             [labText setTextColor:[UIColor whiteColor]];
108             labText.text = dicTemp[@"newsTitle"];
109             offsetX += labText.frame.origin.x;
110             
111             //添加到滚动视图
112             [scrollViewText addSubview:labText];
113             
114             i++;
115         }
116         
117         //设置滚动区域大小
118         [scrollViewText setContentSize:CGSizeMake(offsetX, 0)];
119     }
120 }
121 
122 
123 //开始滚动
124 -(void) startScroll{
125     
126     if (!timer)
127         timer = [NSTimer scheduledTimerWithTimeInterval:K_MAIN_VIEW_TEME_INTERVAL target:self selector:@selector(setScrollText) userInfo:nil repeats:YES];
128     
129     [timer fire];
130 }
131 
132 
133 //滚动处理
134 -(void) setScrollText{
135     
136     CGFloat startX = scrollViewText.contentSize.width - K_MAIN_VIEW_SCROLLER_LABLE_WIDTH - K_MAIN_VIEW_SCROLLER_LABLE_MARGIN;
137     
138     [UIView animateWithDuration:K_MAIN_VIEW_TEME_INTERVAL * 2 animations:^{
139         CGRect rect;
140         CGFloat offsetX = 0.0;
141         
142         for (UILabel *lab in scrollViewText.subviews) {
143             
144             rect = lab.frame;
145             offsetX = rect.origin.x - K_MAIN_VIEW_SCROLLER_SPACE;
146             if (offsetX < -K_MAIN_VIEW_SCROLLER_LABLE_WIDTH)
147                 offsetX = startX;
148             
149             lab.frame = CGRectMake(offsetX, rect.origin.y, rect.size.width, rect.size.height);
150         }
151         
152         NSLog(@"offsetX:%f",offsetX);
153         
154     }];
155     
156 }
157 
158 @end

 

以上是关于IOS跑马灯效果,实现文字水平无间断滚动的主要内容,如果未能解决你的问题,请参考以下文章

Marquee(跑马灯)横向纵向无空白的不间断连续循环滚动代码

iOS开发UI篇 —— 跑马灯效果AutoLabel简介

js实现文字无间断左右滚动和图片左右滚动

Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]

JQuery实现文字无缝滚动效果 Marquee插件

请问跑马灯效果如何实现两行文字轮流从右向左跑? 一行跑完了,另一行再开始跑,这样循环