[iPhone] UILabel 位置、サイズ、font、背景色などの設定（Swift）

UILabelの位置やフォント、背景色などの細かな設定方法を紹介します。

UILabel

　

ラベルテキスト

　

UILabelでStoryboardを使わない場合の最低限必要な記述は、frameの位置サイズは適当な値を使うとこのようになります。

これを基本として、色々と設定を加えてみたいと思います。
　

• テキストの色：textColor
  • 定番の色を設定する場合はPredefined Colorsを使えば簡単にできます。
    
    // テキスト色を青に設定 label.textColor = UIColor.blue

    1 2	// テキスト色を青に設定     label.textColor = UIColor.blue

    
    
    　
  • Specific Color Spaceを使えばRGBと透明度を詳細に設定できます。
    
    // 半透明のエメラルド色 let rgba = UIColor(red: 0.1, green: 0.7, blue: 1.0, alpha: 0.5) label.textColor = rgba

    1 2 3

    // 半透明のエメラルド色     let rgba = UIColor(red: 0.1, green: 0.7, blue: 1.0, alpha: 0.5)     label.textColor = rgba

    
    　

• フォント：font
  • デフォルトでsystemFontが使われておりサイズの設定はofSizeを使います。
    
    // システムフォントをサイズ36に設定 label.font = UIFont.systemFont(ofSize: 36)

    1 2	// システムフォントをサイズ36に設定     label.font = UIFont.systemFont(ofSize: 36)

    
    　
  • この他のシステムフォントは
    太文字：boldSystemFont(ofSize: CGFloat)
    イタリック体： italicSystemFont(ofSize: CGFloat)
    Monospace： monospacedDigitSystemFont(ofSize: CGFloat, weight: CGFloat)
    などがあります。
    
    label.font = UIFont.boldSystemFont(ofSize: 17) label.font = UIFont.italicSystemFont(ofSize: 17) label.font = UIFont.monospacedDigitSystemFont(ofSize: 17, weight: UIFont.Weight(0.1))

    1 2 3 4

    label.font = UIFont.boldSystemFont(ofSize: 17)     label.font = UIFont.italicSystemFont(ofSize: 17)     label.font = UIFont.monospacedDigitSystemFont(ofSize: 17,                  weight: UIFont.Weight(0.1))

    
    
    　
  • システムフォント以外のfontの名前とサイズを指定することもできます。その前にどんなフォントが使えるか調べるには以下のコードを実行すると分かります。
    デバッグエリアに表示
    
    let familyNames : Array = UIFont.familyNames; let len = familyNames.count; for i in 0 ..< len { let fontFamily = familyNames[i] as String; let fontNames = UIFont.fontNames(forFamilyName: fontFamily); print("\(fontFamily),\(fontNames)") }

    1 2 3 4 5 6 7 8

    let familyNames : Array = UIFont.familyNames; let len = familyNames.count;   for i in 0 ..< len {     let fontFamily = familyNames[i] as String;     let fontNames = UIFont.fontNames(forFamilyName: fontFamily);     print("\(fontFamily),\(fontNames)") }

    
    　
    
    たくさん出てきた中の１つ “Copperplate-Lite” を使ってみます。
    
    // init?(name: String, size: CGFloat) label.font = UIFont(name: "Copperplate-Light", size: 24)

    1 2	// init?(name: String, size: CGFloat)     label.font = UIFont(name: "Copperplate-Light", size: 24)

    
    
    　

 

