ios 自定义图文混排走马灯
?ios 自定义图文混排走马灯
走马灯在网页中很常用，但是在客户端软件中一般都是要自己实现。
刚开始想到的就两种方法，方法1：用计时器定时刷新；方法2：自定义控件刷新绘图。
本人做ios不久，先从简单入手，使用计时器定时移位处理，但是效果不好，有卡的感觉。
只好采用方法2，自定义控件绘图刷新实现走马灯效果。
学习网上重载drawRect方法，使用动画实现。其中做了部分修改，实现自己需要的图文混排走马灯。
代码如下：
------------------ PMarquee.h ----------------
//
// PMarquee.h
//
// Created by on 12-5-22.
//
#import
@interface PMarquee : UIView{
NSDictionary *dicShowImage;//滚动显示图片
NSMutableArray *showTextsList;//滚动显示文字
int showLap;//循环滚动次数
int moveWidth;//记录控件宽度
}
@property (nonatomic, retain) NSDictionary *dicShowImage;
@property (nonatomic, retain) NSMutableArray *showTextsList;
@property (nonatomic, assign) int showLap;
-(void)calculateShowFrame;
@end
------------------ PMarquee.m ----------------
//
// PMarquee.m
//
// Created by on 12-5-22.
//
#import "PMarquee.h"
@implementation PMarquee
@synthesize dicShowImage;
@synthesize showTextsList;
@synthesize showLap;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
[self setBackgroundColor:[UIColor clearColor]];//背景默认为透明
[self setShowLap:2];//默认滚动2次
}
return self;
}
-(void)dealloc{
[super dealloc];
[dicShowImage release];
[showTextsList release];
}
//
-(void)calculateShowFrame{
int tempx = self.frame.origin.x;
//int tempy = self.frame.origin.y;
//int tempw = self.frame.size.width;
int temph = self.frame.size.height;
if (dicShowImage) {
UIImage *showImage = [dicShowImage objectForKey:@"SHOW_IMAGE"];
NSNumber *showImageW = [dicShowImage objectForKey:@"SHOW_IMAGE_W"];
NSNumber *showImageH = [dicShowImage objectForKey:@"SHOW_IMAGE_H"];
UIImageView *showImageView = [[UIImageView alloc] initWithImage:showImage];
[showImageView setBackgroundColor:[UIColor clearColor]];
[showImageView setFrame:CGRectMake(tempx + 2, 0, [showImageW floatValue], [showImageH floatValue])];
[self addSubview:showImageView];
[showImageView release];
tempx += [showImageW intValue] + 2;
}
if (showTextsList) {
int showTextsCount = [showTextsList count];
for (int i=0; i
NSString *textContent = [dicShowText objectForKey:@"TEXT_CONTENT"];
UIColor *textColor = [dicShowText object
ForKey:@"TEXT_COLOR"];
UIFont *textFont = [dicShowText objectForKey:@"TEXT_FONT"];
//
CGSize textContentSize = [textContent sizeWithFont:textFont];
CGFloat textContentW = textContentSize.width;
CGFloat textContentH = textContentSize.height;
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(tempx + 2, 0, textContentW, textContentH)];
[textLabel setBackgroundColor:[UIColor clearColor]];
[textLabel setTextAlignment:UITextAlignmentCenter];
[textLabel setFont:textFont];
[textLabel setTextColor:textColor];
[textLabel setText:textContent];
[self addSubview:textLabel];
[textLabel release];
tempx += textContentW + 2;
}
}
//tempw = tempx;
moveWidth = tempx;
NSLog(@"moveWidth: %d", moveWidth);
UIButton *btnMarqueeClick = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
[btnMarqueeClick setFrame:CGRectMake(0, 0, tempx, temph)];
[btnMarqueeClick addTarget:self action:@selector(clickMarquee) forControlEvents:UIControlEventTouchDown];
[self addSubview:btnMarqueeClick];
[self bringSubviewToFront:btnMarqueeClick];
[self setNeedsDisplay];
}
-(void)clickMarquee{
NSLog(@"clickMarquee...");
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
[super drawRect:rect];
NSLog(@"PMarquee drawRect...");
CGRect frame = self.frame;
frame.origin.x = 320;
self.frame = frame;
[UIView beginAnimations:@"MarqueeAnimation" context:NULL];
[UIView setAnimationDuration:8.0f * (moveWidth < 320 ? 320 : moveWidth) / 320.0];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationRepeatCount:showLap];
frame = self.frame;
frame.origin.x = -moveWidth;
self.frame = frame;
[UIView commitAnimations];
}
@end
------------------ 自定义走马灯使用代码片段 ----------------
PMarquee *giftMarquee = [[PMarquee alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
[giftMarquee setBackgroundColor:[UIColor clearColor]];
[giftMarquee setTag:999];
NSString *fromUserName = [dicGiftOfLuxurious objectForKey:@"FROM_USER_NAME"];
UIImage *giftImage = [dicGiftOfLuxurious objectForKey:@"GIFT_IMAGE"];
//走马灯的图片
NSNumber *showImageW = [NSNumber numberWithInt:20];
NSNumber *showImageH = [NSNumber numberWithInt:20];
NSDictionary *dicShowImage = [NSDictionary dictionaryWithObjectsAndKeys:giftImage, @"SHOW_IMAGE", showImageW, @"SHOW_IMAGE_W", sho
wImageH, @"SHOW_IMAGE_H", nil];
[giftMarquee setDicShowImage:dicShowImage];
//走马灯显示文字设置，偷懒先使用NSDictionary
NSDictionary *dicFromUser = [NSDictionary dictionaryWithObjectsAndKeys:fromUserName, @"TEXT_CONTENT", [UIColor redColor], @"TEXT_COLOR", [UIFont fontWithName:@"Arial" size:18], @"TEXT_FONT", nil];
NSMutableArray *showTextsList = [NSMutableArray arrayWithObjects:dicFromUser, nil];
[giftMarquee setDicShowImage:dicShowImage];
[giftMarquee setShowTextsList:showTextsList];
[giftMarquee setShowLap:2];
[giftMarquee calculateShowFrame];
[giftMarquee setNeedsDisplay];//强制刷新，该方法为异步执行
//移除原有的走马灯
UIView *giftMarqueeView = [self.view viewWithTag:999];
if (giftMarqueeView) {
[giftMarqueeView removeFromSuperview];
}
[self.view addSubview:giftMarquee];
[giftMarquee release];
----------------------
ps:程序可以做相应的扩展，将图片和文字的数据按照自己需要的数据放入数组中，
然后在控件中判断数据中数据的类别，类似解析XML文档的方式，
根据数组中的不同数据类别，生成走马灯中subview的控件，如label，imageview等。
这样既可灵活实现图文混排的走马灯。
注意：setNeedsDisplay方法，是调用的库中方法，而这个是和ui画图渲染机制有关的。
这个一定要在主线程中执行，即使用这个走马灯的时候，程序必须是在主线程中执行的，
否则无法达到预期效果。[这个和android中多线程时处理ui更新类似，需要在ui线程中刷新]