跑馬是大家都很熟悉的一種現象(嘿嘿嘿~~~),這個不做多解釋。我們會在眾多的app或者網頁上看到跑馬顯示的效果。
近期項目需要實現這樣一個功能:一個展示文字的控件顯示一段文字(例如一個標題),實現在左右方向上的循環滾動。為了實現這樣一個小功能,我就封裝了一個控件,用于實現其功能。
其具體的實現過程及代碼如下:
自定義視圖EntertainingDiversionsView繼承于UIView
EntertainingDiversionsView .h
#import <UIKit/UIKit.h>
@interface EntertainingDiversionsView : UIView
/**
顯示字體的顏色 默認黑色
*/
@property(nonatomic,strong)UIColor *show_textColor;
/**
顯示字體的大小 默認17
*/
@property(nonatomic,assign)CGFloat show_textFontSize;
/**
顯示字體的背景顏色 默認白色
*/
@property(nonatomic,strong)UIColor *show_textBgColor;
/**
滾動時間間隔 多長時間滾動一個像素 默認是0.01 值越小滾動的速度越快
*/
@property(nonatomic,assign)NSTimeInterval show_speedInterval;
/**
跑馬燈初始化
@param frame 位置
@param runSpeedInteral 滾動速度間隔(以像素點為單位)
@return EntertainingDiversionsView
*/
- (instancetype)initWithFrame:(CGRect)frame runSpeedInteral:(CGFloat)runSpeedInteral;
/**
運動狀態下顯示的文字設置
@param showText showText description
*/
-(void)showTextInRuning:(NSString *)showText;
/**
開始滾動
*/
-(void)run;
/**
暫停滾動
*/
-(void)stop;
@end
EntertainingDiversionsView .m
#import "EntertainingDiversionsView.h"
@interface EntertainingDiversionsView ()
@property(nonatomic, strong)NSTimer *timer;
@property(nonatomic, strong)UILabel *showTextLabel;
@end
@implementation EntertainingDiversionsView
-(instancetype)initWithFrame:(CGRect)frame runSpeedInteral:(CGFloat)runSpeedInteral{
EntertainingDiversionsView *entertainingDiversionsView =[self initWithFrame:frame];
_show_speedInterval = runSpeedInteral;
[self initTimer];
return entertainingDiversionsView;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.clipsToBounds = YES;//切除超出部分
}
return self;
}
-(UILabel *)showTextLabel{
if (_showTextLabel == nil) {
_showTextLabel = [[UILabel alloc]init];
[self addSubview:_showTextLabel];
}
return _showTextLabel;
}
-(void)showTextInRuning:(NSString *)showText{
self.showTextLabel.text = showText;
NSDictionary *attribute = @{NSFontAttributeName:[UIFont boldSystemFontOfSize:18]};
CGSize size = [self.showTextLabel.text sizeWithAttributes:attribute];
self.showTextLabel.frame=CGRectMake(self.frame.size.width, 0, size.width, self.frame.size.height);
}
#pragma mark------初始化計時器,并設置計時器輪式切換的速度
-(void)initTimer{
if (_timer == nil) {
if (_show_speedInterval == 0) {
_timer = [NSTimer timerWithTimeInterval:0.01 target:self selector:@selector(eventWithTimeChange) userInfo:nil repeats:YES];
}else{
_timer = [NSTimer timerWithTimeInterval:_show_speedInterval target:self selector:@selector(eventWithTimeChange) userInfo:nil repeats:YES];
}
[[NSRunLoop currentRunLoop]addTimer:_timer forMode:NSDefaultRunLoopMode];
[_timer fire];
}
}
#pragma mark------位置改變
-(void)eventWithTimeChange{
CGRect rect = self.showTextLabel.frame;
rect.origin.x -= 1;
//設置rect.origin.x < rect.origin.x < -rect.size.width - rect.size.width/4的時候重置frame,是為了內容完全展示完畢的時候 有一個時間間隔 這個根據個人情況而定
if (rect.origin.x < -rect.size.width - rect.size.width/4) {
rect.origin.x = self.frame.size.width;
}
self.showTextLabel.frame = rect;
}
#pragma mark------屬性設置
-(void)setShow_textColor:(UIColor *)show_textColor{
self.showTextLabel.textColor = show_textColor;
}
-(void)setShow_textBgColor:(UIColor *)show_textBgColor{
self.showTextLabel.backgroundColor = show_textBgColor;
}
-(void)setShow_textFontSize:(CGFloat)show_textFontSize{
self.showTextLabel.font = [UIFont boldSystemFontOfSize:show_textFontSize];
}
//開始滾動
-(void)run{
[_timer setFireDate:[NSDate distantPast]];
}
//停止滾動
-(void)stop{
[_timer setFireDate:[NSDate distantFuture]];
}
//釋放占用
-(void)dealloc{
[_timer invalidate];
_timer = nil;
}
@end
以上是其自定義過程,其使用也是相當的簡單,只需要實現:
entertainingDiversionsView = [[EntertainingDiversionsView alloc]initWithFrame:CGRectMake(20, 100, self.view.frame.size.width - 40, 40) runSpeedInteral:0.01];
[entertainingDiversionsView showTextInRuning:@"北京教培師訓網絡科技股份有限公司"];
[self.view addSubview:entertainingDiversionsView];
另外我們也可以設置一下跑馬字體的大小,顏色,背景顏色信息
entertainingDiversionsView.show_textColor = [UIColor redColor];
entertainingDiversionsView.show_textFontSize = 20;
entertainingDiversionsView.show_textBgColor = [UIColor greenColor];