ios - 如何绘制一个非矩形的 UITextView？

Question

我只是想创建一个这样的UITextView(不是两个textview，空白处是一个uiimage)

Answer 1

没有内置的 UIView 子类可以执行此操作(如果您编写正确的 HTML 和 CSS，则 UIWebView 除外)，但使用 Core Text 很容易做到。我把我的测试项目放在 my ShapedLabel github repository 中, 这是它的样子:

该项目有一个名为 ShapedLabel 的 UIView 子类。这是它的工作原理。

创建一个名为 ShapedLabel 的 UIView 子类。给它这些属性:

@property (nonatomic, copy) NSString *text;
@property (nonatomic) UITextAlignment textAlignment;
@property (nonatomic, copy) NSString *fontName;
@property (nonatomic) CGFloat fontSize;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) UIColor *shapeColor;
@property (nonatomic, copy) UIBezierPath *path;

您需要覆盖每个属性设置方法以发送 setNeedsDisplay，例如:

- (void)setFontName:(NSString *)fontName {
    _fontName = [fontName copy];
    [self setNeedsDisplay];
}

我依靠 ARC 担心释放 _fontName 的旧值。如果您不使用 ARC... 开始。它非常简单，并且自 iOS 4.0 起就受支持。

无论如何，您需要实现drawRect:，真正的工作在这里完成。首先，如果设置了 shapeColor，我们将填充该形状:

- (void)drawRect:(CGRect)rect
{
    if (!_path)
        return;

    if (_shapeColor) {
        [_shapeColor setFill];
        [_path fill];
    }

我们检查以确保我们拥有我们需要的所有其他参数:

    if (!_text || !_textColor || !_fontName || _fontSize <= 0)
        return;

接下来我们处理 textAligment 属性:

    CTTextAlignment textAlignment = NO ? 0
        : _textAlignment == UITextAlignmentCenter ? kCTCenterTextAlignment
        : _textAlignment == UITextAlignmentRight ? kCTRightTextAlignment
        : kCTLeftTextAlignment;
    CTParagraphStyleSetting paragraphStyleSettings[] = {
        {
            .spec = kCTParagraphStyleSpecifierAlignment,
            .valueSize = sizeof textAlignment,
            .value = &textAlignment
        }
    };
    CTParagraphStyleRef style = CTParagraphStyleCreate(paragraphStyleSettings, sizeof paragraphStyleSettings / sizeof *paragraphStyleSettings);

接下来我们创建CTFont。请注意，这不同于 CGFont 或 UIFont。您可以使用 CTFontCreateWithGraphicsFont 将 CGFont 转换为 CTFont，但是您无法轻松地将 UIFont 转换为 CTFont。无论如何，我们只是直接创建 CTFont:

    CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)_fontName, _fontSize, NULL);

我们创建属性字典来定义我们想要看到的所有样式属性:

    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
        (__bridge id)font, kCTFontAttributeName,
        _textColor.CGColor, kCTForegroundColorAttributeName,
        style, kCTParagraphStyleAttributeName,
        nil];
    CFRelease(font);
    CFRelease(style);

一旦我们有了属性字典，我们就可以创建属性字符串，将属性字典附加到文本字符串。这是 Core Text 使用的:

    CFAttributedStringRef trib = CFAttributedStringCreate(NULL, (__bridge CFStringRef)_text, (__bridge CFDictionaryRef)attributes);

我们创建了一个 Core Text framesetter，它将根据属性字符串布置文本:

    CTFramesetterRef setter = CTFramesetterCreateWithAttributedString(trib);
    CFRelease(trib);

Core Text 假定图形上下文将具有原点在左下方的“标准”Core Graphics 坐标系。但是 UIKit 更改了上下文以将原点放在左上角。我们假设路径是在考虑到这一点的情况下创建的。所以我们需要一个垂直翻转坐标系的变换:

    // Core Text lays out text using the default Core Graphics coordinate system, with the origin at the lower left.  We need to compensate for that, both when laying out the text and when drawing it.
    CGAffineTransform textMatrix = CGAffineTransformIdentity;
    textMatrix = CGAffineTransformTranslate(textMatrix, 0, self.bounds.size.height);
    textMatrix = CGAffineTransformScale(textMatrix, 1, -1);

然后我们可以创建路径的翻转副本:

    CGPathRef flippedPath = CGPathCreateCopyByTransformingPath(_path.CGPath, &textMatrix);

最后我们可以让框架 setter 布置一个文本框架。这实际上适合 path 属性定义的形状内的文本:

    CTFrameRef frame = CTFramesetterCreateFrame(setter, CFRangeMake(0, 0), flippedPath, NULL);
    CFRelease(flippedPath);
    CFRelease(setter);

