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

核心思想

1、通过UIView 开始动画[UIView beginAnimations:@"scroll" context:nil];到提交动画 [UIView commitAnimations]; 来实现动画效果,在这代码之间实现要做动画的效果,中间可以设置动画的速度,是否匀速及监听。

2、通过设置偏移量来实现动画效果,必须是滚动文字label超过父视图才能滚动。

3、当完成一遍动画后,判断动画是否完成及滚动文字宽度是否大于父视图(理论上是大于的,要不怎么会进入代理方法),添加一个定时器实现继续滚动,在这里实现停动效果。

4、放两个label,并设置一定间距,这样可以实现循环滚动的效果,通过数组创建UILabel *_label[2],当为向左时,初始位置是0,0 ;终点位置是第一个label的宽度+间距。

5、核心代码

  5.1 UIView beginAnimations的动画

- (void)scroll{
    //删除之前的动画,一定要加,否则外部将不能设置速度、间距及外部变量
    [self.layer removeAllAnimations];
//初始位置
    if (_dirtionType == DirtionTypeLeft) {
        self.contentOffset = CGPointMake(0, 0);
    }else if (_dirtionType == DirtionTypeRight){
        self.contentOffset = CGPointMake(_label[0].frame.size.width+_labelBetweenGap, 0);
    }
//开始动画
    [UIView beginAnimations:@"scroll" context:nil];
//动画设置参数,代理,匀速,速度等
    [UIView setAnimationDelegate:self];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:_label[0].frame.size.width/_speed];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
    //animations
//终点位置
    if (_dirtionType == DirtionTypeLeft) {
        self.contentOffset = CGPointMake(_label[0].frame.size.width+_labelBetweenGap, 0);
    }else if (_dirtionType == DirtionTypeRight){
        self.contentOffset = CGPointMake(0, 0);
    }
//完成动画
    [UIView commitAnimations];
}
//动画完成调用
- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finish context:(NSString *)context{
//动画ID animationID,也就是上面scroll,可以设置多个动画,这个animationID用来判断不同动画,finish.integerValue,如果为0时表示未完成,为1时表示已完成
    if (finish.integerValue == 1 && _label[0].frame.size.width > self.frame.size.width) {
        //pause time,动画完成时,添加定时器,设置停留时间再滚动
        [NSTimer scheduledTimerWithTimeInterval:_pauseTime target:self selector:@selector(scroll) userInfo:nil repeats:NO];
    }
}

  5.2 重新布局,设置滚动位置及决定是否可以滚动

- (void)rejustlabels{
    //set labels frame 及self contentsize和is scroll
    CGFloat offset = 0.0f;
    for (NSInteger i = 0; i < NumLabels; i++) {
        [_label[i] sizeToFit];
        CGPoint center = _label[i].center;
        center.y = self.center.y - self.frame.origin.y;
        _label[i].center = center;
        CGRect frame = _label[i].frame;
        frame.origin.x = offset;
        _label[i].frame = frame;
//每个label x的位置
        offset += _label[i].frame.size.width+_labelBetweenGap;
    }
    CGSize size;
    size.width = _label[0].frame.size.width+self.frame.size.width+_labelBetweenGap;
    size.height = self.frame.size.height;
    self.contentSize = size;
    //判断是否能滚动
    if (_label[0].frame.size.width > self.frame.size.width) {
        //show lab
        for (NSInteger i = 1; i <NumLabels; i++) {
            _label[i].hidden = NO;
        }
        [self scroll];
    }else{//如果不能滚动,重新设置x的位置
        for (NSInteger i = 1;i < NumLabels; i++) {
            _label[i].hidden = YES;
        }
        CGPoint center = _label[0].center;
        center.x = self.center.x - self.frame.origin.x;
        _label[0].center = center;
    }
}

  5.3 当有文字时不能重新布局等操作,因为会抖动

- (void)setText:(NSString *)text{
    //如果文字等于当前label的文字,判断是否大于父视图宽度,决定是否滚动,可以滚动,设置滚动,并返回
    if ([text isEqualToString:_label[0].text]) {
        if (_label[0].frame.size.width > self.frame.size.width) {
            [self scroll];
        }
        return;
    }
    for (NSInteger i = 0; i< NumLabels; i++) {
        _label[i].text = text;
    }
    [self rejustlabels];
}

 代码github地址:https://github.com/TheYouth/STRMarquee

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3495af }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3495af }
span.s1 { color: #000000 }
span.s2 { }
span.s3 { color: #b4261a }
span.s4 { color: #0433ff }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3495af }
span.s1 { color: #000000 }
span.s2 { }

时间: 2024-12-18 18:34:29

iOS开发UI篇 —— 跑马灯效果AutoLabel简介的相关文章

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @

iOS开发UI篇—实现UItableview控件数据刷新

iOS开发UI篇—实现UItableview控件数据刷新 一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运行界面: 点击选中行: 修改数据后自动刷新: 三.代码示例 数据模型部分: YYheros.h文件 // // YYheros.h // 10-英雄展示(数据刷新) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. A

iOS开发UI篇—UITableview控件基本使

iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> @interface NJHero : NSObject /** * 头像 */ @property (nonatomic, copy) NSString *icon; /** * 名称 */ @property (nonatomic, copy) NSString *name; /** * 描述 */ @

iOS开发UI篇—xib的简单使用

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

iOS开发UI篇—Quartz2D使用(绘图路径)

iOS开发UI篇-Quartz2D使用(绘图路径) 一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用来保存绘图信息. 2.把绘图信息添加到路径里边. 以前的方法是点的位置添加到ctx(图形上下文信息)中,ctx 默认会在内部创建一个path用来保存绘图信息. 在图形上下文中有一块存储空间专门用来存储绘图信息,其实这块空间就是CGMutablePa

iOS开发UI篇—Quartz2D简单使用(三)

iOS开发UI篇-Quartz2D简单使用(三) 一.通过slider控制圆的缩放 1.实现过程 新建一个项目,新建一个继承自UIview的类,并和storyboard中自定义的view进行关联. 界面搭建,如图: 代码示例: YYViewController.m文件 1 // 2 // YYViewController.m 3 // 04-对圆进行缩放 4 // 5 // Created by apple on 14-6-11. 6 // Copyright (c) 2014年 itcase.

iOS开发UI篇—APP主流UI框架结构

iOS开发UI篇-APP主流UI框架结构 一.简单示例 说明:使用APP主流UI框架结构完成简单的界面搭建 搭建页面效果:                                二.搭建过程和注意点 1.新建一个项目,把原有的控制器删除,添加UITabBarController控制器作为管理控制器 2.对照界面完成搭建 3.注意点: (1)隐藏工具条:配置一个属性,Hideabotton bar在push的时候隐藏底部的bar在那个界面隐藏,就在哪个界面设置. (2).cell可以设置行

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. //