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

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

  1. ラベルテキスト
    • テキストの色:textColor
    • フォント:font
    • テキスト中央寄せ(左右寄せ):textAlignment
    • 複数行:numberOfLines
    • テキストの影:shadowColot, shadowOffset
  2. ラベル背景色
    • backgroundColor
  3. ラベル位置サイズ
    • frame
    • transform
    • center
    • bounds
    • layer.position
    • frame.origin
  4. ラベル枠
    • layer.borderColor, layer.borderWidth

 

Swift 4.0
Xcode 9.0

 

UILabel

 

ラベルテキスト

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


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

  • テキストの色:textColor
    • 定番の色を設定する場合はPredefined Colorsを使えば簡単にできます。


       
    • Specific Color Spaceを使えばRGBと透明度を詳細に設定できます。

       
  • フォント:font
    • デフォルトでsystemFontが使われておりサイズの設定はofSizeを使います。

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


       
    • システムフォント以外のfontの名前とサイズを指定することもできます。その前にどんなフォントが使えるか調べるには以下のコードを実行すると分かります。

       

      たくさん出てきた中の1つ “Copperplate-Lite” を使ってみます。


       

  • テキスト中央寄せ(左右寄せ):textAlignment
    • テキストのalignmentを設定、左・中央・右寄せです。分かりやすくする為に、UILabelのサイズをマージンをいれた横幅いっぱいまで広げます。


       
  • 複数行:numberOfLines
    • ラベルの高さをいくら高くしてもデフォルトでは1行しかテキストが表示されません。テキストの最大行数まで表示するにはnumberOfLinesを0にしてラベル高を高くします。


      この設定で numberOfLines=2 にして制限するとこのようになります。

       
  • テキストの影:shadowColor, shadowOffset
    • 色とオフセットを設定してテキストに影を付けられます。


       
 

ラベル背景色

  • backgroundColor
    • 背景色は backgroundColor にUIColorを設定します。Predefined ColorsやあるいはSpecific Color Spaceを使えば半透明もできます。


       
 

ラベル位置サイズ

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

  • frame
    • 既にこれまで使っているのですが、ラベルの位置とサイズはframeに設定します。下の例ではラベル枠の左上の位置が(0, 0)になり、そこからラベル枠の横幅と高さ100を設定したものです。frame.sizeを使うとサイズのみの設定もできます。


       
  •  transform
    • UIViewを移動・回転・拡大縮小させる場合に使います。CGAffineTransformについて詳しくはこちら


       
  • center
    • Labelを横の中央にしたい時はcenterを設定すれば可能です。例えばスクリーン中央にLabelの中心を持ってくる場合はこのようにします。

       

       
  • bounds
    • ローカルな位置サイズになります。frameはスクリーン、SuperViewでの絶対位置サイズです。一方、boundsはローカルなそのViewでの位置サイズとなります。例えばラベルをスクリーン中央に設定した後でboundsで設定するとこのようになりますが


       
      frameで設定をすると絶対位置サイズとなってcenterがキャンセルされてしまいます。


       
  • layer.position
    • layerの位置を決める形で位置調整ができます。


       
  • frame.origin
    • ラベルの左上originを位置として設定することもできます。


       
      frame.origin.x、 frame.origin.y を使うと位置を調べられます。


       

 

 

ラベル枠

  • layer.borderColor, layer.borderWidth
    • この2つを設定して枠線を作成できます。


       
      枠線を角丸にすることもできます。


       

 
関連ページ:

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


ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする