IOS 7では、画面の端からスワイプする新しいジェスチャを使用して戻ると、戻るボタン(「アーティスト」)のタイトルがピンク色(下の例では)からフェードインし、通常のフォントの重みが黒になりますフォントの太さが太くなっています。
この効果を達成するために、アニメーションでは2つの異なるラベルを使用しているように思えます。一方はフェードアウトし、他方はフェードインします。ただし、Appleは何らかの方法でフォントを調整し、通常のラベルが太字を完全にオーバーレイするため、2つの異なる重みの間で単一ラベルがモーフィングするように見えますと色。
太字のフォントと一致するように、通常のフォントの文字間隔を調整しただけですか?その場合、それはiOS 7でどのように達成されますか? Text Kitにはこれを行うための素晴らしい機能がありますか、それともどうすればよいですか?
NSAttributedString
を使用して、このような文字間隔を調整できます。
Objective-Cの場合:
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"The Clash"];
[attributedString addAttribute:NSKernAttributeName
value:@(1.4)
range:NSMakeRange(0, 9)];
self.label.attributedText = attributedString;
Swiftの場合:
let attributedString = NSMutableAttributedString(string: "The Clash")
attributedString.addAttribute(NSKernAttributeName, value: CGFloat(1.4), range: NSRange(location: 0, length: 9))
label.attributedText = attributedString
カーニングの詳細については、「 テキストプログラミングガイドの表記上の概念 」を参照してください。
太字のテキストと通常のテキストのフォント間隔を自動的に一致させるTextKit機能はないと思います。
Swift 4+の場合、構文は次のように簡単です:
let text = NSAttributedString(string: "text", attributes: [.kern: 1.4])
Swift 4およびiOS 11の場合、NSAttributedStringKey
にはkern
という静的プロパティがあります。kern
には次の 宣言 があります=:
static let kern: NSAttributedStringKey
この属性の値は、浮動小数点値を含む
NSNumber
オブジェクトです。この値は、カーニングペア文字を調整するポイントの数を指定します。カーニングは、特定の文字間に不要なスペースが発生するのを防ぎ、フォントに依存します。値0
は、カーニングが無効であることを意味します。この属性のデフォルト値は0
。
次のPlaygroundコードは、kern
に文字間隔を持たせるためにNSAttributedString
の可能な実装を示しています。
import PlaygroundSupport
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let string = "Some text"
let paragraph = NSMutableParagraphStyle()
paragraph.alignment = .center
let attributes: [NSAttributedStringKey: Any] = [
NSAttributedStringKey.kern: 2,
NSAttributedStringKey.paragraphStyle: paragraph
]
let attributedString = NSMutableAttributedString(string: string, attributes: attributes)
let label = UILabel()
label.attributedText = attributedString
view.backgroundColor = .white
view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor).isActive = true
}
}
PlaygroundPage.current.liveView = ViewController()