2017-06-13 66 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