contentMode (scaleAspectFill) on UIImageView - Swift

Question

UIImageView의 contentMode (scaleAspectFill)을 설명하는 작은 예제를 만들려고합니다.

모든 코드가 있으며 스토리 보드가 사용되지 않습니다. 이것을 설명하는 데 도움이 될 많은 예제를 확인했습니다. 하지만, 내 요구 사항에 맞는 것을 찾지 못했습니다.

아래의 전체 코드를 찾으십시오.

class ImageViewController: UIViewController { 

    let marginSpacing = CGFloat(10) 

    lazy var imageView1: UIImageView = { 
     let view = UIImageView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var imageView2: UIImageView = { 
     let view = UIImageView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var imageView3: UIImageView = { 
     let view = UIImageView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var imageView4: UIImageView = { 
     let view = UIImageView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var imageView5: UIImageView = { 
     let view = UIImageView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var contentView: UIView = { 
     let view = UIView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    lazy var scrollView: UIScrollView = { 
     let view = UIScrollView() 
     view.translatesAutoresizingMaskIntoConstraints = false 
     return view 
    }() 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     self.title = "Image Auto-Scale" 
     // Do any additional setup after loading the view. 
     setupImageView() 
    } 

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


    /* 
    // MARK: - Navigation 

    // In a storyboard-based application, you will often want to do a little preparation before navigation 
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 
     // Get the new view controller using segue.destinationViewController. 
     // Pass the selected object to the new view controller. 
    } 
    */ 

    fileprivate func setupImageView() { 

     updateImageViews() 
     colorImageViews() 
     addImageViews() 
     setupImageConstraints() 
    } 

    fileprivate func updateImageViews() { 

     self.navigationItem.setRightBarButton(UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(tappedBackButton)), animated: true) 

     imageView1.image = #imageLiteral(resourceName: "Sample") 
     imageView1.contentMode = .scaleAspectFill 

     imageView2.image = #imageLiteral(resourceName: "Sample") 
     imageView2.contentMode = .scaleAspectFill 

     imageView3.image = #imageLiteral(resourceName: "Sample") 
     imageView3.contentMode = .scaleAspectFill 

     imageView4.image = #imageLiteral(resourceName: "Sample") 
     imageView4.contentMode = .scaleAspectFill 

     imageView5.image = #imageLiteral(resourceName: "Sample") 
     imageView5.contentMode = .scaleAspectFill 

    } 

    fileprivate func colorImageViews() { 

     contentView.backgroundColor = UIColor.white 
    } 

    fileprivate func addImageViews() { 

     contentView.addSubview(imageView1) 
     contentView.addSubview(imageView2) 
     contentView.addSubview(imageView3) 
     contentView.addSubview(imageView4) 
     contentView.addSubview(imageView5) 
     scrollView.addSubview(contentView) 
     view.addSubview(scrollView) 
    } 

    fileprivate func setupImageConstraints() { 

     if #available(iOS 11, *) { 

      NSLayoutConstraint.activate([scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), 
             scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)]) 
     } else { 

      NSLayoutConstraint.activate([scrollView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor), 
             scrollView.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor)]) 
     } 

     NSLayoutConstraint.activate([scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor), 
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor), 
            scrollView.widthAnchor.constraint(equalTo: view.widthAnchor), 
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor), 
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor), 
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor), 
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor), 
            contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor), 
            contentView.trailingAnchor.constraint(equalTo: view.trailingAnchor), 
            contentView.heightAnchor.constraint(equalToConstant: 1000), 
            imageView1.topAnchor.constraint(equalTo: contentView.topAnchor, constant: marginSpacing), 
            imageView1.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.5, constant: 0), 
            imageView1.heightAnchor.constraint(equalTo: imageView1.widthAnchor, multiplier: 3.0/4.0, constant: 0), 
            imageView1.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor), 
            imageView2.topAnchor.constraint(equalTo: imageView1.bottomAnchor, constant: marginSpacing), 
            imageView2.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.75, constant: 0), 
            imageView2.heightAnchor.constraint(equalTo: imageView2.widthAnchor, multiplier: 2.0/3.0, constant: 0), 
            imageView2.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor), 
            imageView3.topAnchor.constraint(equalTo: imageView2.bottomAnchor, constant: marginSpacing), 
            imageView3.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.6, constant: 0), 
            imageView3.heightAnchor.constraint(equalTo: imageView3.widthAnchor, multiplier: 1.0/1.0, constant: 0), 
            imageView3.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor), 
            imageView4.topAnchor.constraint(equalTo: imageView3.bottomAnchor, constant: marginSpacing), 
            imageView4.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.4, constant: 0), 
            imageView4.heightAnchor.constraint(equalTo: imageView4.widthAnchor, multiplier: 1.0/3.0, constant: 0), 
            imageView4.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor), 
            imageView5.topAnchor.constraint(equalTo: imageView4.bottomAnchor, constant: marginSpacing), 
            imageView5.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.5, constant: 0), 
            imageView5.heightAnchor.constraint(equalTo: imageView5.widthAnchor, multiplier: 3.0/4.0, constant: 0), 
            imageView5.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor)]) 
    } 

    @objc func tappedBackButton (sender: UIBarButtonItem!) { 
     self.dismiss(animated: true, completion: nil); 
    } 

} 

이 scaleAspectFill가 사용될 때 화상이 잘릴 수 있음을 보여주는 다른 종횡비 5 개의 화상을 표시 할 수 있지만이 찌그러거나 연신 않는다.

이상한 점은 뷰 계층 구조를 디버깅 할 때 사용했던 가로 세로 비율로 이미지를 가질 수 있다는 것입니다.하지만 시뮬레이터에서 얻을 수있는 것은 다른 것입니다.

참고 : 내 자산에서 직접 사용 했으므로 원하는 임의의 이미지를 사용하십시오.

이상한 행동을 보여주는 스크린 샷을 찾아보세요.

내가 놓친 있나요?

Answer 1

당신은 모든 UIImageView의이을 설정하려면 :

imageView.clipsToBounds = true 

그렇지 않으면 이미지가 이미지 뷰의 프레임을 넘어 렌더링됩니다. 스토리 보드를 사용 될 경우

, 당신은 속성 관리자에서을 확인할 수 있습니다 :