質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Swift 2

Swift 2は、Apple社が独自に開発を行っている言語「Swift」のアップグレード版です。iOSやOS X、さらにLinuxにも対応可能です。また、throws-catchベースのエラーハンドリングが追加されています。

Q&A

解決済

1回答

4819閲覧

UITableViewCellの大きさをタップ時に広げたい

Y_M

総合スコア265

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Swift 2

Swift 2は、Apple社が独自に開発を行っている言語「Swift」のアップグレード版です。iOSやOS X、さらにLinuxにも対応可能です。また、throws-catchベースのエラーハンドリングが追加されています。

0グッド

0クリップ

投稿2016/10/26 06:44

編集2016/10/26 10:05

###前提・実現したいこと
掲題の通りタップ時に適当な大きさに拡縮したいのですが、思い通りの大きさにはなってくれません。

現在数値で「100」を指定しているため、高さ100のセルになっていますが、
・「名無しさん」「★★★★★」「ここにコメント〜美味しかったです」までの高さをタップする前の高さ
・線を跨ぎ、「ご来店ありが〜お待ちしております」までの高さをタップ後の高さ
として実装したいと思っています。

スクショスクショ2

###該当のソースコード

Swift

1class ViewController: UIViewController, UITableViewDataSource { 2 3 @IBOutlet weak var tableView: UITableView! 4 5 var toggle = true 6 var toggleArray = [true, false, true] 7 var rowHeight: CGFloat = 44.0 8 9 override func viewDidLoad() { 10 super.viewDidLoad() 11 } 12 13 override func viewDidLayoutSubviews() { 14 super.viewDidLayoutSubviews() 15 16 if let cell = tableView.dequeueReusableCellWithIdentifier("Cell") { 17 rowHeight = CGRectGetHeight(cell.frame) 18 print("rowHeight=", rowHeight) 19 } 20 } 21 22 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 23 return 3 24 } 25 26 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 27 let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomCell 28 cell.setText() 29 return cell 30 } 31 32 func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 33 if toggleArray[indexPath.row] == true { 34 if toggle { 35 return rowHeight 36 } else { 37 return UITableViewAutomaticDimension 38 } 39 } else { 40 return rowHeight 41 } 42 } 43 44 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { 45 if toggleArray[indexPath.row] == true { 46 toggle = !toggle 47 tableView.reloadRowsAtIndexPaths(tableView.indexPathsForVisibleRows!, withRowAnimation: UITableViewRowAnimation.Fade) 48 } 49 } 50 51 func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 52 return self.tableView(tableView, heightForRowAtIndexPath: indexPath) 53 } 54 55}

###試したこと
tableView.rowHeight = UITableViewAutomaticDimensionで高さを調節しているのなら
調整後のtableView.rowHeightから線より下のUIの高さを引けばよいのではないかと考えましたが。
そもそもtableView.rowHeightの認識が間違っていたため実装を断念しました。

###補足情報(言語/FW/ツール等のバージョンなど)
Swift2.2
Xcode7.3.1
こちらのサイトを参考にしています。

###追記
スクショスクショ

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuzzball

2016/10/26 07:11

「一番上のセルをタップすると、全てのセルが、全て同じ高さに拡大(縮小)する」という仕様で合ってますか?
fuzzball

2016/10/26 07:22

あー、すみません。読み間違えてました。「一番上のセルをタップすると、一番上のセルが、イイ感じの高さに拡大/高さ100に縮小、のトグルになる」ですかね?
Y_M

2016/10/26 07:28

そうです。1番上のセルをタップすると1番上のセルのみ「拡大/縮小」する感じです。
fuzzball

2016/10/26 07:35

拡大した状態は、右側の画像のようになれば正解なんでしょうか?それとも、現状が右側の画像で、これではダメということなのでしょうか?
Y_M

2016/10/26 07:39

右側の画像は正解になります。畳んだときの大きさが現在だと100固定になっているものを、キレイにしたいということです。わかりにくくて申し訳ないです。
guest

回答1

0

ベストアンサー

Storyboard上のセルを作るときにテキストを一行だけにすれば、その時の高さがtableView.rowHeightに入りますので、閉じているときにその高さを設定してやればいいと思います。

swift