• テキスト中央寄せ(左右寄せ)：textAlignment
  • テキストのalignmentを設定、左・中央・右寄せです。分かりやすくする為に、UILabelのサイズをマージンをいれた横幅いっぱいまで広げます。
    
    // スクリーンサイズを取得 let screenWidth:CGFloat = view.frame.size.width label.frame = CGRect(x:10, y:200, width:screenWidth-20, height:30) // テキストを中央寄せ label.textAlignment = NSTextAlignment.center // テキストを左寄せ label.textAlignment = NSTextAlignment.left // テキストを右寄せ label.textAlignment = NSTextAlignment.right

    1 2 3 4 5 6 7 8 9 10

    // スクリーンサイズを取得     let screenWidth:CGFloat = view.frame.size.width     label.frame = CGRect(x:10, y:200, width:screenWidth-20, height:30)          // テキストを中央寄せ     label.textAlignment = NSTextAlignment.center     // テキストを左寄せ     label.textAlignment = NSTextAlignment.left     // テキストを右寄せ     label.textAlignment = NSTextAlignment.right

    
    
    　
• 複数行：numberOfLines
  • ラベルの高さをいくら高くしてもデフォルトでは１行しかテキストが表示されません。テキストの最大行数まで表示するにはnumberOfLinesを0にしてラベル高を高くします。
    
    // heightを４行入るように大きくする label.frame = CGRect(x:150, y:200, width:160, height:100) // 文字列を改行コードを使って４行 label.text = "Test0\nTest1\nTest2\nTest3" // Swift4からは改行コード無しでも可能 label.text = """ Test0 Test1 Test2 Test3 """ // 最大行まで行数表示できるようにする label.numberOfLines = 0 //label.numberOfLines = 2

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    // heightを４行入るように大きくする     label.frame = CGRect(x:150, y:200, width:160, height:100)          // 文字列を改行コードを使って４行     label.text = "Test0\nTest1\nTest2\nTest3"       // Swift4からは改行コード無しでも可能     label.text = """     Test0     Test1     Test2     Test3     """       // 最大行まで行数表示できるようにする     label.numberOfLines = 0     //label.numberOfLines = 2

    
    
    この設定で numberOfLines=２ にして制限するとこのようになります。
    
    　
• テキストの影：shadowColor, shadowOffset
  • 色とオフセットを設定してテキストに影を付けられます。
    
    // テキストの影、色とオフセット label.shadowColor = UIColor.cyan label.shadowOffset = CGSize(width: 2, height: 2)

    1 2 3

    // テキストの影、色とオフセット     label.shadowColor = UIColor.cyan     label.shadowOffset = CGSize(width: 2, height: 2)

    
    
    　

ラベル背景色

　

• backgroundColor
  • 背景色は backgroundColor にUIColorを設定します。Predefined ColorsやあるいはSpecific Color Spaceを使えば半透明もできます。
    
    //let label = UILabel() // 背景のスクリーンに対するマージン let margin:CGFloat = 50 // スクリーンサイズを取得 let screenWidth:CGFloat = view.frame.size.width label.frame = CGRect(x: margin, y:200, width:screenWidth-(margin*2), height:30) label.text = "Test" // ラベルの背景色、ライトグレー label.backgroundColor = UIColor.lightGray self.view.addSubview(label)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    //let label = UILabel()          // 背景のスクリーンに対するマージン     let margin:CGFloat = 50          // スクリーンサイズを取得     let screenWidth:CGFloat = view.frame.size.width          label.frame = CGRect(x: margin, y:200, width:screenWidth-(margin*2), height:30)     label.text = "Test"          // ラベルの背景色、ライトグレー     label.backgroundColor = UIColor.lightGray              self.view.addSubview(label)

    
    
    　

ラベル位置サイズ

　

UIViewの位置設定として以下のものがあります。（UILabelはUIViewの下位階層にあるので同様に使えます）

