Draw line in UILabel before and after text

人走茶凉 提交于 2019-12-11 20:01:46

问题


I want to draw a line before and after a string in UILabel exactly like the following image:

PS: the text is not static, so i can't tell what is the exact text width, otherwise i would put two static lines before and after the text.

PS: Also i can't put the label above a line and give the label background color same to the view background because i have gradient color in the lower view.


回答1:


I Hope below is what you was looking for...

#import "ViewController.h"

@interface ViewController () {
    UILabel *textLabel;
    UILabel *fakeTextLabel;
    UILabel *lineLabel1;
    UILabel *lineLabel2;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor lightGrayColor];
    NSString *labelText = @"  MOBILE INTERNET  ";
    fakeTextLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
    fakeTextLabel.backgroundColor = [UIColor blackColor];
    fakeTextLabel.textColor = [UIColor whiteColor];
    fakeTextLabel.text = labelText;
    [fakeTextLabel sizeToFit]; // this is very important...
    fakeTextLabel.hidden = YES;
    [self.view addSubview:fakeTextLabel];

    int lineWidth = (320-fakeTextLabel.frame.size.width);
    lineWidth = lineWidth / 2.00;
    textLabel = [[UILabel alloc] initWithFrame:CGRectMake(320-lineWidth-fakeTextLabel.frame.size.width, 200, fakeTextLabel.frame.size.width, 100)];
    textLabel.text = labelText;
    textLabel.textColor = [UIColor greenColor];
    [self.view addSubview:textLabel];


    lineLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 249, lineWidth, 2)];
    lineLabel1.text = @"";
    lineLabel1.backgroundColor = [UIColor redColor];

    lineLabel2 = [[UILabel alloc] initWithFrame:CGRectMake(lineWidth+fakeTextLabel.frame.size.width, 249, lineWidth, 2)];
    lineLabel2.text = @"";
    lineLabel2.backgroundColor = [UIColor redColor];

    [self.view addSubview:lineLabel1];
    [self.view addSubview:lineLabel2];
}



回答2:


You can do that in multiple ways.

Way 1. With views.

UIView *containerView = [[UIView alloc] initWithFrame:...];// The view that holds background, your label and lines
containerView.backgroundColor = [UIColor clearColor];
[containerView addSubView:bgImageView];
[containerView addSubView:label];
[label sizeToFit];
label.center = CGPointMake(containerView.frame.size.width/2, someY);

CGFloar margin = 5;
UIView *leftLineView = [UIView new];
leftLineView.backgroundColor = [UIColor whiteColor];
leftLineView.frame = CGRectMake(0, 0, containerView.frame.size.width - label.frame.size.width - margin, 0.5f); 
leftLineView.center = CGPointMake(leftLineView.center.x, label.center.y);

UIView *rightLineView = [UIView new];
rightLineView.backgroundColor = [UIColor whiteColor];
rightLineView.frame = CGRectMake(label.frame.origin.x + label.frame.size.width + margin, 0, containerView.frame.size.width - label.frame.size.width - margin, 0.5f); 
rightLineView.center = CGPointMake(rightLineView.center.x, label.center.y);

[containerView addSubiew:leftLineView];
[containerView addSubiew:rightLineView];

Way 2. With CoreGraphics.

Make a custom UIView and in -drawRect: method draw your lines.

- (void)drawRect:(CGRect)rect
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(currentContext, 0.5f);
    CGContextMoveToPoint(currentContext, 0.0f, self.label.center.y);
    CGContextAddLineToPoint(currentContext, self.label.origin.x - margin , self.label.center.y);
    CGContextMoveToPoint(currentContext, self.label.origin.x + self.label.frame.size.width + margin, self.label.center.y);    
    CGContextAddLineToPoint(currentContext, self.frame.size.width, self.label.center.y);    
}

Something like this :)

Note that I wrote this code directly in SO editor and not in Xcode, so some syntax errors possible.



来源:https://stackoverflow.com/questions/27291121/draw-line-in-uilabel-before-and-after-text

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!