返回 导航

Swift

hangge.com

Swift - 设置UIView的背景图片（平铺、拉伸）

作者：hangge | 2018-06-08 08:16
    有时我们需要将 UIView 视图的背景设置为一个自定义的图片，而依据图片显示效果（平铺、还是拉伸）的不同又有不同的实现方式，下面通过样例分别进行演示。

1，平铺图片

（1）这种实现起来最简单，只需使用 backgroundColor 属性来设置背景图片即可，效果如下：
  • 图片始终按照其实际尺寸显示。
  • 当图片尺寸大于视图时也不会缩小。
  • 当图片尺寸小于视图时会自动平铺，填满整个视图区域。
         

（2）样例代码
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //设置当前视图背景
        self.view.backgroundColor = UIColor(patternImage: UIImage(named:"bg1.jpg")!)
    }
}

2，拉伸图片

（1）这种方式是通过改变 layer 层的 contents 来实现的，效果是不管是小图还是大图，都会自动缩放成视图大小，从而完全显示。
          

（2）样例代码 
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //设置当前视图背景
        self.view.layer.contents = UIImage(named:"bg1.jpg")?.cgImage
    }
}


3，等比缩放图片

当图片比例和视图比例不一致时，如果想要图片能填满整个视图区域，且比例又不会失真变形。有如下两种方法：
         

（1）一种是在当前视图中插入一个 imageView，然后使用 imageView 来显示图片。 
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建一个用于显示背景图片的imageView
        let backgroundImage = UIImageView(frame: UIScreen.main.bounds)
        backgroundImage.image = UIImage(named: "bg1.jpg")
        backgroundImage.contentMode = .scaleAspectFill //等比缩放填充（图片可能有部分显示不全）
        
        //将背景图片imageView插入到当前视图中
        self.view.insertSubview(backgroundImage, at: 0)
    }
}

（2）另一种是不借助 imageView，而是将原始图片先裁剪成指定尺寸或比例后，再设置为背景。
这里我对 UIImage 做了扩展，增加缩放和裁剪方法，具体可以参考我以前的这两篇文章：
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //计算视图比例
        let ratio = UIScreen.main.bounds.width / UIScreen.main.bounds.height
        //根据比例裁剪出背景图
        let image = UIImage(named:"bg1.jpg")?.crop(ratio: ratio)
        
        //设置当前视图背景
        self.view.layer.contents = image?.cgImage
    }
}
评论

全部评论（0）

回到顶部