Labelを画像化したい

Question

実現したいこと

ランキングシステムを実装しています。
通常の順位はラベルで表示するのですが1位, 2位, 3位だけ画像に置き換えたいです。

前提

case 0:
imageviewを返す
case 1:
imaegViewを返す
case 2:
imageViewを返す
case 3 or デフォルト:
Labelを返す

発生している問題・エラーメッセージ

ラベルが画像化されないです。

該当のソースコード

override func viewDidLoad() {
        super.viewDidLoad()

// カスタムセル登録
        tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomTableViewCell")
       
}
  // 中身
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

            cell.id.text = "\(indexPath.row+1)"
            
            let indexNumber = indexPath.row
            
            cell.trendTitle.text = display_array[indexPath.row].title
            
            switch indexNumber {
            case 0:
                cell.trendTitle.text = display_array[indexPath.row].title
                let text = "\(indexPath.row+1)"
                let image = UIImage(systemName: "crown")
                let font: UIFont = .systemFont(ofSize: 30)
                let size = CGSize(width: 30, height: 30)
                
                let attachment = NSTextAttachment()
                attachment.image = image
                
                let y = (font.capHeight-size.height).rounded() / 2
                attachment.bounds.origin = CGPoint(x: 0, y: y)
                attachment.bounds.size = size
                
                let imageAttribute = NSAttributedString(attachment: attachment)
                let mutableString = NSMutableAttributedString(string: text)
                mutableString.insert(imageAttribute, at: text.count)
                
                let label = UILabel()
                view.addSubview(label)
                label.textAlignment = .center
                label.frame.size = .init(width: view.bounds.width-20, height: 50)
                label.center = view.center
                label.font = font
                label.attributedText = mutableString

            case 1:
                cell.trendTitle.font = UIFont(name:"NotoSansJP-Bold", size: 18.0)
                
            case 2:
                cell.trendTitle.font = UIFont(name:"NotoSansJP-Bold", size: 18.0)
                
            default:
                print("default")
            }

}

import UIKit

class CustomTableViewCell: UITableViewCell {
    
    @IBOutlet weak var id: UILabel!
    @IBOutlet weak var trendTitle: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

試したこと

・Swift5 UILabelに画像(UIImage)を表示する NSAttributedString NSTextAttachment
https://qiita.com/abouch/items/041f29fff08792f6ba5e

・ SF Symbolsの実装
https://sunny10side.com/implementation-of-sf-symbols/

・Swift 5で進化するNSAttributedStringの扱い方
https://qiita.com/fmtonakai/items/2e685e3c719d7fda7fc7

Labelの画像化が初めてなのでお手柔らかにお願いいたします。

Comments

[hoshi-takanori]

その cell そのものはどうやって作ってるのでしょうか？

[faipaspijfasjf]

xibファイルで作成しています。
（追記しました）

[hoshi-takanori]

xib ファイルを使うなら、ImageView と Label を両方用意しておいて、不要な方を隠すのが分かりやすいかと。
セルは再利用されるので、ImageView を追加したセルを後でラベルで使うって事もあり得ますので。

[faipaspijfasjf]

> ImageView と Label を両方用意しておいて、不要な方を隠すのが分かりやすいかと。

①これは Label の後に imageView を配置するという事でしょうか？？
②それを switch case などで 1, 2, 3の時だけ画像を表示するという流れで合っていますでしょうか？？

[hoshi-takanori]

ImageView と Label を同じ位置に重ねて配置して、不要な方を隠すってことですね。

[faipaspijfasjf]

. ImageView と Label を同じ位置に重ねて配置して、不要な方を隠すってことですね。

ありがとうございます。
昨日実装出来ました。

Answer 1

import UIKit

class CustomTableViewCell: UITableViewCell {
    
    @IBOutlet weak var id: UILabel!
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var subTitle: UILabel!
    @IBOutlet weak var rankingIcon: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

 // 中身
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
// ランキングのアイコン表示（1,2,3位のみ）
            switch indexPath.row {
            case 0:
                cell.id.text = ""
                cell.rankingIcon.image = UIImage(named: "goldCrown")
            case 1:
                cell.id.text = ""
                cell.rankingIcon.image = UIImage(named: "silverCrown")
            case 2:
                cell.id.text = ""
                cell.rankingIcon.image = UIImage(named: "bronzeCrown")
            default:
                cell.id.text = "\(indexPath.row+1)"
                cell.rankingIcon.image = UIImage(named: "")
            }
            return cell
}

Answer 2

こちらのサイトが参考になるかもしれません。
https://swift-ios.keicode.com/ios/how-to-create-uiimage-from-uilabel.php

別途私が作成したサンプルコードも添付しておきます。

import UIKit

class ViewController: UIViewController {
    
    var count = 0
    
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setImage()
    }
    
    func getImage(_ label: UILabel) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0)
        defer {
            UIGraphicsEndImageContext()
        }
        label.drawHierarchy(in: label.bounds, afterScreenUpdates: true)
        return UIGraphicsGetImageFromCurrentImageContext()
    }
    
    func setImage() {
        count += 1
        if count % 2 == 1 {
            let uiLabel = UILabel()
            uiLabel.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
            uiLabel.text = "ラベル"
            
            imageView.image = getImage(uiLabel)
        } else {
            imageView.image = UIImage(systemName: "pencil")
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
            self.setImage()
        })
    }
}

Comments

[faipaspijfasjf]

回答ありがとうございます。

`Cannot find 'imageView' in scope` エラーが出ます。
セルにimageViewは入れていないです。

入れた方がよろしいでしょうか？