在帶有 clipsToBounds 的 UIView 中添加為子視圖的 UIImageView 不起作用

Question

我有一個 UIView，其中添加了 UIImageView 作為子視圖， UIImageView 是重復的紋理。 UIView 的寬度和高度是正確的，但是圖像超出了尺寸。 我添加了 ClipsToBounds，但它根本沒有剪裁圖像。 是否有特定的順序或者我做錯了什么，圖像沒有被剪輯在它的父視圖中？

let rectangleView = UIView(frame: CGRect(x: x, y: y, width: width, height: height))
rectangleView.isUserInteractionEnabled = false

if let texturesUrl = layout.Url, let url = texturesUrl.isValidURL() ? URL(string: texturesUrl) : URL(string: String(format: AppManager.shared.baseTexturesUrl, texturesUrl)) {
     let widthLimit = scale * CGFloat(layout.Width ?? 0)
     let heightLimit = scale * CGFloat(layout.Height ?? 0)
     let widthStep = scale * CGFloat(layout.TileWidth ?? layout.Width ?? 0)
     let heightStep = scale * CGFloat(layout.TileHeight ?? layout.Height ?? 0)

     var locY = CGFloat(0)
     let size = CGSize(width: widthStep, height: heightStep)

     if widthLimit > 0, heightLimit > 0 {
          while locY < heightLimit {
              var locX = CGFloat(0)
                  while locX < widthLimit {
                      let imageView = UIImageView()
                      rectangleView.addSubview(imageView)
                      imageView.contentMode = .scaleAspectFill
                      imageView.translatesAutoresizingMaskIntoConstraints = false
                      imageView.clipsToBounds = true
                      imageView.isUserInteractionEnabled = false
                      imageView.anchor(top: rectangleView.topAnchor, leading: rectangleView.leadingAnchor, bottom: nil, trailing: nil, padding: UIEdgeInsets(top: locY, left: locX, bottom: 0, right: 0), size: size)
                      imageView.setImage(with: url, size: size)
                      locX += widthStep
                  }
                  locY += heightStep
              }
          }
     }

Answer 1

你不需要添加這么多的圖像視圖，只需將其用作重復背景即可：

rectangleView.backgroundColor = UIColor(patternImage: myImage)

請參閱UIColor(patternImage:)的文檔。

Answer 2

您可以使用CAReplicatorLayer更有效地做到這一點。

這是一個簡單的例子：

class TileExampleViewController: UIViewController {
    
    let tiledView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tiledView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tiledView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            tiledView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            tiledView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            tiledView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            tiledView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
        ])
        
    }
    
    override func viewDidLayoutSubviews() {
        // we want to do this here, when we know the
        //  size / frame of the tiledView
        
        // make sure we can load the image
        guard let tileImage = UIImage(named: "tileSquare") else { return }
        
        // let's just pick 80 x 80 for the tile size
        let tileSize: CGSize = CGSize(width: 80.0, height: 80.0)

        // create a "horizontal" replicator layer
        let hReplicatorLayer = CAReplicatorLayer()
        hReplicatorLayer.frame.size = tiledView.frame.size
        hReplicatorLayer.masksToBounds = true
        
        // create a "vertical" replicator layer
        let vReplicatorLayer = CAReplicatorLayer()
        vReplicatorLayer.frame.size = tiledView.frame.size
        vReplicatorLayer.masksToBounds = true
        
        // create a layer to hold the image
        let imageLayer = CALayer()
        imageLayer.contents = tileImage.cgImage
        imageLayer.frame.size = tileSize
        
        // add the imageLayer to the horizontal replicator layer
        hReplicatorLayer.addSublayer(imageLayer)
        
        // add the horizontal replicator layer to the vertical replicator layer
        vReplicatorLayer.addSublayer(hReplicatorLayer)

        // how many "tiles" do we need to fill the width
        let hCount = tiledView.frame.width / tileSize.width
        hReplicatorLayer.instanceCount = Int(ceil(hCount))
        
        // Shift each image instance right by tileSize width
        hReplicatorLayer.instanceTransform = CATransform3DMakeTranslation(
            tileSize.width, 0, 0
        )
        
        // how many "rows" do we need to fill the height
        let vCount = tiledView.frame.height / tileSize.height
        vReplicatorLayer.instanceCount = Int(ceil(vCount))
        
        // shift each "row" down by tileSize height
        vReplicatorLayer.instanceTransform = CATransform3DMakeTranslation(
            0, tileSize.height, 0
        )

        // add the vertical replicator layer as a sublayer
        tiledView.layer.addSublayer(vReplicatorLayer)

    }
    
}

我使用了這個平鋪圖像：

我們通過let tileSize: CGSize = CGSize(width: 80.0, height: 80.0)得到這個結果：

let tileSize: CGSize = CGSize(width: 120.0, height: 160.0) ：

let tileSize: CGSize = CGSize(width: 40.0, height: 40.0) ：