iOS學習系列 – 標籤Tag列表的實現

本文講述如何?一個標籤Tag列表的效果。

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

在各個任務下，包括對應的標籤列表。

 

首先，自訂一個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架構，這樣就可以實現label的一些效果：

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

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

另外，看到setText:這個方法，當對該Label進行文本賦值的時候，通過sizeWithFont對Label計算相關尺寸，並對frame進行重新調整；

 

現在，實現一個包括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數組的綁定，講數組中的文本，放入到該容器中，並且通過計算，重新得到另外尺寸的frame.

然後，對FillLabelView進行調用：

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];

 

 

最終效果：

容器中，做了最後的尺寸調整。

Demo：https://github.com/sunleepy/iOS_Lab