苹果iOS UILabel文字跑马灯效果

在实际开发过程中,我们会遇到这样的情况,一句话太长,显示不完全,最典型的就是导航栏显示的标题文字,如果过长的文字就会出现显示不完全的情况,用UILabel可以实现跑马灯的效果,将文字展示完整。具体代码如下:

 代码如下 复制代码

#pragma mark - 动画
-(void)startAnimationIfNeeded{
    //取消、停止所有的动画
    [titleLabel.layer removeAllAnimations]; //这里的titleLabel就是要实现跑马灯文字的label
    
    CGSize size = CGSizeMake(320,2000); //设置一个行高上限
    
//    CGSize textSize = [titleLabel.text sizeWithFont:titleLabel.font];
    NSDictionary *attribute = @{NSFontAttributeName: titleLabel.font};
    CGSize textSize = [titleLabel.text boundingRectWithSize:size options: NSStringDrawingTruncatesLastVisibleLine attributes:attribute context:nil].size;
 
    CGRect lframe = titleLabel.frame;
    lframe.size.width = textSize.width;
    titleLabel.frame = lframe;
    const float oriWidth = 10;
    if (textSize.width > oriWidth) {
        float offset = textSize.width - oriWidth;
        [UIView animateWithDuration:18.0
                              delay:0
                            options:
         UIViewAnimationOptionRepeat //动画重复的主开关
//         |UIViewAnimationOptionAutoreverse //动画重复自动反向,需要和上面这个一起用
         | UIViewAnimationOptionCurveLinear //动画的时间曲线,滚动字幕线性比较合理
                         animations:^{
                             titleLabel.transform = CGAffineTransformMakeTranslation(- offset - 400, 0);
                         }
                         completion:^(BOOL finished) {
                             
                         }
         ];
    }
}

注:跑动的距离宽度可根据自己的需要对方法进行修改,动画跑动的速度也可以修改的,效果看起来还不错。

再补充一篇

 代码如下 复制代码

- (void)viewDidLoad {    
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 20.0, 200.0, 50.0)];    
    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 80.0, 200.0, 50.0)];    
    UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 140.0, 200.0, 50.0)];    
    UILabel *label4 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 200.0, 200.0, 50.0)];    
    UILabel *label5 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 260.0, 200.0, 50.0)];    
    UILabel *label6 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 320.0, 200.0, 50.0)];    
    UILabel *label7 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 380.0, 200.0, 50.0)];    
    //设置显示文字    
    label1.text = @"label1";    
    label2.text = @"label2";    
    label3.text = @"label3--label3--label3--label3--label3--label3--label3--label3--label3--label3--label3--";    
    label4.text = @"label4--label4--label4--label4--";    
    label5.text = @"label5--label5--label5--label5--label5--label5--";    
    label6.text = @"label6";    
    label7.text = @"label7";    
    //设置字体:粗体,正常的是 SystemFontOfSize    
    label1.font = [UIFont boldSystemFontOfSize:20];    
    //设置文字颜色 
    label1.textColor = [UIColor orangeColor];    
    label2.textColor = [UIColor purpleColor];    
    //设置文字位置    
    label1.textAlignment = UITextAlignmentRight;    
    label2.textAlignment = UITextAlignmentCenter;    
    //设置字体大小适应label宽度    
    label4.adjustsFontSizeToFitWidth = YES;    
 

    //设置label的行数    
    label5.numberOfLines = 2;   
    UIlabel.backgroudColor=[UIColor clearColor]; //可以去掉背景色  

 

    //设置高亮    
    label6.highlighted = YES;    
    label6.highlightedTextColor = [UIColor orangeColor];    
    //设置阴影    
    label7.shadowColor = [UIColor redColor];    
    label7.shadowOffset = CGSizeMake(1.0,1.0);    
    //设置是否能与用户进行交互    

    label7.userInteractionEnabled = YES;    
    //设置label中的文字是否可变,默认值是YES    
    label3.enabled = NO;    
    //设置文字过长时的显示格式    

    label3.lineBreakMode = UILineBreakModeMiddleTruncation;//截去中间    
//  typedef enum {    
//      UILineBreakModeWordWrap = 0,    
//      UILineBreakModeCharacterWrap,    
//      UILineBreakModeClip,//截去多余部分    
//      UILineBreakModeHeadTruncation,//截去头部    
//      UILineBreakModeTailTruncation,//截去尾部    
//      UILineBreakModeMiddleTruncation,//截去中间    
//  } UILineBreakMode;    
    //如果adjustsFontSizeToFitWidth属性设置为YES,这个属性就来控制文本基线的行为    
    label4.baselineAdjustment = UIBaselineAdjustmentNone;    
