2015-07-10 99 views
2

我想创建可调整大小的ui视图背景。它将根据文字调整大小。我尝试下面的代码:调整uiview的背景图片的大小取决于文本

let capInsetsIncoming = UIEdgeInsets(top: 17, left: 26.5, bottom: 17.5, right: 21) 
self.contentView.backgroundColor = UIColor(patternImage: UIImage(named:"profileBioBackground")!.resizableImageWithCapInsets(capInsetsIncoming)) 

结果:

enter image description here

预计:

enter image description here

这是我的背景图片:

enter image description here

我该如何解决这个问题?

回答

1

我觉得最简单的方法是以UIImageView为背景。还有,你必须拆分原始图像,以便可以用作可调整大小图像。

总之,这里是代码:

class ViewController: UIViewController { 

    @IBOutlet var contentView: UIView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 


     contentView.backgroundColor = nil 

     let leftBackgroundView = UIImageView() 
     let rightBackgroundView = UIImageView() 

     let image = UIImage(named: "profileBioBackground")! 
     let scale = image.scale 
     let size = image.size 
     let leftRect = CGRect(
      x: 0, 
      y: 0, 
      width: size.width/2 * scale, 
      height: size.height * scale 
     ) 
     let rightRect = CGRect(
      x: size.width/2 * scale, 
      y: 0, 
      width: size.width/2 * scale, 
      height: size.height * scale 
     ) 

     leftBackgroundView.image = UIImage(
      CGImage: CGImageCreateWithImageInRect(image.CGImage, leftRect), 
      scale: scale, 
      orientation: .Up 
     )?.resizableImageWithCapInsets(UIEdgeInsets(top: 20, left: 4, bottom: 4, right: 16)) 
     rightBackgroundView.image = UIImage(
      CGImage: CGImageCreateWithImageInRect(image.CGImage, rightRect), 
      scale: scale, 
      orientation: .Up 
     )?.resizableImageWithCapInsets(UIEdgeInsets(top: 20, left: 16, bottom: 4, right: 4)) 

     leftBackgroundView.setTranslatesAutoresizingMaskIntoConstraints(false) 
     rightBackgroundView.setTranslatesAutoresizingMaskIntoConstraints(false) 
     contentView.insertSubview(leftBackgroundView, atIndex: 0) 
     contentView.insertSubview(rightBackgroundView, atIndex: 0) 
     let views = ["left": leftBackgroundView, "right": rightBackgroundView] 
     contentView.addConstraints(
      NSLayoutConstraint.constraintsWithVisualFormat("H:|[left][right(==left)]|", options: nil, metrics: nil, views: views) 
       + NSLayoutConstraint.constraintsWithVisualFormat("V:|[left]|", options: nil, metrics: nil, views: views) 
       + NSLayoutConstraint.constraintsWithVisualFormat("V:|[right]|", options: nil, metrics: nil, views: views) 
     ) 
    } 
} 

和故事板的设置,并将结果:

screenshot