Swift -セルに画像とテキストを入れて、表示する方法-

はじめに

今回はTableViewについて学習したので、忘れないようにこの記事に纏めてみました。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Swiftを学習し始めたけどまだTableViewの使い方が分からない人や、Swift初学者でTableViewの使い方を忘れた人に参考になれば幸いです。

使用環境

●　OS：macOS Big Sur 11.3.1
●　Xcode：12.5
●　Swift：5.4

実装手順：Navigation Controller設定

１．Main.storyboardにNavigation Controllerを追加し、画面のタイトルを設定を行う

①左のフォイルメニューからMain.storyboardに移ります。

②XcodeのメニューバーからEditer ＞ Embed in ＞ Navigation Controllerの順に選択する。

③Navigation ControllerのNavigation Barを選択し、Prefers Large Titlesにチェックを入れる。

実装手順：UIパーツ実装

２．View ControllerにUIパーツを追加

完成イメージ

①＋を選択しViewControllerにTableViewを追加する。

②TableViewを追加した様にTableViewCell ＞ View ＞ Label ＞ Imageの順に追加する。

実装手順：コード実装

３．Cocoa Touch ClassでCustomUserCellを作成

①⌘ + Nで新規ファイルでCocoa Touch Classを選択する。

②新規ファイルCocoa Touch ClassをCustomUserCellと入力し作成する。

③CustomUserCellにUIパーツの紐付けを行う。

import UIKit

class CustomUserCell: UITableViewCell {
   @IBOutlet weak var UserView: UIView!
   @IBOutlet weak var UserImage: UIImageView!
   @IBOutlet weak var UserNameLbl: UILabel!
   
   override func awakeFromNib() {
       super.awakeFromNib()
   }

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

４．View Controllerにコードを記述

import UIKit

class ViewController: UIViewController {
   @IBOutlet weak var UserTable: UITableView!
   
   let UserArray = ["正人", "慎二", "舞香"]
   
   override func viewDidLoad() {
       super.viewDidLoad()
       UserTable.delegate = self
       UserTable.dataSource = self
   }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
   func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
       return 125
   }
   
   func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
       /*
       let targetViewController = self.storyboard!.instantiateViewController(withIdentifier: "categorySelect")
           self.present(targetViewController, animated: true, completion: nil)
       */
       //performSegue(withIdentifier: "toNextViewController", sender: nil)
   }
   
   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return UserArray.count
   }
   
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = UserTable.dequeueReusableCell(withIdentifier: "customCell") as! CustomUserCell
       let Users = UserArray[indexPath.row]
       cell.UserImage.image = UIImage(named: Users)
       cell.UserNameLbl.text = Users
       
       return cell
       }
   }

おわりに

最後まで読んで下さった方やそうで無い方もこの記事を読んで頂き有難うございます。
また投稿する機会があると思うので、今後も宜しくお願いします。