IOS Learning Series-Tag List Implementation

This article describes how to implement a Tag list.

The effect of the iOS project is shown in the figure:

In each task, the corresponding tag List is included.

 

First, define a UILabel class:

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

When using CALayer, you must introduce the QuartzCore. framework to implement some label effects:

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

CornerRadius is used to control the radius of the Label rounded corner;

In addition, we can see setText: This method. When assigning a value to the Label, we use sizeWithFont to calculate the relevant size of the Label and re-adjust the frame;

 

Now, implement a container that includes the Tag list. Assume that a UIView class is customized here:

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

Here, there is a bindTags: method, which accepts the binding of an MSMutableArray array, stresses the text in the array, puts it into the container, and re-obtains the frame of another size through calculation.

Then, call 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];

 

 

Final effect:

In the container, make the final size adjustment.

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