クレヨンしんちゃん (Swift)

Respect for

キャンパスサイズの設定

最近クレヨンしんちゃんを見ていないので念の為4:3にしましょう、自信があれば16:9でも良いと思います。

import UIKit

let shinView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 300))
let title = UILabel()

title.text = "Hello World"
title.frame = CGRect(x: 0, y: 0, width: 400, height: 300)
title.center = shinView.center

色の定義

let topColor = UIColor(red: 0.94, green: 0.51, blue: 0.64, alpha: 1.0)
let bottomColor = UIColor(red: 0.95, green: 0.95, blue: 0.50, alpha: 1.0)

これらの色をCAGradientLayerで描画します。

let gradientLayer: CAGradientLayer = CAGradientLayer()

let topColor = UIColor(red: 0.94, green: 0.51, blue: 0.64, alpha: 1.0)
let bottomColor = UIColor(red: 0.95, green: 0.95, blue: 0.50, alpha: 1.0)
let gradientColors: [CGColor] = [topColor.cgColor, bottomColor.cgColor]

gradientLayer.colors = gradientColors
gradientLayer.frame = shinView.bounds
shinView.layer.insertSublayer(gradientLayer, at: 0)

やりたいことが分かってきたでしょうか

タイトルの設定

タイトルを追加します。

let titleColor = UIColor(red: 0.38, green: 0.01, blue: 0.37, alpha: 1.0)
title.text = "開発途中で\n   だいたいプロジェクト頓挫するゾ"
title.numberOfLines = 0
title.font = .boldSystemFont(ofSize: 18)
title.textColor = titleColor

numberOfLinesで改行可能にし、Paddingはめんどくさいのでタブ文字を1文字入れて2行目を少しズラします。

ルビをふる

ルビのLabelの位置をAutoLayoutでいい感じに調整します。

ルビの文字色をタイトルと合わせておきます。

let titleColor = UIColor(red: 0.38, green: 0.01, blue: 0.37, alpha: 1.0)
ruby.text = "かいはつとちゅう"
ruby.font = .boldSystemFont(ofSize: 10)
ruby.textColor = titleColor

これでSwiftでクレヨンしんちゃんのタイトルコールを作ることが出来ました。
いかがでしたか？

オリジナル

HTML + CSS バージョン