• frame
  • 既にこれまで使っているのですが、ラベルの位置とサイズはframeに設定します。下の例ではラベル枠の左上の位置が(0, 0)になり、そこからラベル枠の横幅と高さ100を設定したものです。frame.sizeを使うとサイズのみの設定もできます。
    
    // UILabelのインスタンス作成 //let label = UILabel() // ラベルのサイズ label.frame = CGRect(x:0, y:0, width: 100, height: 100); // ラベルテキスト設定 label.text = "Test" // ラベルの背景色 label.backgroundColor = UIColor.lightGray // viewに追加 self.view.addSubview(label)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    // UILabelのインスタンス作成     //let label = UILabel()          // ラベルのサイズ     label.frame = CGRect(x:0, y:0, width: 100, height: 100);       // ラベルテキスト設定     label.text = "Test"          // ラベルの背景色     label.backgroundColor = UIColor.lightGray          // viewに追加     self.view.addSubview(label)

    
    
    　
    iPhone X系は Safe Area を考慮する必要があります。
    　
•  transform
  • UIViewを移動・回転・拡大縮小させる場合に使います。CGAffineTransformについて詳しくはこちら
    
    // 35度回転 let angle = 35 * CGFloat.pi / 180 let trans1 = CGAffineTransform(rotationAngle: CGFloat(angle)); label.transform = trans1 // 移動 let trans2 = CGAffineTransform(translationX: 150, y: 300) // 2つのアフィンを組み合わせ let trans3 = trans1.concatenating(trans2); label.transform = trans3

    1 2 3 4 5 6 7 8 9

    // 35度回転     let angle = 35 * CGFloat.pi / 180     let trans1 = CGAffineTransform(rotationAngle: CGFloat(angle));     label.transform = trans1     // 移動     let trans2 = CGAffineTransform(translationX: 150, y: 300)     // 2つのアフィンを組み合わせ     let trans3 = trans1.concatenating(trans2);     label.transform = trans3

    
    
    　
• center
  • Labelを横の中央にしたい時はcenterを設定すれば可能です。例えばスクリーン中央にLabelの中心を持ってくる場合はこのようにします。
    
    // スクリーンサイズを取得 let screenWidth:CGFloat = view.frame.size.width let screenHeight:CGFloat = view.frame.size.height // ラベルのサイズ label.frame.size = CGSize(width: 100, height: 100); // ラベルの背景色 label.backgroundColor = UIColor.lightGray // ラベルのセンターの位置をスクリーン中央に設定 label.center = CGPoint(x: screenWidth/2, y: screenHeight/2)

    1 2 3 4 5 6 7 8 9 10 11

    // スクリーンサイズを取得     let screenWidth:CGFloat = view.frame.size.width     let screenHeight:CGFloat = view.frame.size.height       // ラベルのサイズ     label.frame.size = CGSize(width: 100, height: 100);     // ラベルの背景色     label.backgroundColor = UIColor.lightGray       // ラベルのセンターの位置をスクリーン中央に設定     label.center = CGPoint(x: screenWidth/2, y: screenHeight/2)

    
    　
    
    　
• bounds
  • ローカルな位置サイズになります。frameはスクリーン、SuperViewでの絶対位置サイズです。一方、boundsはローカルなそのViewでの位置サイズとなります。例えばラベルをスクリーン中央に設定した後でboundsで設定するとこのようになりますが
    
    label.center = CGPoint(x: screenWidth/2, y: screenHeight/2) label.bounds = CGRect(x:0, y:0, width: 100, height: 100);

    1 2	label.center = CGPoint(x: screenWidth/2, y: screenHeight/2)     label.bounds = CGRect(x:0, y:0, width: 100, height: 100);

    
    
    　
    frameで設定をすると絶対位置サイズとなってcenterがキャンセルされてしまいます。
    
    label.center = CGPoint(x: screenWidth/2, y: screenHeight/2) label.frame = CGRect(x:0, y:0, width: 100, height: 100);

    1 2	label.center = CGPoint(x: screenWidth/2, y: screenHeight/2)     label.frame = CGRect(x:0, y:0, width: 100, height: 100);

    
    
    　
• layer.position
  • layerの位置を決める形で位置調整ができます。
    
    label.frame = CGRect(x:0, y:0, width: 100, height: 100); // ラベルレイヤーの位置決め label.layer.position = CGPoint(x: 100, y: 200);

    1 2 3

    label.frame = CGRect(x:0, y:0, width: 100, height: 100);     // ラベルレイヤーの位置決め     label.layer.position = CGPoint(x: 100, y: 200);

    
    
    　
