UITextView の見た目を変更する(3)

前回同様、今回もUITextViewをUITextFieldの角丸と同じような見た目に変更してみる。

今回は、ココを参考にUITextViewのdrawRectメソッドをオーバーライドして自分で絵を描いてみる。

#1:まずは角丸矩形のパスを作成するメソッドを用意しておいて…

- (void)addRoundRectPath:(CGContextRef)context rect:(CGRect)rect radius:(CGFloat)radius
{
    CGFloat minX = CGRectGetMinX(rect);
    CGFloat midX = CGRectGetMidX(rect);
    CGFloat maxX = CGRectGetMaxX(rect);
    CGFloat minY = CGRectGetMinY(rect);
    CGFloat midY = CGRectGetMidY(rect);
    CGFloat maxY = CGRectGetMaxY(rect);

    CGContextMoveToPoint(context, minX, midY);
    CGContextAddArcToPoint(context, minX, minY, midX, minY, radius);
    CGContextAddArcToPoint(context, maxX, minY, maxX, midY, radius);
    CGContextAddArcToPoint(context, maxX, maxY, midX, maxY, radius);
    CGContextAddArcToPoint(context, minX, maxY, minX, midY, radius);
}

#2:角丸矩形のみ描画してみる…

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGFloat radius = 5.0f; // 角丸の半径

    [self addRoundRectPath:context rect:rect radius:radius];
    [[UIColor whiteColor] setFill];
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);
}

ios_uitextview3_02

#3:そして影のみ描画してみる…

- (void)drawRect:(CGRect)rect
{
    CGRect frame = CGRectInset([self bounds], 3, 3);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGFloat radius = 5.0f; // 角丸の半径

    // 影描画用の図形を作成
    CGContextAddRect(context, [self bounds]);
    [self addRoundRectPath:context rect:frame radius:radius];
        
    // 影を設定
    CGContextSetShadow(context, CGSizeMake(2.0f, 2.0f), 2.0f);
        
    // 描画
    CGContextDrawPath(context, kCGPathEOFill);
}

ios_uitextview3_03

#2と#3を同時に描画すると…
ios_uitextview3_04

影描画用に作成した図形が描画されたままなので、角丸矩形でクリッピングする処理を追加
最終的にはこうなった。

- (void)addRoundRectPath:(CGContextRef)context rect:(CGRect)rect radius:(CGFloat)radius
{
    CGFloat minX = CGRectGetMinX(rect);
    CGFloat midX = CGRectGetMidX(rect);
    CGFloat maxX = CGRectGetMaxX(rect);
    CGFloat minY = CGRectGetMinY(rect);
    CGFloat midY = CGRectGetMidY(rect);
    CGFloat maxY = CGRectGetMaxY(rect);

    CGContextMoveToPoint(context, minX, midY);
    CGContextAddArcToPoint(context, minX, minY, midX, minY, radius);
    CGContextAddArcToPoint(context, maxX, minY, maxX, midY, radius);
    CGContextAddArcToPoint(context, maxX, maxY, midX, maxY, radius);
    CGContextAddArcToPoint(context, minX, maxY, minX, midY, radius);
}

- (void)drawRect:(CGRect)rect
{
    CGRect frame = CGRectInset([self bounds], 3, 3);
    CGFloat radius = 5.0f;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    // 矩形(角丸)でクリッピング
    [self addRoundRectPath:context rect:frame radius:radius];
    CGContextClip(context);
    
    // 矩形(角丸)描画
    [self addRoundRectPath:context rect:frame radius:radius];
    [[UIColor whiteColor] setFill];
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFill);

    // 影描画用の図形を作成
    CGContextAddRect(context, [self bounds]);
    [self addRoundRectPath:context rect:frame radius:radius];

    // 影を設定
    CGContextSetShadow(context, CGSizeMake(2.0f, 2.0f), 2.0f);

    // 描画
    CGContextDrawPath(context, kCGPathEOFill);

    CGContextRestoreGState(context);
}

ios_uitextview3_01