2017-06-13 60 views
0

我使用Swift 3創建一個iOS界面,其中某些UIView包含(其中包括)UILabel s根據它們在屏幕上的位置放大和縮小。我的第一個方法是創建一個舒適的大尺寸(比如100x100)並填充視圖,然後根據需要使用CGAffineTransform(scaleX:y:)進行縮放,但是我注意到標籤中文本的縮小比例並不優雅,而且文本變得像素化並且在小尺度下接近不可讀。作爲比較(參見下面的示例),直接更改字體大小會得到更好的結果,但是我的視圖中的結構有些複雜,並且不得不根據某個大小因素重新繪製所有內容,這將是一件麻煩事。有沒有更好更平滑的方法來解決這個問題?縮小UILabels的質量

下面是我創建的一個示例項目,用於說明問題以及模擬器中的輸出(與iPhone本身相同),縮小視圖位於左側(紅色),更改的字體大小是右側(綠色)。

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 

     for i in 1...10 { 
      let f = CGFloat(1.0)/CGFloat(i) 
      let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 50)) 
      view1.backgroundColor = UIColor.red 
      let label1 = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 50)) 
      label1.text = "\(100/i)%" 
      label1.font = UIFont(name: "Verdana", size: 24.0) 
      label1.textAlignment = .right 
      view1.addSubview(label1) 
      view1.transform = CGAffineTransform(scaleX: f, y: f) 
      view1.center = CGPoint(x: 160 - 75.0 * f, y: CGFloat(60 * i) + 25.0 * f) 
      self.view.addSubview(view1) 

      let view2 = UIView(frame: CGRect(x: CGFloat(170), y: CGFloat(60 * i), width: 150 * f, height: 50 * f)) 
      view2.backgroundColor = UIColor.green 
      let label2 = UILabel(frame: CGRect(x: 0, y: 0, width: 150 * f, height: 50 * f)) 
      label2.text = "\(100/i)%" 
      label2.font = UIFont(name: "Verdana", size: 24.0 * f) 
      view2.addSubview(label2) 
      self.view.addSubview(view2) 

     } 

    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 


} 

downscaling the view vs. changing the font size

+0

其中是自動佈局? –

+0

在這個例子中,我沒有使用任何自動佈局,只有手寫代碼 – David

+0

您是否需要將邊界框縮放到特定的大小?或者字體?你可以使用'.adjustsFontSizeToFitWidth = true'並讓它自動縮放字體嗎? – DonMag

回答

1

可能一個答案 - 但不是真的適合評論,所以...

試試這個 - 它創造的黃色第三屆「欄」 - 背景視圖,使用.adjustsFontSizeToFitWidth。字體大小將根據包含標籤的視圖的大小自動調整。

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 

    for i in 1...10 { 
     let f = CGFloat(1.0)/CGFloat(i) 
     let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 50)) 
     view1.backgroundColor = UIColor.red 
     let label1 = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 50)) 
     label1.text = "\(100/i)%" 
     label1.font = UIFont(name: "Verdana", size: 24.0) 
     label1.textAlignment = .right 
     view1.addSubview(label1) 
     view1.transform = CGAffineTransform(scaleX: f, y: f) 
     view1.center = CGPoint(x: 160 - 75.0 * f, y: CGFloat(60 * i) + 25.0 * f) 
     self.view.addSubview(view1) 

     let view2 = UIView(frame: CGRect(x: CGFloat(170), y: CGFloat(60 * i), width: 150 * f, height: 50 * f)) 
     view2.backgroundColor = UIColor.green 
     let label2 = UILabel(frame: CGRect(x: 0, y: 0, width: 150 * f, height: 50 * f)) 
     label2.text = "\(100/i)%" 
     label2.font = UIFont(name: "Verdana", size: 24.0 * f) 
     view2.addSubview(label2) 
     self.view.addSubview(view2) 

     let view3 = UIView(frame: CGRect(x: CGFloat(270), y: CGFloat(60 * i), width: 150 * f, height: 50 * f)) 
     view3.backgroundColor = UIColor.yellow 
     let label3 = UILabel(frame: view3.bounds) 
     label3.text = "\(100/i)%" 
     label3.font = UIFont(name: "Verdana", size: 24.0) 
     label3.adjustsFontSizeToFitWidth = true 
     label3.minimumScaleFactor = 0.05 
     label3.numberOfLines = 0 
     // we want the label to resize with the view, if the view frame changes 
     label3.autoresizingMask = [.flexibleWidth, .flexibleHeight] 
     view3.autoresizesSubviews = true 
     view3.addSubview(label3) 
     self.view.addSubview(view3) 

    } 
} 
+0

這絕對是一個改進,謝謝!唯一的一點是文本的大小和外框的大小之間的比率會發生變化,因爲文本的大小受到框架邊界的限制,但實際上並沒有「縮放」。所以我想我只需要將我的'UILabel'封裝在緊湊的'UIView'中就可以使用這種技術。在我的應用程序中,我有幾段文字都必須根據外觀尺寸一起縮放,我需要一些中間層 – David

+0

我能夠在保持高質量的同時重現幾乎完全原始的結果,不用手工改變字體大小,通過使用這種技術並將'UILabel'封裝在一箇中介'UIView'中,然後我需要調整它的高度(字體大小* 1.25)以解釋文本週圍的空間。可能有一個更好/更簡單的方法來做到這一點,但至少這個工作,看起來不錯。 – David

+0

@大衛 - 有(幾乎)總是不止一種做事的方式......很高興你得到了你想要的結果。 – DonMag