【Swift4】TableViewのカスタムセルの高さが変わらない問題の解決法

この記事の概要

UITableViewCellでカスタムセルのために使う.xibファイルを自前で用意したときに、何も設定を加えていない場合はカスタムセルの高さが自動的に変わらない。そこで、カスタムセルの高さに制約を加える方法について、自分なりにまとめた。


[図1] カスタムセルの画面
目次

  • この記事の概要
  • 問題解決の指針
  • 解説①: IBOutletのTableViewを使う方法
  • 解説②: estimatedRowheightとautomaticDimensionを使う方法
  • まとめ

問題解決の指針

TableViewでカスタムセルを使うときに、高さを変えたい時ってありますよね。

例えば、TwitterやインスタグラムのようなSNSはTableViewを使っており、コンテンツの長さや高さによって、 そのセルの高さも変わっている。しかしカスタムセルの高さ変更は、Swiftではなかなか難しく、設定を加えないことでトラブルもよく起こる。

さて、カスタムセルの高さを変えたい時はどうすればいいのだろうか。

カスタムセルの高さを変えたい場合は、tableviewが入ったViewControllerに、このコードを書いてあげると、いいのである。

ポイントとしては、
① @IBOutletのtableViewに、名前をつけてあげること。
②  そのtableviewにestimatedRowHeightと, rowHeightの二つを定義するコードを書いてあげること。

 
  class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
  
    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.estimatedRowHeight = 90
        self.tableView.rowHeight = UITableViewAutomaticDimension
   }
(以下省略)

以下では、それぞれのコードについて解説する。

解説①: IBOutletのTableViewを使う方法

@IBOutletのtableViewの構文はこちら。

 
 @IBOutlet weak var 【tableViewの名前（任意）】: UITableView!
直入力であれば、「weak」は省略しても良い。
weakがつくのは、二画面分割でStoryboardからコードに矢印を引っ張ってきた時。


weakがある時とない時の違い はコチラ→ （現在調査中）

解説②: estimatedRowHeightとautomaticDimensionを使う方法


ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.estimatedRowHeight = 90
        self.tableView.rowHeight = UITableViewAutomaticDimension
     }


tableViewが存在するstoryboardと対応するviewControllerに、コチラの2つのコードを書いてあげればいい。



