iOS SwiftUI-6 Text及跑馬燈設計

1. Text基礎設定
2. Text文字大小讀取

1. Text基礎設定

    Text("PPPPPPPP OOOOOOOOOO IIIIIIIIII UUUUUUUUUU YYYYYYYYYY")
        //縮放最小的大小
        .minimumScaleFactor(0.5)
        //最大兩行
        .lineLimit(2)
        //太常有時會被簡略，變成Appl...，設定成true的時候，不會被簡略
        .allowsTightening(true)
        //多行皆以.center為對齊方式
        .multilineTextAlignment(.center)
        .foregroundColor(Color.white)
        .padding(.leading, 10)
        .padding(.trailing, 10)
   

2. Text文字大小讀取

    //1.繼承String新增方式
    extension String {
        func widthOfString(usingFont font: UIFont) -> CGFloat {
            let fontAttributes = [NSAttributedString.Key.font: font]
            let size = self.size(withAttributes: fontAttributes)
            return size.width
        }
   
        func heightOfString(usingFont font: UIFont) -> CGFloat {
            let fontAttributes = [NSAttributedString.Key.font: font]
            let size = self.size(withAttributes: fontAttributes)
            return size.height
        }
   
        func sizeOfString(usingFont font: UIFont) -> CGSize {
            let fontAttributes = [NSAttributedString.Key.font: font]
            return self.size(withAttributes: fontAttributes)
        }
    }
    2.讀取Text大小方式
    let width: CGFloat = String("1234567890abc")
        .widthOfString(usingFont: UIFont.systemFont(ofSize: 18))
    let height: CGFloat = String("1234567890abc")
        .heightOfString(usingFont: UIFont.systemFont(ofSize: 18))
    let size: CGSize = String("1234567890abc")
        .sizeOfString(usingFont: UIFont.systemFont(ofSize: 18))
   

3. Text跑馬燈

    struct AnimationModel {
        var animation: Int = 0
        var textSize: CGFloat = 0
        var opacity: Double = 1
        var offsetXCurrent: CGFloat = 0
        var offsetXMax: CGFloat = 0
    }
   
    struct MainView: View {
        @State var animationModel = AnimationModel()
        var body: some View {
            return ZStack {
                GeometryReader { geometry in
                    Group {
                        Text("1234567890abcdefghi")
                            .foregroundColor(.red)
                            .font(.system(size: 18))
                            .lineLimit(1)
                            .allowsTightening(true)
                            .background(ListenerView())
                            .onPreferenceChange(ViewSizeKey.self) { _ in
                                animationModel.textSize = CGFloat(String("1234567890abcdefghi").widthOfString(usingFont: UIFont.systemFont(ofSize: 18)))
                                withAnimation(Animation.linear) {
                                    animationModel.offsetXCurrent = ((geometry.size.width)/2)-animationModel.textSize
                                    animationModel.offsetXMax = ((geometry.size.width)/2)-animationModel.textSize
                                }
                            }
                            .offset(x: (animationModel.animation != 0 && animationModel.textSize != 0) ? animationModel.offsetXCurrent : 0 , y: 0)
                            .opacity(animationModel.opacity)
                            .animation(animationModel.animation == 1 ? Animation.linear(duration: 1) : animationModel.animation == 2 ? Animation.linear(duration: 0.1) : nil)
                            .onAnimationDataChange(for: animationModel.offsetXCurrent) {
                                if animationModel.offsetXMax == 0 {
                                    return
                                }
                                if animationModel.offsetXCurrent == 0 {
                                    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+1, execute: {
                                        withAnimation(Animation.default, {
                                            animationModel.offsetXCurrent = animationModel.offsetXMax
                                        })
                                    })
                                } else if animationModel.offsetXCurrent != 0  {
                                    animationModel.animation = 1
                                    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+1, execute: {
                                        animationModel.animation = 2
                                        animationModel.opacity = 0
                                    })
   
                                    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+1.6, execute: {
                                        animationModel.animation = 0
                                        withAnimation(Animation.default, {
                                            animationModel.offsetXCurrent = 0
                                        })
                                        animationModel.opacity = 1
                                    })
                                }
                            }
                            .onAppear {
                                print("onAppear!")
                            }
                            .frame(width: geometry.size.width, alignment: .leading)
                    }.frame(width: geometry.size.width/2, alignment: .leading)
                    .mask (
                        HStack(spacing: 0) {
                            LinearGradient(gradient: Gradient(colors: [Color.black, Color.black]), startPoint: .leading, endPoint: .trailing)
                        }
                    ).frame(width: geometry.size.width/2)
                }
            }
        }
   

最後更新日期：2021/01/15