SwiftUI를 통한 byCliping

이것은 무엇이냐

이전에 썼던 3점 지도자의 생략은 줄을 바꿀 때 문자가 도중에 중단되는 문제가 발생할 수 있다.
https://zenn.dev/rnishimu22001/articles/53ea41172144a7601942
줄 바꿈이 허용되지 않고 3분 뷰어UIKit의 UILabel 중 byClipping의 설정에 사용된 표시도 스위프트 UI에서 조사하고 싶다고 하지 않기 때문에 메모로 작성했다.
before
After


샘플 코드 여기 있습니다.
https://github.com/rnishimu22001/SwiftUIPlayground/blob/master/SwiftUIPlayground/TextByClippingPlayground.swift

첫 번째 예

다음 코드를 적은 경우

struct ParentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Hello!! World")
                .lineLimit(1)
        }
    }
}

struct TextByClipping_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
            .frame(width: 60, height: 20)
	    .background(Color.red)
    }
}

Text의 본래 가로폭과 비교하면 부모View의 폭이 부족하기 때문에 다음과 같다.

이 세 점의 판독기는 생략하고 모 뷰에 Text를 그리도록 수정합니다.

절차.

Text를 원래 크기로 그리기

Text에 func fixedSize(horizontal: Bool, vertical: Bool)를 더하면 모 뷰의 치수 좌우를 받지 않고 자 뷰의 원래 치수로 그릴 수 있습니다.
https://developer.apple.com/documentation/swiftui/text/fixedsize(horizontal:vertical:)

struct ParentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Hello!! World")
                .lineLimit(1)
		// fixedSizeを指定して、Text本来のサイズで描画する
                .fixedSize(horizontal: true, vertical: false)
        }
    }
}

이때 horizontal를 true, vertical로 설정하면 수평 방향에서만 모 뷰의 치수 제한이 사라지기 때문에 Text가 가로로 확장됩니다.

부모 View를 벗어난 부분 캡처

부모의 View를 벗어난 부분을 잘라내다.false 등 모 뷰의 치수를 사용할 수 있습니다.
가져온 모 뷰의 치수GeometryReader에 따라 Text에 치수를 지정합니다.
이때 부모 View를 벗어난 부분func frame(width: CGFloat)이 잘린다.

struct ParentView: View {
    var body: some View {
        // GometryReaderで親View内の描画可能範囲を取得
        GeometryReader { reader in
            Text("Hello!! World")
                .lineLimit(1)
                .fixedSize(horizontal: true, vertical: false)
		// frameでTextのサイズを指定する
                .frame(width: reader.size.width)
		// 指定サイズをはみ出た箇所を削除
                .clipped()
        }
    }
}

잘라낸 후의 표시는 다음과 같다.
중앙 부분이 잘렸기 때문에 Text의 치수에 따라 절단 부분을 변경합니다.

Text를 왼쪽으로 이동

func clipped() 왼쪽 정렬로 수정합니다.
alignment를 func frame(width: CGFloat, alignment: Alignment)로 지정하면 왼쪽 정렬이 됩니다.

struct ParentView: View {
    var body: some View {
        GeometryReader { reader in
            Text("Hello!! World")
                .lineLimit(1)
                .fixedSize(horizontal: true, vertical: false)
		// alignmentを指定して、左寄せを基準にする
                .frame(width: reader.size.width, alignment: .leading)
                .clipped()
        }
    }
}

Text 크기에 따라 가운데 또는 왼쪽 정렬을 선택합니다.

.leading에서 Text의 치수에 따라 왼쪽의 여백을 동적으로 조정합니다.
https://developer.apple.com/documentation/swiftui/view/alignmentguide(_:computevalue:)-7g4ky
이 방법func alignmentGuide(_ g: HorizontalAlignment, computeValue: @escaping (ViewDimensions) -> CGFloat)에서 자신의 크기를 얻을 수 있습니다.
모 뷰와 Text의 치수를 비교하고, Text의 크기가 크면 왼쪽 가장자리를 계산하고, 크기가 작으면 가운데에 배치합니다.
이때 가장자리 값의 양과 음 값을 주의하십시오.

struct ParentView: View {
    var body: some View {
        GeometryReader { reader in
            Text("Hello!!")
                .lineLimit(1)
                .fixedSize(horizontal: true, vertical: false)
		// clipされる前のサイズからalignmentを計算する
                .alignmentGuide(.leading, computeValue: { dimension in
                    // 親ViewとTextの横幅の差分をとる
                    let difference = reader.size.width - dimension.width
                    if difference > 0 {
                        // 親Viewの方が大きい場合中央寄せ
			// マイナスに注意
                        return -(difference / 2)
                    } else {
                        // Textの方が大きい場合左寄せ
                        return 0
                    }
                })
                .frame(width: reader.size.width, alignment: .leading)
                .clipped()
        }
    }
}

결과 Text 길이에 따라 중앙 및 왼쪽 정렬이 동적으로 변경됩니다.👏
초과 시 좌측
중앙을 벗어나지 않음