UILabelを省略表示、「続きを読む」を押して全文表示にする方法

Question

UILabelを省略表示、「続きを読む」を押して全文表示にする方法

ここに質問の内容を詳しく書いてください。

UITableViewCell内のUILabelを省略表示にして、「続きを読む」を押すと全文表示にする方法がわかりません。
インスタグラム等で使用されているようにラベルを全文表示にすると、それに合わせてセルも伸長するよう作成したいです。
ご回答頂けますと幸いです。

試したこと

teratail等質問サイトを検索致しましたが、解決しませんでした。

補足情報（FW/ツールのバージョンなど）

Swift4.1、Xcode10.0
iOSアプリ作成説明](a12cf173ce699c421a2724b472d88137.jpeg)](79601bd2b3b9a7471f4c6f45447ad3ea.jpeg)

Answer 1

これはどちらかというとCellの高さを変更するものです
オーソドックスな手段としては

１．tableViewの高さをUITableViewAutomaticDimmensionsにする
2.続きを読むをタップしたら、AutoLayoutの値を文字がすべて見えるように変更する
3.tableView.beginUpdates()
tableView.endUpdates()

その他の細かい議論
・「続きを読む」の出現条件
UILabelの高さがいくらになるか計算して、一定の長さ以上だったら出すという仕組みにします
・「続きを読む」が同じ行に存在している件
同じ行にあるのは若干面倒ですが、AttributeStringで一部の色だけ変えることが可能です、おそらくInstagramの場合はラベルと同じパーツです
続きを読むではなく、ラベルをタップしても開きますからね
・Instagramのcellの高さが変わるスピードが速い件
デフォルトだともっとゆっくりです。ひょっとしたら別の仕組みを使ってるかもしれません。

Comments

[D2110]

ご回答ありがとうございます。
ViewController内でtableView.rowHeight = UITableViewAutomaticDimensionと設定した状態で、
UIButtonをTableViewCellにActionで接続して{}内にラベルを全文表示させるようにしたところ、ラベルの内容を全文表示させることができました。
しかし、下段のセルにかぶってしまいCellが伸長しませんでした。
tableView.beginUpdates()とtableView.endUpdates()を使用していないからでしょうか？
ご教授いただけると幸いです。

[D2110]

@IBAction func allCommentButton(_ sender: Any) {
//表示可能最大行数を指定
commentLabel.numberOfLines = 0
//contentsのサイズに合わせてobjectのサイズを変える
commentLabel.sizeToFit()
}
これを追加しています。。。

[kosanai]

ラベル、またはラベルの入ったViewはCell(containerView)に対してBottomのAutoLayout設定されていますか？
突っ張り棒のイメージです
（もしAutoLayout上でエラー＝赤くなるのであれば、BottomのRelationをGrater Than or Equalにしてください）
例
https://qiita.com/usagimaru/items/68bcdb2d7dcf7ae9e96a

それができたら次はLabelにAutoLayoutで高さを指定します
Labelのself-sizingより高さ指定の方が強いので、高さの値をコードで調整すればCellの高さが変わります（NSConstraintLayoutを変更する）

[D2110]

ありがとうございます！
セルの高さが伸長するようになりました。
ただ、ボタンを押した段階では、ラベルが下のセルにかぶってしまいます。スクロールして戻ってくるとセルが伸長するようになっています。
tableView.rowHeight = UITableViewAutomaticDimension
はviewDidLoad()内に入っています。
修正点、わかりますでしょうか？

[kosanai]

cellの高さを更新した際にアップデートしなければなりません
アニメーションが必要な場合は
tableView.beginUpdates()
tableView.endUpdates()

最近のバージョンで少し挙動が変わったようなので注意してください
https://qiita.com/KikurageChan/items/71d4e1e84d039d1e2f5a

アニメーションしなくていいなら単純にreloadData、reloadRows、reloadSectionsでも可能です

[D2110]

丁寧な説明をありがとうございます。
更新するためにUITableViewCellにallCommentButtonをoutlet接続しなおし、ViewController上で
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// セルを取得してデータを設定する
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! PostTableViewCell
cell.setPostData(postArray[indexPath.row])
// セル内のボタンのアクションをソースコードで設定する
cell.allCommentButton.addTarget(self, action:#selector(handleAllCommentButton(_:forEvent:)), for: .touchUpInside)
return cell
}
@objc func handleAllCommentButton(_ sender: UIButton, forEvent event: UIEvent) {
// タップされたセルのインデックスを求める
let touch = event.allTouches?.first
let point = touch!.location(in: self.tableView)
let indexPath = tableView.indexPathForRow(at: point)
//commentLabelの設定を行う
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath!) as! PostTableViewCell
cell.commentLabel.numberOfLines = 0//表示可能最大行数を指定
cell.commentLabel.sizeToFit()//contentsのサイズに合わせてobjectのサイズを変える
self.tableView.reloadData()
}
と設定しましたが、コメント全文表示されなくなってしまいました、、、(エラーはないです、)
コードが間違っているのでしょうか？ご教授頂けますと助かります。

[kosanai]

let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath!) as! PostTableViewCell

これは違います
dequeueReusableCellは、cellの生成 or 再利用です
現在のcellを取得するにはcellForRow(at:indexPath)です

理想を言えば、indexPath毎の開閉状態をViewControllerに配列として持つのが良いと思います
そうすれば、reloadDataで、cellForRowAtIndexPathが再び呼ばれるので、そこで開閉状態を指定して return cellをすればよくなります
（cellの中に状態を持ちたくなりますが、避けるべきです。OSがcellを使いまわしてしまうため、同一を保証できないからです）

あと、前に書いた気がしますがsizeToFitはAutoLayoutを切った場合なので注意が必要です（意図してやってるなら問題ありません）

ところで、こういう複雑なViewを作る際にハマった場合は、積極的に簡易なコードを別途作ってみることをオススメします。問題の切り分けと理解に有効です。私も1個のアプリを作るまでに十個以上の実験用アプリができてしまいます。

[D2110]

ありがとうございます！
修正できました！
とてもたすかりました！！

[kosanai]

よかったです。
ちなみに前提を壊してしまいますが、cellの伸縮は制御が難しいので、一覧画面で完結せずに詳細画面を用意してしまうのも一つの手です（そういうアプリのほうが実は一般的だと思います。有名アプリは熟練者が作ってるので再現するのが大変です）