Labelを画像化したい

実現したいこと

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

前提

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

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

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

該当のソースコード

Swift
1
2override func viewDidLoad() {
3        super.viewDidLoad()
4
5// カスタムセル登録
6        tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomTableViewCell")
7       
8}
9  // 中身
10    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
11
12            cell.id.text = "\(indexPath.row+1)"
13            
14            let indexNumber = indexPath.row
15            
16            cell.trendTitle.text = display_array[indexPath.row].title
17            
18            switch indexNumber {
19            case 0:
20                cell.trendTitle.text = display_array[indexPath.row].title
21                let text = "\(indexPath.row+1)"
22                let image = UIImage(systemName: "crown")
23                let font: UIFont = .systemFont(ofSize: 30)
24                let size = CGSize(width: 30, height: 30)
25                
26                let attachment = NSTextAttachment()
27                attachment.image = image
28                
29                let y = (font.capHeight-size.height).rounded() / 2
30                attachment.bounds.origin = CGPoint(x: 0, y: y)
31                attachment.bounds.size = size
32                
33                let imageAttribute = NSAttributedString(attachment: attachment)
34                let mutableString = NSMutableAttributedString(string: text)
35                mutableString.insert(imageAttribute, at: text.count)
36                
37                let label = UILabel()
38                view.addSubview(label)
39                label.textAlignment = .center
40                label.frame.size = .init(width: view.bounds.width-20, height: 50)
41                label.center = view.center
42                label.font = font
43                label.attributedText = mutableString
44
45            case 1:
46                cell.trendTitle.font = UIFont(name:"NotoSansJP-Bold", size: 18.0)
47                
48            case 2:
49                cell.trendTitle.font = UIFont(name:"NotoSansJP-Bold", size: 18.0)
50                
51            default:
52                print("default")
53            }
54
55}

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の画像化が初めてなのでお手柔らかにお願いいたします。

hoshi-takanori

2023/02/09 06:39

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

退会済みユーザー

2023/02/09 09:48

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

hoshi-takanori

2023/02/09 10:12

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

退会済みユーザー

2023/02/10 07:45

> ImageView と Label を両方用意しておいて、不要な方を隠すのが分かりやすいかと。 ①これは Label の後に imageView を配置するという事でしょうか？？ ②それを switch case などで 1, 2, 3の時だけ画像を表示するという流れで合っていますでしょうか？？

hoshi-takanori

2023/02/12 06:49

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

退会済みユーザー

2023/02/12 07:06

. ImageView と Label を同じ位置に重ねて配置して、不要な方を隠すってことですね。ありがとうございます。昨日実装出来ました。

行動規範の内容に同意します

回答2件

ベストアンサー

Swift
1import UIKit
2
3class CustomTableViewCell: UITableViewCell {
4    
5    @IBOutlet weak var id: UILabel!
6    @IBOutlet weak var title: UILabel!
7    @IBOutlet weak var subTitle: UILabel!
8    @IBOutlet weak var rankingIcon: UIImageView!
9    
10    override func awakeFromNib() {
11        super.awakeFromNib()
12        // Initialization code
13    }
14
15    override func setSelected(_ selected: Bool, animated: Bool) {
16        super.setSelected(selected, animated: animated)
17    }
18}
19

Swift
1 // 中身
2    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
3        
4// ランキングのアイコン表示（1,2,3位のみ）
5            switch indexPath.row {
6            case 0:
7                cell.id.text = ""
8                cell.rankingIcon.image = UIImage(named: "goldCrown")
9            case 1:
10                cell.id.text = ""
11                cell.rankingIcon.image = UIImage(named: "silverCrown")
12            case 2:
13                cell.id.text = ""
14                cell.rankingIcon.image = UIImage(named: "bronzeCrown")
15            default:
16                cell.id.text = "\(indexPath.row+1)"
17                cell.rankingIcon.image = UIImage(named: "")
18            }
19            return cell
20}

投稿2023/02/12 07:09

退会済みユーザー

総合スコア0

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

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

Swift
1import UIKit
2
3class ViewController: UIViewController {
4    
5    var count = 0
6    
7    @IBOutlet weak var imageView: UIImageView!
8    
9    override func viewDidLoad() {
10        super.viewDidLoad()
11        
12        setImage()
13    }
14    
15    func getImage(_ label: UILabel) -> UIImage? {
16        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0)
17        defer {
18            UIGraphicsEndImageContext()
19        }
20        label.drawHierarchy(in: label.bounds, afterScreenUpdates: true)
21        return UIGraphicsGetImageFromCurrentImageContext()
22    }
23    
24    func setImage() {
25        count += 1
26        if count % 2 == 1 {
27            let uiLabel = UILabel()
28            uiLabel.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
29            uiLabel.text = "ラベル"
30            
31            imageView.image = getImage(uiLabel)
32        } else {
33            imageView.image = UIImage(systemName: "pencil")
34        }
35        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
36            self.setImage()
37        })
38    }
39}