• frame.origin
  • ラベルの左上originを位置として設定することもできます。
    
    label.frame = CGRect(x:0, y:0, width: 100, height: 100); // ラベルの左上originを位置として設定 label.frame.origin = CGPoint(x: 260, y: 600)

    1 2 3

    label.frame = CGRect(x:0, y:0, width: 100, height: 100);     // ラベルの左上originを位置として設定     label.frame.origin = CGPoint(x: 260, y: 600)

    
    
    　
    frame.origin.x、　frame.origin.y を使うと位置を調べられます。
    
    label.frame = CGRect(x:100, y:300, width: 100, height: 100); let labelPositionX:CGFloat = label.frame.origin.x let labelPositionY:CGFloat = label.frame.origin.y // ラベルの位置を調べられる print("labelPositionX=\(labelPositionX)") print("labelPositionY=\(labelPositionY)")

    1 2 3 4 5 6 7

    label.frame = CGRect(x:100, y:300, width: 100, height: 100);          let labelPositionX:CGFloat = label.frame.origin.x     let labelPositionY:CGFloat = label.frame.origin.y     // ラベルの位置を調べられる     print("labelPositionX=\(labelPositionX)")     print("labelPositionY=\(labelPositionY)")

    
    Logを見てみると、
    
    　

　

ラベル枠

　

• layer.borderColor, layer.borderWidth
  • この２つを設定して枠線を作成できます。
    
    let label = UILabel() label.frame = CGRect(x:0, y:0, width: 300, height: 50); // スクリーンサイズを取得 let screenWidth:CGFloat = view.frame.size.width let screenHeight:CGFloat = view.frame.size.height // ラベルのセンターを位置をスクリーン中央に設定 label.center = CGPoint(x: screenWidth/2, y: screenHeight/2) // テキストを中央寄せ label.textAlignment = NSTextAlignment.center //　ラベル枠の枠線太さと色 label.layer.borderColor = UIColor.blue.cgColor label.layer.borderWidth = 2 self.view.addSubview(label)

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    let label = UILabel()       label.frame = CGRect(x:0, y:0, width: 300, height: 50);          // スクリーンサイズを取得     let screenWidth:CGFloat = view.frame.size.width     let screenHeight:CGFloat = view.frame.size.height          // ラベルのセンターを位置をスクリーン中央に設定     label.center = CGPoint(x: screenWidth/2, y: screenHeight/2)          // テキストを中央寄せ     label.textAlignment = NSTextAlignment.center              //　ラベル枠の枠線太さと色     label.layer.borderColor = UIColor.blue.cgColor     label.layer.borderWidth = 2       self.view.addSubview(label)

    
    
    　
    枠線を角丸にすることもできます。
    
    //　ラベル枠の枠線太さと色 label.layer.borderColor = UIColor.blue.cgColor label.layer.borderWidth = 2 // ラベル枠を丸くする label.layer.masksToBounds = true // ラベル丸枠の半径 label.layer.cornerRadius = 10

    1 2 3 4 5 6 7 8

    //　ラベル枠の枠線太さと色     label.layer.borderColor = UIColor.blue.cgColor     label.layer.borderWidth = 2          // ラベル枠を丸くする     label.layer.masksToBounds = true     // ラベル丸枠の半径     label.layer.cornerRadius = 10

    
    
    　

　

関連ページ：

• UILabel を設定してテキストを表示
• UILabelをコードで記述し画面回転時の位置調整
• UILabel 位置、サイズ、font、背景色などの設定

　

References:
UILabel – UIKit | Apple Developer Documentation
UIFont – UIKit | Apple Developer Documentation
UIColor – UIKit | Apple Developer Documentation
frame – UIView | Apple Developer Documentation