SwiftUIで画像にいろいろ手を加えてみる

以前、SwiftUIでテキストを配置したり色を変更したりしました

今回は画像にいろいろ手を加えるというのをSwiftUIで試してみたいと思います

まずはリソース(画像)を追加します

f:id:kumaskun:20200728231702p:plain — 画像の追加

この画像を表示させるためにはImageの引数に画像のリソース名を指定すれば表示されます

f:id:kumaskun:20200728231908p:plain

少し見にくいかもしれないですが、画像をクリックして見てみてください！

上記はシンプルに画像を表示させていますが、変化を加えるのも可能です

struct IconImageView: View {
    var body: some View {
        Image("Icon")
            .resizable()
            .clipShape(Circle())
    }
}

resizable()で画像サイズをフレームサイズに合わせて、.clipShape(Circle())で画像を円形にします

f:id:kumaskun:20200728233031p:plain

また、枠線と影をつけることができます

struct IconImageView: View {
    var body: some View {
        Image("Icon")
            .resizable()
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.blue, lineWidth: 4))
            .shadow(radius: 10)
    }
}

こうすることで、青色の枠線と影を画像に追加することができました

f:id:kumaskun:20200728233528p:plain

さらにフレームのサイズは変更できるので、画像がはみ出てしまうのもうまく調整できます

struct IconImageView: View {
    var body: some View {
        Image("Icon")
            .resizable()
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.blue, lineWidth: 4))
            .shadow(radius: 10)
            .frame(width: 300, height: 300)
    }
}

frame(width: 300, height: 300)というようにwidthとheightを指定できるので、プレビューを見ながらうまい具合に調節できます

f:id:kumaskun:20200728234206p:plain

ちなみにはみ出してしまった分は.clipped()を使うことにより、切り取ることも可能です

HTML・CSSを触っている感覚に何度か陥りました！

では、画像とテキストの組み合わせはどうするでしょうか？？

SwiftUIのbody propertyは単一のviewしか返さないので複数のviewを扱うためにStackを使います

VStackとHStackはそれぞれ垂直と水平方向、あるいは前後に組み合わせてStackに組み入れグループ化することができます

struct IconImageView: View {
    var body: some View {
        Image("Icon")
                .resizable()
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.blue, lineWidth: 4))
                .shadow(radius: 10)
                .frame(width: 300, height: 300)
            
        Text("Hello World")
            .font(.largeTitle)
            .foregroundColor(Color.red)
    }
}

上記はエラーになるパターンです

ImageとTextという２つのViewがあり、bodyの戻り値がViewのためエラーが発生します

なので、Vstackで囲ってあげれば解消されます

struct IconImageView: View {
    var body: some View {
        VStack {
            Image("Icon")
                .resizable()
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.blue, lineWidth: 4))
                .shadow(radius: 10)
                .frame(width: 300, height: 300)
            
            Text("Hello World")
            .font(.largeTitle)
            .foregroundColor(Color.red)
        }
    }
}