ios - 表格单元格视图中的图像在运行时没有适当的大小，当我滚动时会自动改变大小和剪切边界

Posted 2023-02-26

【中文标题】ios - 表格单元格视图中的图像在运行时没有适当的大小，当我滚动时会自动改变大小和剪切边界

【英文标题】：ios - Images in table cell view not having proper size at runtime and self changing size and clipping bounds when I scroll

【发布时间】：2018-04-13 09:37:03

【问题描述】：

当我在 simulator 上运行我的应用程序时，我通过 http 请求加载的图像没有正确的大小和边界剪辑。我希望它们的大小为60x60 的圆形，但它们会随机缩放以适应UITableViewCell，但在我上下滚动后它们保持固定但仍然很大，我不知道是什么原因造成的我知道如何解决它吗，我是ios 的新手。我将在表格单元格中发布带有我的UIImageView 的屏幕截图，其效果与我第一次运行应用程序和我的View Controller 类时一样。

我试图弄乱约束，在UIImageView 上设置固定的宽度和高度约束，但没有结果。 我还尝试从单元格视图中禁用 子视图自动调整大小，但没有结果。

这是效果，这是在我开始滚动之前发生的：

这发生在我上下滚动后，边界上的剪辑恢复正常但大小仍然很大：

这是我的带有单元格图像视图的故事板：

这是我的 ViewController.swift 类：

//
//  ViewController.swift
//  TopDevelopers
//
//  Created by Eduard Valentin on 12/04/2018.
//  Copyright © 2018 Eduard Valentin. All rights reserved.
//

import UIKit
import Alamofire
import Foundation

struct UserInfo 
    var name:String
    var imageURL:String
    var imageView:UIImageView

    init(newName: String, newImageURL:String, newImageView: UIImageView) 
    self.name = newName
    self.imageURL = newImageURL
    self.imageView = newImageView

    


class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource

@IBOutlet weak var tableView: UITableView!

var users:[UserInfo] = []



override func viewDidLoad() 

    super.viewDidLoad()

    tableView.delegate = self
    tableView.dataSource = self

    // GET the data from the stackexchange api

    let param: Parameters = [
        "order": "desc",
        "max" : 10,
        "sort" : "reputation",
        "site" : "***"
    ]

    Alamofire.request("https://api.stackexchange.com/2.2/users", method: .get, parameters: param).responseJSON  (response) -> (Void) in


        if let json = response.result.value 
            // we got a result

            /* I know this is a bit ugly */
            let json1 = json as! [String:AnyObject]
            let usersInfoFromJSON = json1["items"] as! NSArray       // remember to cast it as NSDictionary


            for userInfo in usersInfoFromJSON 

                let userDict = userInfo as! NSDictionary

                Alamofire.request(userDict["profile_image"] as! String).responseData  (response) in
                    if response.error == nil 
                        print(response.result)
                        // Show the downloaded image:
                        if let data = response.data 
                            let imageView = UIImageView()
                            imageView.image = UIImage(data: data)
                            self.users.append(UserInfo(newName: userDict["display_name"] as! String,
                                                       newImageURL: userDict["profile_image"] as! String,newImageView: imageView))
                            self.tableView.reloadData()
                        
                    
                
            
        
    




@available(iOS 2.0, *)
public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    return self.users.count

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat 
    return 100


// Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
// Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)

@available(iOS 2.0, *)
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: "customCell") as! CustomTableViewCell
    cell.cellImageView.image = self.users[indexPath.row].imageView.image
    cell.cellImageView.layer.cornerRadius = (cell.cellImageView.layer.frame.height / 2)
    cell.cellLabel.text = self.users[indexPath.row].name

    return cell


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

编辑 1： 我还尝试将内容模式设置为“缩放以适应”，“方面适合”仍然是相同的结果。

编辑 2： 好的，我通过删除几乎所有内容并重新执行它来解决它，但这次我确实为“建议的约束”设置了选项，我也使用了 xib细胞，现在一切正常，我仍然不知道是什么原因造成的。

【问题讨论】：

您是否尝试过将图像内容模式设置为从情节提要缩放到冷杉。

是的，我试过了，还是一样

为什么要使用自定义单元格？在 UITableView 基本单元格中提供默认的图像视图和标签

我遵循了一个教程，他们使用了自定义单元格

您是否会使用 StackView 放置它们？

【参考方案1】：

设置clipsToBounds属性为true，根据cellImageView的frame而不是cellImageView.layer的frame来设置frame：

cell.cellImageView.clipsToBounds = true 
cell.cellImageView.layer.masksToBounds = true
cell.cellImageView.contentMode = .scaleAspectFit
cell.cellImageView.layer.cornerRadius = cell.cellImageView.frame.height / 2

并尝试在结构中添加UIImage 而不是UIImageView。并在cellForRowAtIndexPath 中使用：

cell.cellImageView.image = self.users[indexPath.row].image

【讨论】：

它在故事板中设置，我在视图控制器中设置为 ，它不会改变任何东西

@EduardValentin，您是否尝试在结构中添加 UIImage 而不是 UIImageView ？

好的，一会儿我会把ti放到github上

【参考方案2】：

在你的情况下不要使用 CustomCell，因为基本的 tableviewcell 提供默认的 UIImageView 和 UILable

用下面的代码更新 cellForRowAt 函数

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIndentifier")
    cell.imageView?.contentMode = .scaleAspectFit
    cell.imageView?.image = self.users[indexPath.row].imageView.image
    cell.imageView?.layer.cornerRadius = cell.imageView?.frame.width / 2
    cell.imageView?.layer.masksToBounds = true
    return cell

【讨论】：

我是这样做的，但图像效果相同

尝试设置cell.imageView?.contentMode = .scaleAspectFit

试过了，没有结果