美文网首页iOS
iOS的UILabel设置居上对齐,居中对齐,居下对齐

iOS的UILabel设置居上对齐,居中对齐,居下对齐

作者: 守候的流年 | 来源:发表于2016-12-07 23:13 被阅读4413次

    前言:

    没有理由不去努力.png

    正文:
    想实现UILabel居上对齐,居中对齐,居下对齐,如下效果:

    效果图.png

    在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐

    具体如下:

    创建: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位置

    最后: 自己创建了一个 iOS 开发群185377619,有需要的小伙伴加一下,大家共同进步

    相关文章

      网友评论

        本文标题:iOS的UILabel设置居上对齐,居中对齐,居下对齐

        本文链接:https://www.haomeiwen.com/subject/brujmttx.html