(Z,H,V)StackとSpacerでごにょごにょした件

# この記事について
SwiftUIで
UIを作成する際にあるUIパーツのleadingと揃えて15間隔を開けるときどうやるんだろう？と考えた際
色々試してみたまだ理解がたりてないところがありますが一旦記事にしてみた感じです。

# Storyboardで表現する場合
imageのLeading, Bottomに揃えて15間隔を開ける感じで表現できます。
<img width="674" alt="スクリーンショット 2019-08-30 18.50.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/5534c741-033a-ef58-ae39-6b473774e44c.png">

#SwiftUIで表現する場合

**Align Leading to: icon Equals: 15**
**Align Bottom  to: icon Equals: 15**
をSwiftUIで表現してみた際の重要箇所については以下になります。

**Align Leading to: icon Equals: 15**
`ZStack(alignment: .leading)`
`padding([.leading], 15)`
**Align Bottom  to: icon Equals: 15**
`VStack { }`
`Spacer()`
`.padding([.bottom], 15)`

```swift
import SwiftUI

struct SampleView: View {
    var body: some View {
        ZStack(alignment: .leading){
            Image("icon")
                .resizable()
            VStack {
                Spacer()
                Text("giiiita,25")
                    .foregroundColor(Color.white)
                    .padding([.leading, .bottom], 15)
            }
        }.frame(width: 352, height: 368)
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}

```

![スクリーンショット 2019-08-30 18.54.57（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/cc462d30-838e-cdfe-e929-801403999405.png)

## ZStackのalignmentを指定しないで表現する方法

こちらの場合
**Align Leading to: icon Equals: 15**をZStack(alignment: .leading)に変わり表現しているのは以下になります

`HStack { }`
`Spacer()`
`.padding([.leading], 15)`

```swift
import SwiftUI

struct SampleView: View {
    var body: some View {
        ZStack {
            Image("icon")
                .resizable()
            HStack {
                VStack {
                    Spacer()
                    Text("giiiita,25")
                        .foregroundColor(Color.white)
                        .padding([.leading, .bottom], 15)
                }
                Spacer()
            }
        }.frame(width: 352, height: 368)
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}
```
##テキストの長さが増えた場合どうなる？

```swift:before
Text("giiiita,25")
```

```swift:after
Text("giiiita,25xxxxxxxxxxxxxx")
```

改行が入っている。。。
![スクリーンショット 2019-08-30 19.31.29（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/0890ffe8-d67f-0843-7a88-2c104ad538e6.png)

HStack, VStackに色を付けてみた
HStack: 青
VStack: 赤

![スクリーンショット 2019-08-30 19.52.10（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/5cd31f29-6ce9-d4a2-2a2b-bfbe9357de3f.png)

HStack内のSpacerが効いてる分VStackの表示領域が赤のframe内になってそう

## 改行が入らないようにするには？
**VStack, HStackの順にする**

```swift
struct SampleView: View {
    var body: some View {
        ZStack {
            Image("icon")
                .resizable()
            VStack {
                Spacer()
                HStack {
                    Text("giiiita,25xxxxxxxxxxxxxx")
                        .foregroundColor(Color.white)
                        .padding([.leading, .bottom], 15)
                    Spacer()
                }.background(Color.blue)
            }.background(Color.red)            
        }.frame(width: 352, height: 368)
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}
```

![スクリーンショット 2019-08-30 19.56.54（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/72bf5d42-33ec-f924-272b-4bfdec675df8.png)

HStack: 青
VStack: 赤

![スクリーンショット 2019-08-30 19.57.58（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/a850cca2-0cff-c8fb-753f-8939e1ae3fef.png)

## 文字の長さに対応し縦に揃えたい場合は？

文字の長さに対応した際TextはHStackの中に含まれておりました。

```swift
HStack {
   Text("giiiita,25xxxxxxxxxxxxxx")
}
```

この場合単純にTextを増やしてもHStackのため縦に揃えることはできません

```swift
HStack {
   Text("giiiita,25xxxxxxxxxxxxxx")
   Text("giiiita,25xxxxxxxxxxxxxx")
}
```

この場合は一番最初のZ,VStackの組み合わせを使用してみると良さそう

```swift
import SwiftUI

struct SampleView: View {
    var body: some View {
        ZStack(alignment: .leading){
            Image("icon")
                .resizable()
            VStack (alignment: .leading){
                Spacer()
                Group {
                    Text("giiiita,25")
                    Text("giiiita,25xxxxxxxxxxxxxx")
                }
                    .foregroundColor(Color.white)
                    .padding([.leading, .bottom], 15)
            }
        }.frame(width: 352, height: 368)
    }
}

struct SampleView_Previews: PreviewProvider {
    static var previews: some View {
        SampleView()
    }
}
```

![スクリーンショット 2019-08-30 20.54.44（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75593/92e89db8-dc03-3b70-7287-b7c0af3e6640.png)