ios 如何在UITableViewCell的imageView中将UILabels与SF Symbols和自定义图像对齐?

vyswwuz2  于 2023-08-08  发布在  iOS
关注(0)|答案(1)|浏览(105)

我想实现的是类似于文件应用程序中的列表视图的东西。文档将显示一个小缩略图(如果有)。否则,将显示具有textStyle .callout的SF符号。所有行的标签都应该左对齐。但目前缩略图比SF符号大得多,因此它们会将标签推开。
我强调
textStyle
是因为我的应用支持动态类型,这意味着imageView的帧计算应该基于SF Symbol。
我尝试覆盖layoutSubviews。但不知道怎么算。

文件应用


的数据

我的APP


polhcujo

polhcujo1#

为了最大限度地控制单元格的外观,您应该创建一个自定义单元格。但是,如果你想使用标准的Subtitle单元格,你可以在设置它们时调整图像的大小。
在这个Stack Overflow答案中有一些优秀的图像缩放函数:如何在iOS上调整位图大小
将该答案的扩展添加到项目中。具体来说,为了满足您的需要,我们将使用scaledAspectFit()
因此,假设您有一个Subtitle cell原型,其标识符为“cell”,您的cellForRowAt将看起来像这样:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    
    // however you have your data stored
    let title = "IMG_0001.JPG"
    let subtitle = "Today at 10:15 AM, 2.5 MB"
    let imgName = "IMG_0001"
    
    cell.textLabel?.text = title
    cell.detailTextLabel?.text = subtitle
    
    if let img = UIImage(named: imgName) {
        // default cell image size is 56x56 (points)
        //  so we'll proportionally scale the image,
        //  using screen scale to get the best resolution
        let widthHeight = UIScreen.main.scale * 56
        let scaledImg = img.scaledAspectFit(to: CGSize(width: widthHeight, height: widthHeight))
        cell.imageView?.image = scaledImg
    }
    return cell

}

字符串

编辑

只需要一点研究就可以实现SF符号的使用…
将此函数添加到表视图控制器-它将返回指定点大小的SF符号的UIImage,以指定大小为中心:

private func drawSystemImage(_ sysName: String, at pointSize: CGFloat, centeredIn size: CGSize) -> UIImage? {
    let cfg = UIImage.SymbolConfiguration(pointSize: pointSize)
    guard let img = UIImage(systemName: sysName, withConfiguration: cfg) else { return nil }
    let x = (size.width - img.size.width) * 0.5
    let y = (size.height - img.size.height) * 0.5
    let renderer = UIGraphicsImageRenderer(size: size)
    return renderer.image { context in
        img.draw(in: CGRect(origin: CGPoint(x: x, y: y), size: img.size))
    }
}


然后根据需要更改cellForRowAt函数:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    
    // however you have your data stored
    let title = "IMG_0001.JPG"
    let subtitle = "Today at 10:15 AM, 2.5 MB"
    let imgName = "IMG_0001"
    
    cell.textLabel?.text = title
    cell.detailTextLabel?.text = subtitle

    // defalt image view size
    let wh = UIScreen.main.scale * 56
    let targetSize = CGSize(width: wh, height: wh)

    // for this example, if it's the first row, generate an image from SF Symbol
    if indexPath.row == 0 {
        if let img = drawSystemImage("doc.text", at: UIScreen.main.scale * 24, centeredIn: targetSize) {
            cell.imageView?.image = img
        }
    } else {
        if let img = UIImage(named: imgName) {
            // default cell image size is 56x56 (points)
            //  so we'll proportionally scale the image,
            //  using screen scale to get the best resolution
            let scaledImg = img.scaledAspectFit(to: targetSize)
            cell.imageView?.image = scaledImg
        }
    }
    return cell
    
}


我会让你根据需要调整点的大小(并配置SF符号图像的任何其他属性,如重量,比例,颜色等)。

相关问题