UIImageView的大小大于在Table View中设置的框架

Question

I have a tableview, which has a header of profileView.

lazy var tableView : UITableView = {
    let tv = UITableView()
    tv.delegate = self
    tv.translatesAutoresizingMaskIntoConstraints = false
    tv.tableHeaderView = self.profileView
    tv.dataSource = self
    tv.backgroundColor = .clear
    tv.register(ReviewTableViewCell.self, forCellReuseIdentifier: ReviewTableViewCell.reuseIdentifier)
    tv.separatorStyle = .none
    return tv
}()

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

Inside the profileView/tableview header I have an image named avatarImage.

var avatarImage:UIImageView = {
    let iv = UIImageView()
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.backgroundColor = .blue
    iv.layer.cornerRadius = 10.0
    iv.layer.borderColor = UIColor.white.cgColor
    iv.layer.borderWidth = 3.0
    iv.contentMode = UIViewContentMode.scaleAspectFit
    return iv
}()

override func viewWillLayoutSubviews() {
    setupViews()
    setupProfileView()

    if let imageURL = selectedStylist?.imageUrl {
        avatarImage.loadImageUsingCacheWithUrlString(imageURL)
    }
}

I give the avatarImage a frame

func setupViews() {

    view.addSubview(tableView)
    NSLayoutConstraint.activate([

        tableView.topAnchor.constraint(equalTo: self.view.topAnchor),
        tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        tableView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
        tableView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
    ])

    profileView.addSubview(avatarImage)

    avatarImage.frame = CGRect(origin: CGPoint(x: view.frame.width/2 - 80/2 ,
                                               y: yPositionOfAvatarImage),
                               size: CGSize(width: 80,
                                            height: 80))
}

This is the extension used to load the image from the url to the imageView

let imageCache = NSCache<NSString, UIImage>()

extension UIImageView {

func loadImageUsingCacheWithUrlString(_ urlString: String) {

    self.image = nil

    //check cache for image first
    if let cachedImage = imageCache.object(forKey: urlString as NSString){
        self.image = cachedImage
        return
    }

    //otherwise fire off a new download
    guard let url = URL(string: urlString) else {
        return
    }
    URLSession.shared.dataTask(with: url) {
        data, response, error in

        //download hit an error so lets return out
        if error != nil {

            return
        }
        DispatchQueue.main.async(execute: {
            if let downloadedImage = UIImage(data: data!) {
                imageCache.setObject(downloadedImage, forKey: urlString as NSString)
                self.image = downloadedImage
            }
        })
        }.resume()
   }

}

Instead of the image being 80x80 and fitting inside avatarImage, the avatarImage seems to fill the screen and, I believe, be the size of the image fetched rather than the size of the imageView. If the image fetched is 1024*680, the size of the imageView will be 1024*680 rather than 80*80.

Answer 1

I give the avatarImage a frame

But this line:

iv.translatesAutoresizingMaskIntoConstraints = false

means "Ignore the frame I give this view! Use constraints instead." Well, using constraints the rule is that by default an image view is the size of its image.