12

iOS 7 の新しい iTunes リモート アップデートと同じ効果を私のUILabel.

この画面を見ると：

http://313e5987718b346aaf83-f5e825270f29a84f7881423410384342.r78.cf1.rackcdn.com/1383617182-2013-11-05_03.05.58_04.png

(右側のもの)UILabelテキストの色は、背景がぼやけたアルバム カバーであり、黒いマスクがないことがわかります。

現時点では、透明なUILabeltextColor ( http://cl.ly/SInK ) を使用しています。コードはhttps://github.com/robinsenior/RSMaskedLabelに似ています。

私の最初の仮定は、そのようなビュー階層を持つことです

UIImageView (Light blurred image)
    |
UIImageView/UIView (Dark blurred image or just a dark mask for the superview)
    |
UILabel (And all my other view).

UILabel2番目のもの/マスクを無視して、最初のUIImageViewに透明なテキストの色を付けたいと思います)。

この効果を達成するための解決策に頭を悩ませることはできません。

4

3 に答える 3

2

UILabel でこれを直接行うことはできないと思います。私がしたことは、それをいくつかの部分に分解することでした:

ラベルの背景のみを描画する方法。このために、文字列から CGPathRef のコードを切り取って、文字列をパスに変換しました。次に、UILabel をサブクラス化し、次の drawRect を追加すると、適切な処理が行われました。

-(void)drawRect:(CGRect)rect {
    CGContextRef        ctx = UIGraphicsGetCurrentContext();
    CGContextSaveGState(ctx);

    // Convert the attributed text to a UIBezierPath
    CGPathRef           path = [self.attributedText createPath];

    // Adjust the path bounds horizontally as requested by the view
    CGRect              bounds = [self textRectForBounds:rect limitedToNumberOfLines:self.numberOfLines];
    CGAffineTransform   xform = CGAffineTransformMakeTranslation(bounds.origin.x, bounds.origin.y);

    // Adjust the path bounds vertically because it doesn't seem to be taken into account yet
    bounds = CGPathGetBoundingBox(path);
    xform = CGAffineTransformTranslate(xform, 0., (self.bounds.size.height - bounds.size.height) / 2.);

    // Apply the transform to the path
    path = CGPathCreateCopyByTransformingPath(path, &xform);

    // Set colors, the fill color should be the background color because we're going
    //  to draw everything BUT the text, the text will be left clear.
    CGContextSetFillColorWithColor(ctx, self.textColor.CGColor);

    // Flip and offset things
    CGContextScaleCTM(ctx, 1., -1.);
    CGContextTranslateCTM(ctx, 0., 0. - self.bounds.size.height);

    // Invert the path
    CGContextAddRect(ctx, self.bounds);
    CGContextAddPath(ctx, path);
    CGContextDrawPath(ctx, kCGPathEOFill);

    // Discard the path
    CFRelease(path);

    // Restore gstate
    CGContextRestoreGState(ctx);
}

インターフェイスビルダーで UILabel を作成し、クラスを設定し、背景色をクリアに設定し、前景色を提案された塗りつぶし色に設定すると、背景がテキストの場所から透けて見えます。

ラベルを通して表示されるボディをぼかすために、ラベルの下に FXBlurView ( https://github.com/nicklockwood/FXBlurView ) をドロップし、それらの位置合わせを維持するためのサイズ制限を設定しました。

https://github.com/dwb357/TransparentLabelですべての動作を確認できます。

于 2014-02-19T21:00:40.093 に答える
0

色は均一ではありません。しかし、実際には、ぼやけて着色された背景が透けて見えるように「カット」されています.

これを行う 1 つの方法は、グリフの CGPath を構築し、グラフィックス コンテキストをグリフにクリップしてから、コンテキストをクリアし、黒の外側の領域とグリフの内側の領域を半透明のままにすることです。

もう 1 つの方法は、この大きなぼやけた色合いのカバー アートからパターン カラーを作成し、このパターン カラーを UILabel で使用することです。

于 2013-11-12T06:25:09.440 に答える