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

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

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

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

Q&A

1回答

4259閲覧

【iOS,Swift】UITextViewで文字がはみでる

Kesth

総合スコア83

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

0グッド

0クリップ

投稿2015/10/18 09:52

編集2022/01/12 10:55

首記の件ですが、UITextViewでUITextViewのHeightを入力された文字のHeightが
上回ってしまうと、以下の画像のような形でUITextViewからはみ出て文字が
表示されてしまいます。

イメージ説明

これを防ぐにはどうすればいいでしょうか?
ただ、UITextVIewのHeightを入力された文字に合わせて無限に引き延ばすのは
マズイので、ある一定の高さ以上になったらUITextViewのHeigthを固定し
文字をUITextView内でスクロールさせて表示させるという
方法で実装したいです。

何卒ご教授のほどよろしくお願いします。

※追記

ソースコードを追記します。
完成イメージとしては、SNSのコメント投稿画面のイメージです。

Swift

1class ViewController:UIViewController,UITextViewDelegate,UITableViewDelegate, UITableViewDataSource{ 2 3 var commentTableView = UITableView(frame: CGRectZero, style: .Grouped) 4 //コメント全体のContainer 5 var commentAreaContainer = UIView() 6 //入力欄 7 var commentInput = UITextView() 8 9 10 override func viewDidLoad() { 11 super.viewDidLoad() 12 13 commentTableView = UITableView() 14 commentTableView.translatesAutoresizingMaskIntoConstraints = false 15 self.view.addSubview(commentTableView) 16 17 commentAreaContainer.translatesAutoresizingMaskIntoConstraints = false 18 self.view.addSubview(commentAreaContainer) 19 20 commentInput.font = UIFont(name: "Helvetica Neue", size: 13.5) 21 commentInput.contentInset = UIEdgeInsetsMake(5,0,0,0) 22 commentInput.layoutManager.allowsNonContiguousLayout = false 23 commentInput.layer.cornerRadius = 2.0 24 commentInput.autoresizesSubviews = true 25 commentInput.translatesAutoresizingMaskIntoConstraints = false 26 commentInput.delegate = self 27 commentAreaContainer.addSubview(commentInput) 28 29 //Autolayoutを適用 30 setupConstaraints() 31 } 32 33 //input欄の高さが80まではinputの高さをtextに合わせて伸ばす 34 func textViewDidChange(textView: UITextView) { 35 let maxHeight: CGFloat = 80.0 36 if commentInput.frame.size.height < maxHeight { 37 let size: CGSize = commentInput.sizeThatFits(commentInput.frame.size) 38 //input欄の高さを合わせる 39 commentInput.frame.size.height = size.height 40 } 41 42 43 func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool { 44 textView.scrollRangeToVisible(textView.selectedRange) 45 return true 46 } 47 48 func setUpConstraints(){ 49 50 self.view.addConstraints([ 51 52 NSLayoutConstraint( 53 item: self.commentTableView, 54 attribute: .Top, 55 relatedBy: .Equal, 56 toItem: self.view, 57 attribute: .Top, 58 multiplier: 1.0, 59 constant: 0 60 ), 61 62 NSLayoutConstraint( 63 item: self.commentTableView, 64 attribute: .Right, 65 relatedBy: .Equal, 66 toItem: self.view, 67 attribute: .Right, 68 multiplier: 1.0, 69 constant: 0 70 ), 71 72 NSLayoutConstraint( 73 item: self.commentTableView, 74 attribute: .Left, 75 relatedBy: .Equal, 76 toItem: self.view, 77 attribute: .Left, 78 multiplier: 1.0, 79 constant: 0 80 ), 81 82 NSLayoutConstraint( 83 item: self.commentTableView, 84 attribute: .Bottom, 85 relatedBy: .Equal, 86 toItem: self.commentAreaContainer, 87 attribute: .Bottom, 88 multiplier: 1.0, 89 constant: -40 90 ) 91 ]) 92 93 94 self.view.addConstraints([ 95 96 NSLayoutConstraint( 97 item: self.commentAreaContainer, 98 attribute: .Left, 99 relatedBy: .Equal, 100 toItem: self.view, 101 attribute: .Left, 102 multiplier: 1.0, 103 constant: 0 104 ), 105 106 NSLayoutConstraint( 107 item: self.commentAreaContainer, 108 attribute: .Right, 109 relatedBy: .Equal, 110 toItem: self.view, 111 attribute: .Right, 112 multiplier: 1.0, 113 constant: 0 114 ), 115 116 NSLayoutConstraint( 117 item: self.commentAreaContainer, 118 attribute: .Bottom, 119 relatedBy: .Equal, 120 toItem: self.view, 121 attribute: .Bottom, 122 multiplier: 1.0, 123 constant: 0 124 ) 125 ]) 126 127 self.view.addConstraints([ 128 129 NSLayoutConstraint( 130 item: self.commentInput, 131 attribute: .Top, 132 relatedBy: .Equal, 133 toItem: self.commentAreaContainer, 134 attribute: .Top, 135 multiplier: 1.0, 136 constant: 5 137 ), 138 139 NSLayoutConstraint( 140 item: self.commentInput, 141 attribute: .Bottom, 142 relatedBy: .Equal, 143 toItem: self.commentAreaContainer, 144 attribute: .Bottom, 145 multiplier: 1.0, 146 constant: -5 147 ), 148 149 NSLayoutConstraint( 150 item: self.commentInput, 151 attribute: .Left, 152 relatedBy: .Equal, 153 toItem: self.commentAreaContainer, 154 attribute: .Left, 155 multiplier: 1.0, 156 constant: 6 157 ), 158 159 NSLayoutConstraint( 160 item: self.commentInput, 161 attribute: .Right, 162 relatedBy: .Equal, 163 toItem: self.commentAreaContainer, 164 attribute: .Right, 165 multiplier: 1.0, 166 constant: -6 167 ), 168 169 NSLayoutConstraint( 170 item: self.commentInput, 171 attribute: .Height, 172 relatedBy: .Equal, 173 toItem: nil, 174 attribute: .Height, 175 multiplier: 1.0, 176 constant: 32 177 ) 178 179 ]) 180 } 181 182 } 183 184

イメージ説明

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

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

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

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

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

fuzzball

2015/10/19 03:43 編集

通常であれば、勝手にスクロールして、はみ出たテキストは表示されなくなるはずですが。UITextViewの生成方法や設定などを記載して下さい。
Kesth

2015/10/20 10:27

ソースコードを追記しました。ご確認をお願いいたします。
guest

回答1

0

Constraintがおかしいようです。

↓を削除。

swift

1 NSLayoutConstraint( 2 item: self.commentInput, 3 attribute: .Bottom, 4 relatedBy: .Equal, 5 toItem: self.commentAreaContainer, 6 attribute: .Bottom, 7 multiplier: 1.0, 8 constant: -5 9 )

で、↓を追加。

swift

1 NSLayoutConstraint( 2 item: self.commentAreaContainer, 3 attribute: .Top, 4 relatedBy: .Equal, 5 toItem: self.view, 6 attribute: .Top, 7 multiplier: 1.0, 8 constant: 0 9 )

投稿2015/10/21 03:03

fuzzball

総合スコア16731

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

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

Kesth

2015/10/21 05:35

コメントありがとうございます。 いただいたコードを試した所、添付のSSのようになってしまいました。
fuzzball

2015/10/21 05:57

「なってしまいました」と言われても、どういう画面になれば正しいのか私には分かりませんので、アドバイスのしようがありません。ところで、文字がハミ出るのは直ったのでしょうか?
Kesth

2015/10/22 06:05

失礼しました、言葉足らずでした。 実装したい画面としましては、添付のSSのグレーの部分の高さがTextViewの高さに応じて変動するようにしたいです。(FacebookやInstagramなどのコメント欄の挙動のイメージです) また文字がはみ出る現象ですが、また変わらずはみ出してしまいます。
fuzzball

2015/10/22 16:16 編集

FacebookもInstagramも使ってないので分かりません。 文字を入力する前と、入力した後(TextViewが伸びた後)の画面を作成して追加して下さい。 また、グレーにしているコードが書かれていないようですが、「グレーの部分」というのはcommentAreaContainerのことでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問