//  typedef enum {    
//      UIBaselineAdjustmentAlignBaselines,    
//      UIBaselineAdjustmentAlignCenters,    
//      UIBaselineAdjustmentNone,    
//  } UIBaselineAdjustment;    
    [self.view addSubview:label1];    
    [self.view addSubview:label2];    
    [self.view addSubview:label3];    
    [self.view addSubview:label4];    
    [self.view addSubview:label5];    
    [self.view addSubview:label6];    
    [self.view addSubview:label7];    
    [label1 release];    
    [label2 release];    
    [label3 release];    
    [label4 release];    
    [label5 release];    
    [label6 release];    
    [label7 release];    
    [super viewDidLoad];    
}    
/*  
 // Override to allow orientations other than the default portrait orientation.  
 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
 // Return YES for supported orientations  
 return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  
 */   
- (void)didReceiveMemoryWarning {    
    // Releases the view if it doesn't have a superview.    
    [super didReceiveMemoryWarning];    
    // Release any cached data, images, etc that aren't in use.    
}    
- (void)viewDidUnload {    
    // Release any retained subviews of the main view.    
    // e.g. self.myOutlet = nil;    
}    
- (void)dealloc {    
    [super dealloc];    
}    
@end 

时间: 2024-09-24 14:23:31

苹果iOS UILabel文字跑马灯效果的相关文章

Android中使用TextView实现文字跑马灯效果

通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="marquee" android:focusable="true" android:

Android实现跑马灯效果的方法_Android

本文实例讲述了Android实现跑马灯效果的方法.分享给大家供大家参考.具体如下: 运行效果截图如下: 直接在布局里写代码就好了: <TextView android:id="@+id/menu_desc" android:layout_width="300dip" android:layout_height="wrap_content" android:text="温馨提示:左右滑动更改菜单,点击进入" android

自定义TextView跑马灯效果可控制启动/停止/速度/焦点

Android自带的跑马灯效果不太好控制,不能控制速度,不能即时停止和启动,而且还受焦点的影响蛋疼不已.由于项目需求需要用的可控制性高的跑马灯效果,所以自己写了一个自定义的TextView 注意:在布局文件引用本view时,paddingLeft,paddingRigh都必须为0dp,需要增加这两个属性的,大家可以自行修改代码. android:ellipsize="marquee" android:singleLine="true" 这两个属性也要加上 复制代码

Android基于TextView不获取焦点实现跑马灯效果

本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

基于JQuery实现的跑马灯效果(文字无缝向上翻动)_jquery

(function($){ $.fn.extend({ "slideUp":function(value){ var docthis = this; //默认参数 value=$.extend({ "li_h":"30", "time":2000, "movetime":1000 },value) //向上滑动动画 function autoani(){ $("li:first",doc

Android自定义View实现竖直跑马灯效果案例解析_Android

首先给出跑马灯效果图   中间的色块是因为视频转成GIF造成的失真,自动忽略哈. 大家知道,横向的跑马灯android自带的TextView就可以实现,详情请百度[Android跑马灯效果].但是竖直的跑马灯效果原生Android是不支持的.网上也有很多网友实现了自定义的效果,但是我一贯是不喜欢看别人的代码,所以这篇博客的思路完全是我自己的想法哈.  首先,我们需要给自定义的控件梳理一下格局,如下图所示:  1.首先我们将控件分为三个区块,上面绿色部分为消失不可见的块,中间黑色部分为可见区域,下

css3 跑马灯效果详解

在手机端实现跑马灯效果,可以直接使用css3实现: 具体代码实现: 首先指定溢出时滚动: overflow:-webkit-marquee; 跑马灯样式,分三种: -webkit-marquee-style:scroll | slide | alternate; scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始. slide,从一端滚到另一端,内容接触到另一端后,立马重新开始.(ios实测和scroll一致) alternate,内容不跑到显示区域外,在里面来回碰壁反弹.这里主要

JavaScript小技巧制作的跑马灯效果

javascript|技巧 以下是我们所制作的跑马灯效果的源程序 <html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="这儿的讯息可以改为你要告诉别人的话 "+" 或是注意事项 ..."; var lentxt=scrtxt.length; var width=100; var pos=1-width; function sc

跑马灯效果实现方式三种

跑马灯效果的实现         (1)Android自带的跑马灯效果     <TextView         android:id="@+id/tv_marquee_normal"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:ellipsize="marquee