見出し画像

【徒然iOS】気ままにUIKit27〜UITableView XIBファイルを使う〜

M_Kaku堂

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をやる〜〜〜！

前準備

  1. 念の為、バックアップ

  2. 新しいクラス

  3. ビューコントローラの追加

  4. イニシャルビューの変更

をいつも通りやってから本題へ💃

こんな感じかな？

XIBとは、

  • XML Interface Builderの略

  • 部品の構造をXMLで記述したもの

今回、関連する記事

ここで作ったやつが思いっきり関連するからね〜〜〜〜！

ポイント

別のテーブルビューで同じ自作セルを使いたい場合で、セルの中身が複雑になったときは大変
👉

要は、再利用できるファイルを作っておこう

ってことやね！

本題

⒈テーブルビューの部品の準備して、dataSource接続

これはもう〜〜〜
今までに何回もやってる〜〜〜
TableViewを使うときの当たり前な作法って感じだね👀

⒉追加したTableViewをアウトレットで接続

今回はxibTableViewで接続した

⒊自作セルの部品の準備

作成するファイルは、
自作セルの構造を記述するXIBファイルと、自作セルを操作するためのSwiftファイル
てことだから、手順通り、

新規ファイルをクリックして〜〜〜
cocoa touch classをクリックして〜〜

＊Cocoa Touchとは、画面部品を利用するためのアプリケーションフレームワーク👀

手順通りだけど、上から四番目の選択メニューはすでにないみたいだね👀
ちょっと失敗したので、TableViewCellにしてやり直した💦
Createをクリックすると、、、
それらしい感じで追加されたね👀

XIBファイルの中身はXML形式のファイル
👉XCodeではストーリーボードと同じように部品の画像を見ながら編集できる
てことなので、実際に続きをやってみよう👀

⒋セルの中にラベルを3つ追加して、Colorを赤、青に変更

こんな感じかな💦

⒌アシスタントエディタでTableViewCell.swiftを表示

⒍ラベルをアウトレットで接続

こんな感じですかな💦

⒎今回作ったViewControllerクラスにコードを追加してく〜〜〜

ちょっと、今回はコードで変更箇所が無駄に多くなってしまったので、変更後の完成系を、

class TableXIBViewController: UIViewController, UITableViewDataSource {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //自作セルをテーブルビューに登録する。
                let testXib = UINib(nibName:"TableViewCell", bundle:nil)
        xibTableView.register(testXib, forCellReuseIdentifier:"TestCell")
    }
    
    @IBOutlet weak var xibTableView: UITableView!
    
    //データ
     var dataList = ["青山,一塁手","阿部,捕手","加藤,二塁手","神田,三塁手","佐藤,遊撃手","坂田,外野手"]
  
     
     //データを返すメソッド
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //セルを取得する。
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestCell", for:indexPath as IndexPath) as! TableViewCell
        
        //データをカンマで分割する。
        let arr = dataList[indexPath.row].components(separatedBy: ",")
        
        cell.redTablecellLabel?.text = String(indexPath.row)
        cell.blueTablecellLabel?.text = arr[0]
        cell.blackTablecellLabel?.text = arr[1]
        
        return cell
    }
     
     //データの個数を返すメソッド
    func tableView(_ tableView:UITableView, numberOfRowsInSection section:Int) -> Int {
         return dataList.count
     }
}

ちょっと、記事のサンプルコードをベタ貼りしたけど直せないって人は、
前回までの記事でゆっくり何回もやってるから、前回までの記事を参考に直してみてね〜〜〜〜

⒏シミュレータで実行

ちゃんと表示できたね💦

と、今回の記事の内容は以上なんだけど、、、

⒐ブラッシュアップ

⒈シミュレータの実行結果が、黒が字切れしてたりなんで、

並びを中央揃えなんかにして修正

こんな感じで
よろしくなった感🕺

⒉AutoLayout

いつもな感じで制約を追加して
でけた

まとめ

うーん。過去に一回だけやったことがある程度で、はっきり言って、UIKitでの開発の場合
異なる形式のビュー自体をそんなに多く作らない
👉使い回すビュー自体をコピペして、中身のコンテンツだけを変えることが多かった。

完全に忘れてたね💦💦

使いこなせれば便利なんだろうけどね〜〜〜〜〜。

使わない機能まで一度やったら、
未来永劫忘れずに覚えるなんて無理〜〜〜〜！


自分では作らない管理職とかで、

「覚えていて当たり前」

みたいなこと言う人もいるけど、それは、作らない（作れない）人のただの理想であって、そんなひとつひとつの詳細を覚える暇があったら、

や

、

なんかを意識した方がいい。

ここまでのマガジンを読んでればわかると思うけど、
覚えようとしなくても、

よく使う機能とか考え方、コード改修の仕方なんかは
作り続けておけば、いやでも自然と身につく

からね〜〜〜🕺

さて、次回は

で、今回やったXIBファイルの利用方法も織り交ぜた話になるみたいだね〜〜〜

いいなと思ったら応援しよう！