1func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 2 if indexPath.row == 0 { 3 if toggle { 4 return tableView.rowHeight //※デフォルトサイズを返す 5 } else { 6 //tableView.estimatedRowHeight = 100 //※とりあえずコメント 7 //tableView.rowHeight = UITableViewAutomaticDimension //※これはいらない 8 return UITableViewAutomaticDimension //※いい感じのサイズを返す 9 } 10 } else { 11 return tableView.rowHeight //※デフォルトサイズを返す 12 } 13}

セルの高さ

tableView.rowHeightを使うのではなく、下のようにしてセルの高さを保存しておいてもいいかと思います。

swift

1var rowHeight: CGFloat = 44.0 2 3override func viewDidLayoutSubviews() { 4 super.viewDidLayoutSubviews() 5 if let cell = tableView.dequeueReusableCellWithIdentifier("Cell") { 6 rowHeight = CGRectGetHeight(cell.frame) 7 print("rowHeight=", rowHeight) 8 } 9}

estimatedHeightForRowAtIndexPath

同じ値にしたいのでheightForRowAtIndexPathを呼び出しています。

swift

1func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat 2{ 3 return self.tableView(tableView, heightForRowAtIndexPath: indexPath) 4}

色々と試した挙句

これがシンプルで良いという結論に。高さはあくまでおまかせで中身を変更します。
今のままだと下のマージンが広くなってしまいますが、気になるようならマージンの制約値を変えてやればいいと思います。(たぶん)

勝手に色々と追加していますが、

  • labelTop,labelBottomは、それぞれ上ラベル、下ラベル
  • msgTop,msgBottomは、それぞれ上メッセージ、下メッセージ
  • viewBarは下線(区切り線)のUIView
  • toggleは配列にしています

となっています。

swift

1func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 2 3 let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomCell 4 5 //上は常に全文表示 6 cell.labelTop.text = msgTop[indexPath.row] 7 8 //線から下は開いているときだけ 9 if toggle[indexPath.row] { 10 //close 11 cell.labelBottom.text = "" 12 cell.viewBar.hidden = true 13 } else { 14 //open 15 cell.labelBottom.text = msgBottom[indexPath.row] 16 cell.viewBar.hidden = false 17 } 18 19 return cell 20} 21 22func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 23 return UITableViewAutomaticDimension 24} 25 26func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat 27{ 28 return UITableViewAutomaticDimension 29}

投稿2016/10/26 07:57

編集2016/10/27 01:30
fuzzball

総合スコア16731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y_M

2016/10/26 08:09

この方法で試したところ、「名無しさん」「ここにコメント〜美味しかったです」 などを含めすべて隠れてしまいました。
fuzzball

2016/10/26 08:13 編集

rowHeightが0ということでしょうか?Storyboard上のTableViewのRow Heightが0になってますか?
Y_M

2016/10/26 08:15

スクリーンショットを追記しました。
Y_M

2016/10/26 08:19 編集

AutoLayoutが崩れてしまっているかもしれないです。 ※閉じたときに崩れてしまっているようです。
fuzzball

2016/10/26 08:28

tableView.rowHeightを使わない方法を追記しました。
Y_M

2016/10/26 08:33

※スクリーンショット追加しました。 やはりAutoLayoutが崩れているみたいです。 コメントのLabelの高さを可変にしているのがいけないのでしょうか。 ひとまず回答ありがとうございました。
fuzzball

2016/10/26 09:09

estimatedHeightForRowAtIndexPathを実装するとどうなるでしょうか?(回答に追記しました)
Y_M

2016/10/26 09:21

実装した結果をスクリーンショットとして掲載しました。 アコーディオンのようになってくれればそれがベストなんですけどね。
Y_M

2016/10/26 09:22

質問内のソースコードも最新のものに書き換えました。
Y_M

2016/10/26 10:07

だいぶ惜しい感じにはなっています。 あと下の線とラベル(ご来店ありがとう〜)が消えればいい感じにはなりそうです。。。
fuzzball

2016/10/26 10:14 編集

あー、ラベルは上下二段になっているんですね。 ラベルは一つだけだと思っていて、閉じる:一行目だけ表示、開く:全行表示、かと思っていました。 どちらのラベルも行数は可変なんでしょうか? だとすると、真面目に計算するしかないですね。
fuzzball

2016/10/26 12:34

ちょっと思い付いただけですが、「下の線」のY座標を高さにすればいいんじゃないでしょうか?
Y_M

2016/10/27 01:33 編集

>fuzzball様 >どちらのラベルも行数は可変なんでしょうか? どちらのラベルも可変になります。 >「下の線」のY座標を高さにすればいいんじゃないでしょうか? "viewDidLayoutSubviews()"の中でタグからUIViewを指定して 高さを取ろうとしたところ、"signal SIGABRT"になってしまいました。 →自分の書き方が間違っていました。 上のUILabelが小さくなり、バーは消えないですね。。
fuzzball

2016/10/27 01:29

一晩(夢の中で)考え抜いた結論を回答に追記しました。
Y_M

2016/10/27 01:45 編集

ありがとうございます。 × よろしければ"msgTop"などの宣言も拝見できないでしょうか。。。 上記解決しました。
Y_M

2016/10/27 01:53

おぉ。 思っていた動作になりました。 長い間解決にご尽力いただき本当に感謝です。
fuzzball

2016/10/27 02:04

自動計算(UITableViewAutomaticDimension)を試したのは初めてなので、私も勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問