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