SwiftUIでViewに枠線、角丸を適用する

# はじめに

SwiftUIでImageやTextに枠線や角丸を適用する方法を書きます。
UIKitで言う所のUIImageViewやUIButtonに枠線や角丸を適用する方法のSwiftUI版です。

# 環境について


|    Mac OS    | Xcode   |
|:------:|:--:|
|        10.15 Beta       |  Xcode 11.0 beta 3 |
|        macOS Monterey (12.0 Beta)       |  Xcode 13.0 |

# 画像を表示する

Imageを配置して画像([地球](https://ja.wikipedia.org/wiki/%E5%9C%B0%E7%90%83#/media/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:The_Earth_seen_from_Apollo_17.jpg))を読み込みます。

(参考画像の URL: https://ja.wikipedia.org/wiki/%E5%9C%B0%E7%90%83)

実行すると画像が表示されます。
Assets.xcassetsには`earth_image`でセットします。

```swift:ContentView.swift
import SwiftUI

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 に設定する
            .frame(width: 200, height: 200)
    }
}
```

<img width="150" alt="スクリーンショット 2019-07-21 19.22.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/d1a19451-4752-1eee-6520-ae6b7041f158.png">


# 枠線

枠線を適用します。ここでは枠線の色を赤にします。

```swift:ContentView.swift
import SwiftUI

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで描画する
            .border(Color.red, width: 10)
    }
}
```

<img width="150" alt="スクリーンショット 2019-07-21 19.20.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/5f895576-b909-6826-efdf-b99d1fa64657.png">


# 角丸

次に角丸を適用します。

## Xcode 13.0

2021/10/13 現在 
`.border(Color.red, width: 10, cornerRadius: 30)`が使えなくなってましたので、次のように書きます。
エラー内容: Extra argument 'cornerRadius' in call
(@koogawa さんのご指摘により修正)

```swift:ContentView.swift

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color.red, lineWidth: 10)
            )
    }
}
```

## Xcode 11.0 (最新版だとエラーになります)

```swift:ContentView.swift

struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .border(Color.red, width: 10, cornerRadius: 30)
    }
}
```

<img width="150" alt="スクリーンショット 2019-07-21 19.24.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/507f85f5-05a9-8022-cbfc-80b7ef3567c1.png">


角丸が適用されました。この状態では画像の上に枠線が描画されているように見えます。
角丸に合わせて画像にも枠線を描画させるとします。

## Xcode 13.0

```swift:ContentView.swift
struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで30px分の角丸にして描画する
            .overlay(
                RoundedRectangle(cornerRadius: 30)
                    .stroke(Color.red, lineWidth: 10)
            )
            // Imageに対して角丸を描画する
            .cornerRadius(30)
    }
}
```

## Xcode 11.0 (最新版だとエラーになります)

```swift:ContentView.swift
struct ContentView : View {
    var body: some View {
        // String型でイメージファイルを指定する
        Image("earth_image")
            // リサイズを宣言する
            .resizable()
            // 幅 200, 高さ 200 で描画する
            .frame(width: 200, height: 200)
            // 赤色の枠線を10pxで描画する
            .border(Color.red, width: 10, cornerRadius: 30)
            // Imageに対して角丸を描画する
            .cornerRadius(30)
    }
}
```

<img width="150" alt="スクリーンショット 2019-07-21 19.33.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/865a70a9-eab9-591c-42cc-a89b87810149.png">


これで画像が角丸付きの線に対応して角丸になりました。

今回はImageを例に枠線、角丸を適用しましたが、Textでも同様の処理で実装できます。