iOS的UILabel設置居上對齊,居中對齊,居下對齊

前言:

沒有理由不去努力.png

正文:
想實現(xiàn)UILabel居上對齊,居中對齊,居下對齊,如下效果:

效果圖.png

在iOS中默認的UILabel中的文字在豎直方向上只能居中對齊,博主參考國外網(wǎng)站,從UILabel繼承了一個新類,實現(xiàn)了居上對齊,居中對齊,居下對齊

具體如下:

創(chuàng)建:MYLabel 繼承與UILabel

在MYLabel.h中完成

在MYLabel.h中完成

//
//  MYLabel.h
//  LabelDemo
//
//  Created by wangergang on 2016/12/7.
//  Copyright ? 2016年 MYCompangName. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef enum {
    VerticalAlignmentTop = 0, //default
    VerticalAlignmentMiddle,
    VerticalAlignmentBottom,
    
} VerticalAlignment;

@interface MYLabel : UILabel {

@private
    VerticalAlignment _verticalAlignment;
}

@property (nonatomic) VerticalAlignment verticalAlignment;

@end

在MYLabel.m中完成

在MYLabel.m中完成

//
//  MYLabel.m
//  LabelDemo
//
//  Created by wangergang on 2016/12/7.
//  Copyright ? 2016年 MYCompangName. All rights reserved.
//

#import "MYLabel.h"

@implementation MYLabel

@synthesize verticalAlignment = verticalAlignment_;

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.verticalAlignment = VerticalAlignmentMiddle;
    }
    return self;
}

- (void)setVerticalAlignment:(VerticalAlignment)verticalAlignment {
    verticalAlignment_ = verticalAlignment;
    [self setNeedsLayout];
}


- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines {
    CGRect textRect = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];
    switch (self.verticalAlignment) {
        case VerticalAlignmentTop:
            textRect.origin.y = bounds.origin.y;
            break;
        case VerticalAlignmentBottom:
            textRect.origin.y = bounds.origin.y + bounds.size.height - textRect.size.height;
            break;
        case VerticalAlignmentMiddle:
            // Fall through.
        default:
            textRect.origin.y = bounds.origin.y + (bounds.size.height - textRect.size.height) / 2.0;
    }
    return textRect;
}

-(void)drawTextInRect:(CGRect)requestedRect {
    CGRect actualRect = [self textRectForBounds:requestedRect limitedToNumberOfLines:self.numberOfLines];
    [super drawTextInRect:actualRect];
}

@end

使用:首先記得引入頭文件

import "MYLabel.h"

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupLabel];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)setupLabel {
    //居上對齊
    MYLabel *topLabel = [[MYLabel alloc] initWithFrame:CGRectMake(20, 275, 350, 200)];

    topLabel.text = @"劇終了、劇終了、劇終了、劇終了、劇終了、劇終了、劇終了、";
    topLabel.backgroundColor = [UIColor cyanColor];
    topLabel.textAlignment = NSTextAlignmentLeft;
    topLabel.textColor = [UIColor blueColor];
    topLabel.lineBreakMode = NSLineBreakByCharWrapping;
    topLabel.numberOfLines = 0;
    [topLabel setVerticalAlignment:VerticalAlignmentMiddle];
    [self.view addSubview:topLabel];
    
    
    //居中對齊
    MYLabel *middleLabel = [[MYLabel alloc] initWithFrame:CGRectMake(20, 500, 350, 200)];
    
    middleLabel.text = @"向下看、向下看、向下看、向下看、向下看、向下看、向下看、向下看、";
    middleLabel.backgroundColor = [UIColor cyanColor];
    middleLabel.textAlignment = NSTextAlignmentLeft;
    middleLabel.textColor = [UIColor blueColor];
    middleLabel.lineBreakMode = NSLineBreakByCharWrapping;
    middleLabel.numberOfLines = 0;
    [middleLabel setVerticalAlignment:VerticalAlignmentBottom];
    [self.view addSubview:middleLabel];
    
    //居下對齊
    MYLabel *bottomLabel = [[MYLabel alloc] initWithFrame:CGRectMake(20, 50, 350, 200)];
    
    bottomLabel.text = @"看我居上對齊了啊、你看看對不對的啊、看來是對的";
    bottomLabel.backgroundColor = [UIColor cyanColor];
    bottomLabel.textAlignment = NSTextAlignmentLeft;
    bottomLabel.textColor = [UIColor blueColor];
    bottomLabel.lineBreakMode = NSLineBreakByCharWrapping;
    bottomLabel.numberOfLines = 0;
    [bottomLabel setVerticalAlignment:VerticalAlignmentTop];
    [self.view addSubview:bottomLabel];
}

swift 語言相對簡單多了,直接擼

import UIKit

/// label 的對齊類型
public enum VerticalAlignment {
    case top
    case middle
    case bottom
}


class MYLabel: UILabel {
    
    var verticalAlignment : VerticalAlignment?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.verticalAlignment = VerticalAlignment.middle
        
    }
    
    override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
        var textRect: CGRect = super.textRect(forBounds: bounds, limitedToNumberOfLines: numberOfLines)
        switch self.verticalAlignment {
        case .top?:
            textRect.origin.y = bounds.origin.y
        case .bottom?:
            textRect.origin.y = bounds.origin.y + bounds.size.height - textRect.size.height
        case .middle?:
            fallthrough
        default:
            textRect.origin.y = bounds.origin.y + (bounds.size.height - textRect.size.height) / 2.0
        }
        return textRect
    }
    
    override func draw(_ rect: CGRect) {
        let rect : CGRect = self.textRect(forBounds: rect, limitedToNumberOfLines: self.numberOfLines)
        super.drawText(in: rect)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

其效果圖如上圖:就不再上傳了

Demo位置github位置

最后: 自己創(chuàng)建了一個 iOS 開發(fā)群185377619,有需要的小伙伴加一下,大家共同進步

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容