iOS SwiftUI-6 Text及跑馬燈設計


Posted by John on 2021-01-15

  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


#XCode #swift #SwiftUI #軟體設計 #電腦程式 #UI設計 #UI







Related Posts

網路基礎概論-http協定

網路基礎概論-http協定

[JavaScript] ES6 其他好用的新語法

[JavaScript] ES6 其他好用的新語法

用 JavaScript 學習資料結構和演算法:堆疊(Stack)篇

用 JavaScript 學習資料結構和演算法:堆疊(Stack)篇


Comments