本文講述如何實現(xiàn)一個標簽Tag列表的效果。

在iOS項目中的效果為圖上所示：

在各個任務(wù)下，包括對應(yīng)的標簽列表。

?

首先，自定義一個UILabel類：

FillLabel.h：

#import?<UIKit/UIKit.h>
@interface?FillLabel?:?UILabel
@end

FillLabel.m

#import?"FillLabel.h"
?
#define?MAX_SIZE_HEIGHT?10000
#define?DEFAULT_BACKGROUDCOLOR?[UIColor?colorWithRed:47.0/255?green:157.0/255?blue:216.0/255?alpha:1]
#define?DEFAULT_TEXTCOLOR?[UIColor?whiteColor]
#define?DEFAULT_FONT?[UIFont?boldSystemFontOfSize:10]
#define?DEFAULT_TEXTALIGNMENT?UITextAlignmentCenter
#define?DEFAULT_RADIUS?5.0f
?
@implementation?FillLabel
?
-?(id)initWithFrame:(CGRect)frame
{
????self?=?[super?initWithFrame:frame];
????if?(self)?{
?
????????self.backgroundColor?=?DEFAULT_BACKGROUDCOLOR;
????????self.textColor?=?DEFAULT_TEXTCOLOR;
????????self.font?=?DEFAULT_FONT;
????????self.textAlignment?=?DEFAULT_TEXTALIGNMENT;
?
????????self.layer.masksToBounds?=?YES;
????????self.layer.cornerRadius?=?DEFAULT_RADIUS;
?
????}
????return?self;
}
?
-(void)setRadius:(CGFloat)radius
{
????self.layer.cornerRadius?=?radius;
}
?
-(void)setText:(NSString?*)text
{
????super.text?=?text;
?
????CGSize?size?=?[self.text?sizeWithFont:self.font?constrainedToSize:CGSizeMake(320,?MAX_SIZE_HEIGHT)?lineBreakMode:UILineBreakModeWordWrap];
????self.frame?=?CGRectMake(self.frame.origin.x,?self.frame.origin.y,?size.width?+?8,?size.height);
}
?
@end

在使用CALayer的時候，必須引入QuartzCore.framework框架，這樣就可以實現(xiàn)label的一些效果：

self.layer.masksToBounds?=?YES;
self.layer.cornerRadius?=?DEFAULT_RADIUS;

其中cornerRadius用來控制Label的圓角半徑；

另外，看到setText:這個方法，當(dāng)對該Label進行文本賦值的時候，通過sizeWithFont對Label計算相關(guān)尺寸，并對frame進行重新調(diào)整；

?

現(xiàn)在，實現(xiàn)一個包括Tag列表的容器，假定這兒自定義一個UIView類：

FillLabelView.h:

#import?<UIKit/UIKit.h>
@interface?FillLabelView?:?UIView
-?(void)bindTags:(NSMutableArray*)tags;
@end

?

FillLabelView.m:

#import?"FillLabelView.h"
#import?"FillLabel.h"
?
@implementation?FillLabelView
?
-?(id)initWithFrame:(CGRect)frame
{
????self?=?[super?initWithFrame:frame];
????if?(self)
????{
????}
????return?self;
}
?
-?(void)bindTags:(NSMutableArray*)tags
{
????CGFloat?frameWidth?=?self.frame.size.width;
?
????CGFloat?tagsTotalWidth?=?0.0f;
????CGFloat?tagsTotalHeight?=?0.0f;
?
????CGFloat?tagHeight?=?0.0f;
????for?(NSString?*tag?in?tags)
????{
????????FillLabel?*fillLabel?=?[[FillLabel?alloc]?initWithFrame:CGRectMake(tagsTotalWidth,?tagsTotalHeight,?0,?0)];
????????fillLabel.text?=?tag;
????????tagsTotalWidth?+=?fillLabel.frame.size.width?+?2;
????????tagHeight?=?fillLabel.frame.size.height;
?
????????if(tagsTotalWidth?>=?frameWidth)
????????{
????????????tagsTotalHeight?+=?fillLabel.frame.size.height?+?2;
????????????tagsTotalWidth?=?0.0f;
????????????fillLabel.frame?=?CGRectMake(tagsTotalWidth,?tagsTotalHeight,?fillLabel.frame.size.width,?fillLabel.frame.size.height);
????????????tagsTotalWidth?+=?fillLabel.frame.size.width?+?2;
????????}
????????[self?addSubview:fillLabel];
????????[fillLabel?release];
????}
????tagsTotalHeight?+=?tagHeight;
?
????self.frame?=?CGRectMake(self.frame.origin.x,?self.frame.origin.y,?self.frame.size.width,?tagsTotalHeight);
}
?
@end

其中，有個bindTags:方法，該方法接受一個MSMutableArray數(shù)組的綁定，講數(shù)組中的文本，放入到該容器中，并且通過計算，重新得到另外尺寸的frame.

然后，對FillLabelView進行調(diào)用：

NSMutableArray?*array?=?[NSMutableArray?arrayWithObjects:@"web",@"hybrid",@"native",@"leepy",@"sunleepy",nil];
?
????FillLabelView?*fillLabelView?=?[[FillLabelView?alloc]?initWithFrame:CGRectMake(10,?10,?120,?100)];
????fillLabelView.layer.borderWidth?=?1.0f;
????fillLabelView.layer.borderColor?=?[[UIColor?blueColor]?CGColor];
????[fillLabelView?bindTags:array];
????[self.view?addSubview:fillLabelView];
????[fillLabelView?release];

?

?

最終效果：

容器中，做了最后的尺寸調(diào)整。

Demo下載地址：https://github.com/sunleepy/iOS_Lab

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/liping13599168/archive/2012/10/22/2733701.html

總結(jié)

以上是生活随笔為你收集整理的iOS学习系列 - 标签Tag列表的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。