#7 画像、テキスト、絵文字、枠線＆角丸を使用してカードを作成する

UIKitを使ったiOSアプリ開発では、画像、テキスト、絵文字、枠線、そして角の丸みを利用して、魅力的なカードを作成することができます。今回は、近所の道路を縄張りにする猫を主役に選び、この猫にピッタリのラベルを添えることにしました。直立したテキストがこの画像に最適だと考えたため、複数のラベルを使い、背景と組み合わせてダイアログボックスの雰囲気を出しました。

ステップ1: 画像ビューの作成
UIImage(named:)メソッドを使用して画像を読み込み、それをUIImageViewのインスタンスに設定します。

ステップ2: 画像ビューの外観カスタマイズ
cornerRadiusの設定とclipsToBoundsの有効化により、画像ビューに角の丸みを加えます。

ステップ3: ラベルの追加とカスタマイズ
UILabelインスタンスを作成し、そのframe、text、textColor、backgroundColor、fontを設定します。そして、cornerRadiusとmasksToBounds属性を使用して、ラベルに角の丸みを持った背景を追加します。

let textLabel = UILabel(frame: CGRect(x: 30, y: 20, width: 50, height: 50))
textLabel.text = "留"
textLabel.textColor = .white
textLabel.backgroundColor = .darkGray
textLabel.layer.cornerRadius = 10
textLabel.layer.masksToBounds = true
textLabel.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel)

let textLabel1 = UILabel(frame: CGRect(x: 30, y: 80, width: 50, height: 50))
textLabel1.text = "下"
textLabel1.textColor = .white
textLabel1.backgroundColor = .darkGray
textLabel1.layer.cornerRadius = 10
textLabel1.layer.masksToBounds = true
textLabel1.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel1)

let textLabel2 = UILabel(frame: CGRect(x: 30, y: 140, width: 50, height: 50))
textLabel2.text = "買"
textLabel2.textColor = .white
textLabel2.backgroundColor = .darkGray
textLabel2.layer.cornerRadius = 10
textLabel2.layer.masksToBounds = true
textLabel2.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel2)

let textLabel3 = UILabel(frame: CGRect(x: 30, y: 200, width: 50, height: 50))
textLabel3.text = "路"
textLabel3.textColor = .white
textLabel3.backgroundColor = .darkGray
textLabel3.layer.cornerRadius = 10
textLabel3.layer.masksToBounds = true
textLabel3.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel3)

let textLabel4 = UILabel(frame: CGRect(x: 30, y: 260, width: 50, height: 50))
textLabel4.text = "財"
textLabel4.textColor = .white
textLabel4.backgroundColor = .darkGray
textLabel4.layer.cornerRadius = 10
textLabel4.layer.masksToBounds = true
textLabel4.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel4)

let textLabel5 = UILabel(frame: CGRect(x: 30, y: 320, width: 50, height: 50))
textLabel5.text = "❗️"
textLabel5.backgroundColor = .darkGray
textLabel5.layer.cornerRadius = 10
textLabel5.layer.masksToBounds = true
textLabel5.font = UIFont.systemFont(ofSize: 50)
catImageView.addSubview(textLabel5)

成果