最后我们绘制文本。我们需要再次

    CGContextRef gc = UIGraphicsGetCurrentContext();
    CGContextSaveGState(gc); {
        CGContextConcatCTM(gc, textMatrix);
        CTFrameDraw(frame, gc);
    } CGContextRestoreGState(gc);
    CFRelease(frame);
}

差不多就这些了。您现在可以在屏幕上放置一个形状漂亮的标签。

对于后代(以防我删除测试项目)，这里是 ShapedLabel 类的完整源代码。

ShapedLabel.h

#import <UIKit/UIKit.h>

@interface ShapedLabel : UIView

@property (nonatomic, copy) NSString *text;
@property (nonatomic) UITextAlignment textAlignment;
@property (nonatomic, copy) NSString *fontName;
@property (nonatomic) CGFloat fontSize;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) UIColor *shapeColor;
@property (nonatomic, copy) UIBezierPath *path;

@end

ShapedLabel.m

#import "ShapedLabel.h"
#import <CoreText/CoreText.h>

@implementation ShapedLabel

@synthesize fontName = _fontName;
@synthesize fontSize = _fontSize;
@synthesize path = _path;
@synthesize text = _text;
@synthesize textColor = _textColor;
@synthesize shapeColor = _shapeColor;
@synthesize textAlignment = _textAlignment;

- (void)commonInit {
    _text = @"";
    _fontSize = UIFont.systemFontSize;
    // There is no API for just getting the system font name, grr...
    UIFont *uiFont = [UIFont systemFontOfSize:_fontSize];
    _fontName = [uiFont.fontName copy];
}

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

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self commonInit];
    }
    return self;
}

- (void)setFontName:(NSString *)fontName {
    _fontName = [fontName copy];
    [self setNeedsDisplay];
}

- (void)setFontSize:(CGFloat)fontSize {
    _fontSize = fontSize;
    [self setNeedsDisplay];
}

- (void)setPath:(UIBezierPath *)path {
    _path = [path copy];
    [self setNeedsDisplay];
}

- (void)setText:(NSString *)text {
    _text = [text copy];
    [self setNeedsDisplay];
}

- (void)setTextColor:(UIColor *)textColor {
    _textColor = textColor;
    [self setNeedsDisplay];
}

- (void)setTextAlignment:(UITextAlignment)textAlignment {
    _textAlignment = textAlignment;
    [self setNeedsDisplay];
}

- (void)setShapeColor:(UIColor *)shapeColor {
    _shapeColor = shapeColor;
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    if (!_path)
        return;

    if (_shapeColor) {
        [_shapeColor setFill];
        [_path fill];
    }

    if (!_text || !_textColor || !_fontName || _fontSize <= 0)
        return;

    CTTextAlignment textAlignment = NO ? 0
    : _textAlignment == UITextAlignmentCenter ? kCTCenterTextAlignment
    : _textAlignment == UITextAlignmentRight ? kCTRightTextAlignment
    : kCTLeftTextAlignment;
    CTParagraphStyleSetting paragraphStyleSettings[] = {
        {
            .spec = kCTParagraphStyleSpecifierAlignment,
            .valueSize = sizeof textAlignment,
            .value = &textAlignment
        }
    };
    CTParagraphStyleRef style = CTParagraphStyleCreate(paragraphStyleSettings, sizeof paragraphStyleSettings / sizeof *paragraphStyleSettings);

    CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)_fontName, _fontSize, NULL);

    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                (__bridge id)font, kCTFontAttributeName,
                                _textColor.CGColor, kCTForegroundColorAttributeName,
                                style, kCTParagraphStyleAttributeName,
                                nil];
    CFRelease(font);
    CFRelease(style);

    CFAttributedStringRef trib = CFAttributedStringCreate(NULL, (__bridge CFStringRef)_text, (__bridge CFDictionaryRef)attributes);
    CTFramesetterRef setter = CTFramesetterCreateWithAttributedString(trib);
    CFRelease(trib);

    // Core Text lays out text using the default Core Graphics coordinate system, with the origin at the lower left.  We need to compensate for that, both when laying out the text and when drawing it.
    CGAffineTransform textMatrix = CGAffineTransformIdentity;
    textMatrix = CGAffineTransformTranslate(textMatrix, 0, self.bounds.size.height);
    textMatrix = CGAffineTransformScale(textMatrix, 1, -1);

    CGPathRef flippedPath = CGPathCreateCopyByTransformingPath(_path.CGPath, &textMatrix);
    CTFrameRef frame = CTFramesetterCreateFrame(setter, CFRangeMake(0, 0), flippedPath, NULL);
    CFRelease(flippedPath);
    CFRelease(setter);

    CGContextRef gc = UIGraphicsGetCurrentContext();
    CGContextSaveGState(gc); {
        CGContextConcatCTM(gc, textMatrix);
        CTFrameDraw(frame, gc);
    } CGContextRestoreGState(gc);
    CFRelease(frame);
}

@end