　　self.tableView.estimatedRowHeight = (任意の数字）





estimatedRowHeightでは、コード上でカスタムセルの高さを指定して上げる事ができる。

この場合だと、カスタムセルの高さを90にしたいので、右辺に90を代入する。　



この時、xibファイルを使っているのであれば、

Storyboard上の高さと、この数字が必ずしも合致していなければならない。






　  self.tableView.rowHeight = UITableViewAutomaticDimension





このコードは必ず書かなければならない。



UITableViewAutomaticDimensionと記述することで、viewDidLoad内の処理が読み込まれた時に、カスタムセルの高さを自動的に決定することが出来るのである。





まとめ





いかがであっただろうか。



まとめとしては、

① tableViewに名前をつける

② estimatedRowHeightとautomaticDimensionを記述する。



この二つを守ることで80％くらいの確率でうまくいく。



しかし、たまにうまくいかないこともあるので、

その時はGoogle先生に質問しよう。















































コメント











コメントを投稿



















このブログの人気の投稿









【Unity】シーンギズモがデフォルトで表示されない時




















イメージ







こんにちは。  先日から Unityを触り始めている私（てぃー）です。   さて、   Unityではデフォルトで表示されている「シーンギズモ」ですが、  新規プロジェクトを立ち上げたところ、表示されていなくて困りました。   ggっても解決策が出てこない...どころか、  シーンギズモっていう単語を使っているページ・解説しているページが出てこない！笑（unity 3dのofficial documentを除く）   そう言う訳でちょっと困りましたので、解決策を簡単にまとめてみました〜。   ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇    　1. シーンギズモってそもそもなんやねん？って話  　2. 解決策  　3. まとめ        　1. シーンギズモってそもそもなんやねん？って話      [図]シーンギズモ    シーンギズモはデフォルトのプロジェクトを立ち上げた時に、画面（画面というよりかはScene）の右上に出てくる図のような物体です。赤色・緑色・青色の三角コーンから成立しています。     シーンギズモはとても便利で、「y」とラベルが貼られた緑色のコーンをクリックすると、現在sceneで製作中のオブジェクトを上面から見ることが出来ます。     こう言う風に、[x],[y],[z]の、3つの軸からsceneを見ることができる優れものなんです。      　2. 発生している現象と解決策     [図]発生している現象     新規プロジェクトを作ろうとした時に、シーンギズモがデフォルトで表示されるようになるはずだ・・・と思いきや、表示されていなくて困りました。    前述したとおり、色々探したんですが解決策が見つからなくて困った・・・。      [図]解決策     で、どうやって解決したかというと。    [scene]バーにある[2D]ボタンを押すことです！    sceneの上部を見ると、デフォルトだと[Shaded]ってなってる場所と、電球やらなんやらのアイコンがある場所のちょうど間に、[2D]ボタンがありますよね！     これがオンになっていると、シーンギズモは出てこないみたいです。      　3. まとめ   でも、なんで2Dモードがオンになってたんだろう・・・と考えていたのですが、     そういえば自分、こ...








続きを読む










【Swift4】argument passed to call that takes no arguments の解決策




















イメージ







 今日、Swiftでじゃんけんアプリを作っていた時に、この「 argument passed to call that takes no argument s 」というエラーが出たのでエラーが出た状況と解決策をまとめていこうと思う。        argument passed to call that takes no arguments        ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇    　1. 実現しようとした事  　2. Argument Passed to call that takes no argumentsとはどんなエラー？　  　3. 解決策      4. まとめ   　1. 実現しようとした事      [図] myJankenViewControllerで発生したエラーの詳細         import  UIKit      class  myJankenViewController: UIViewController  {          var  selectedNumber: Int ( arc4random ( 2 ))                               !   Argument passed to call that takes no arguments         （以下省略）   }      「グー」「チョキ」「パー」の３種類の出目をCPUが出してくれる、そんなじゃんけんアプリを作っていたのだが、   相手のCPUの出目をarc4random関数で指定してあげようと思ったところ、このようなエラーが出てしまった。   　2.  Argument Passed to call that takes no arguments とはどんなエラー？　    日本語訳してみると、「 呼び出すために渡される引数は引数を取りません 」というのが妥当だろうか。 技術用語マシマシの英文翻訳は本当に難しい・・・orz     つ...








続きを読む










【Rails5】SyntaxError: (): mapping values are not allowed エラーの解決法





















 この記事の概要   SyntaxError: (<unknown>): mapping values are not allowed  上記エラーに対応するために調べたところ、.ymlファイルのインデントが原因であることがわかった。   目次    この記事の概要  目次  試そうとしたこと  エラーの分析  ja.ymlを見てみる  解決策  まとめ     試そうとしたこと  Rails5で簡単なTaskアプリケーションを作って学んでいたのだが、 SyntaxError: (<unknown>): mapping values are not allowed  エラーにハマった。    エラーの分析   can not load translations from /Users/*****/Task_App/config/locales/ja.yml: # ): mapping values are not allowed in this context at line 15 column 7   どうやらja.ymlにエラーがあるらしい。 ymlファイルは、エラーメッセージが日本語を出すためのrawファイルであり、 GitHubのrails-|18nリポジトリにあるファイルを適当にダウンロードしたものである。    ja.ymlなので日本語設定である。  en.ymlだと英語設定になる。   ja.ymlファイルを見てみる     （中略） 　  　models:  　　 task: タスク 　  　attributes:  　　 task:           id: ID  　　 name: 名称  　　 description: 詳しい説明  　　 created_at: 登録日時  　　 updated_at: 更新日時   んー？  15行目あたりにエラーがあるらしいが、特に変わったところは見当たらない。  何がおかしいのだろうかと思って色々と検索してみた。    解決策   どうやら、ymlファイルにはスペースの数が決まっているようだ。    一番最初の階層のスペースゼロだとすると、 最初の階層はスペース無し。二番目の階層は半角スペース2つ 三番目の階層は半角スペー...








続きを読む