クレヨンしんちゃん

頻繁に書くのでメモがてら記事にします。

# キャンバスサイズの設定

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

```diff_swift
struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
+            .previewLayout(PreviewLayout.fixed(width: 400, height: 300))
    }
}
```

![CleanShot 2022-02-16 at 01.36.19@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/db3d8628-e999-baef-21bd-aa2f360ba8a5.png)


# 色の定義

```swift
let topColor = Color(red: 0.94, green: 0.51, blue: 0.64)
let bottomColor = Color(red: 0.95, green: 0.95, blue: 0.50)
```

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

```swift
struct ContentView: View {
    let topColor = Color(red: 0.94, green: 0.51, blue: 0.64)
    let bottomColor = Color(red: 0.95, green: 0.95, blue: 0.50)
    
    var body: some View {
        LinearGradient(
            colors: [topColor, bottomColor],
            startPoint: .top,
            endPoint: .bottom
        )
    }
}
```

![CleanShot 2022-02-16 at 01.39.37@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/a10775a7-74e9-4d90-930c-96c5a4e31969.png)

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

# タイトルの設定

タイトルを追加します。

```swift
VStack(alignment: .leading) {
    Text("開発途中で")
    Text("だいたいプレビュー使わなくなるゾ")
        .offset(x: 20)
}
.font(.title3.bold())
.foregroundColor(titleColor)
```

重要なのは以下の部分です。

```swift
Text("だいたいプレビュー使わなくなるゾ")
    .offset(x: 20)
```

`offset(x:)`を使うことで２行目を少しズラしています。

![CleanShot 2022-02-16 at 02.19.20@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/5f859ebf-e7ab-5433-6519-2e92c07737a9.png)

# ルビをふる

子供の番組なので、ルビを振ります。
本当は`kCTRubyAnnotationAttributeName`を使うのですが、うまくいかないのでVStackで無理やり乗せます

```diff_swift
            VStack(alignment: .leading) {
+                VStack(alignment: .leading) {
+                    Text("かいはつとちゅう").font(.caption2)
+                    Text("開発途中で")
+                }
                Text("だいたいプレビュー使わなくなるゾ")
                    .offset(x: 20)
            }
            .font(.title3.bold())
            .foregroundColor(titleColor)
```

![CleanShot 2022-02-16 at 02.18.51@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/5366ac94-2491-bc6c-d45d-48916365881c.png)

# 重ねる

ZStackを使って文字を重ねます

```swift
struct ContentView: View {
    let topColor = Color(red: 0.94, green: 0.51, blue: 0.64)
    let bottomColor = Color(red: 0.95, green: 0.95, blue: 0.50)
    let titleColor = Color(red: 0.38, green: 0.01, blue: 0.37)
    
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [topColor, bottomColor],
                startPoint: .top,
                endPoint: .bottom
            )
            
            VStack(alignment: .leading) {
                VStack(alignment: .leading) {
                    Text("かいはつとちゅう").font(.caption2)
                    Text("開発途中で")
                }
                Text("だいたいプレビュー使わなくなるゾ")
                    .offset(x: 20)
            }
            .font(.title3.bold())
            .foregroundColor(titleColor)
        }
    }
}
```

![CleanShot 2022-02-16 at 02.08.01@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24979/9dd25f97-9fc6-7691-d2c7-359a0c7610f7.png)

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

いかがでしたか？