Q&A
Storyboardで制約のエラーが出ているようなので、まずエラーを解消して下さい。
発生している問題
カスタムセル上に配置したUITextFieldにストーリーボード上からAutoLayoutを設定しているのですが思い通りに実装することができません。
セル上にUITextFieldとStepperをバランス良く配置したく、まずUITextFieldの方に上の画像のような制約を設定したのですが、実際にビルドをしてみると下の画像のようにセルの領域の左上にぴったりくっついた状態になってしまいます。
AutoLayoutが正しく反映されていないのか、私の制約の与え方が間違っているのか、解決方法の分かる方ご教授いただければ幸いです。
*補足 ストーリーボードの構成
Swift
1//optionCell.swift 2import UIKit 3import GMStepper 4 5@IBDesignable 6class optionCell: UITableViewCell { 7 8 @IBOutlet var optionName: UITextField! 9 @IBOutlet var optionValue: GMStepper! 10 11 override func awakeFromNib() { 12 super.awakeFromNib() 13 // Initialization code 14 } 15 16 override func setSelected(_ selected: Bool, animated: Bool) { 17 super.setSelected(selected, animated: animated) 18 19 // Configure the view for the selected state 20 } 21}
>セル上にUITextFieldとStepperをバランス良く配置したく
と言うことは、StackViewを使えばいいのでは？そもそも最終的に具体的にそれらをどう配置したいのかわかりませんけど。
回答3件
0
カスタムセルのAutoLayoutがいくらやっても効かず、中のUI部品がどうしてもセルの左上に配置されてしまう初心者失敗例として私が最近見かけたのは、カスタムセルのクラスをContent Viewに対して設定しているケースです。
Content Viewにカスタムセルのクラス(=UITableViewCellのサブクラス)を誤って設定してしまうと、セルの直下にUI部品を直接配置してしまうことになるため、AutoLayoutが一切効かなくなるようです。
Content Viewは、カスタムセルのクラスを設定せず、デフォルトのUIViewのまま使用する必要があります。
念のため、この点を確認してみて下さい。
それと、ついでにアドバイスすると、xibファイルでカスタムセルを定義してそれを使用するのなら、StoryboardのOption Table Viewの中に配置しているcustomCellは使用されていないと思うので削除すべきと思います。xibファイルに定義したカスタムセルを使うように作ったのに、誤ってStoryboardのTable View中に定義されているセルを調整していた初心者もおり、自分で自分を混乱させる元になると思います。そもそも初心者ならxibファイルでカスタムセルを定義するよりもStoryboardのTable View中に定義されているセルを使った方がわかりやすくて簡単だと個人的には思います。
投稿2018/06/21 02:19
総合スコア6299
自分はこれが原因でAutoLayoutが効いていませんでした。
質問者ではないですが助かりました。ありがとうございました。
私も同じ現象でした。
ありがとうございました！
ベーシックな質問ですみませんが、Content viewのクラスというのはどこから確認すれば良いのでしょう？今、オンライン講座で勉強していて同じ問題に当たっているのですが、Table view cellのスタイルはCutomにするよう指示があったのですが、それとは別物でしょうか。
Table view cellのスタイルをCustomにする話とは別です。カスタムセルを作るなら、当然そこはCustomにする必要があります。_Kentarouさんの回答に貼り付けられているスクリーンショットを借りて説明すると、左側のUI部品ツリー表示でCustom Cellというセルの中にContent Viewと書かれているUI部品があります。そこにカスタムセルのクラスを設定してはいけない(このUI部品はデフォルトのUIViewのまま使用しなければならない)ということです。
どうもありがとうございます。Content Viewにカスタムクラスを設定していました。ここを直したところ、きちんと動作するようになりました。
0
Leading SpaceとTop Spaceの値を調整して下さい。
縦方向は、セルの中央に配置したいならCenter Verticallyがいいと思います。
投稿2018/06/21 00:09
総合スコア16731
調整をしてみましたが、改善されずセル内左上にぴったりくっついた状態になってしまいます。
どのような調整をしたのか書いて下さい。
修正依頼にも書きましたが、エラーが出ているようなので、まずエラーを解消して下さい。
制約のエラーを修正しました。こちらはTableView外で起きているものでした。
セル内のTextFieldに対してLeading Space、Center Verticallyを設定しましたが、変化がありませんでした。
調整というのはConstant値を変えるということです。
質問の状態だと、Leading Space = 0、Top Space = 1だと思うので、左上にくっつきます。
Center Verticallyに変更したのであれば、
Leading Space = 8（これはお好みで）、Center Vertically = 0 にすればいいと思います。
Constant値を変更しましたが、変化なしです。
Leading Space=11, Center Vertically=0にしてありますが、左上にくっついたままです。
セルに関係するコード/情報を書いて下さい。
・xib上のセルのカスタムクラス、セルID
・xibのFile's Owner
・Storyboard上のセルのカスタムクラス、セルID
・ViewControllerでのセル登録のコード（tableView.register(...)）
・ViewControllerでのセル生成のコード（tableView.dequeue(...)）
・その他何かあれば
・xib上のセルのカスタムクラス、セルID
セルのカスタムクラスはoptionCellです。ソースコードを追記しました。
セルのIdentifierはcustomCellです。
・xibのFile's Owner
File's Ownerのクラスは指定していません。
・Storyboard上のセルのカスタムクラス、セルID
カスタムクラスとしてoptionCellを、IdentifierはcustomCellを指定しています。
・ViewControllerでのセル登録のコード（tableView.register(...)）
optionTableView.register(UINib(nibName: "optionCell", bundle: nil), forCellReuseIdentifier: "customCell")
・ViewControllerでのセル生成のコード（tableView.dequeue(...)）
let cell = optionTableView.dequeueReusableCell(withIdentifier: "customCell") as! optionCell
よろしくお願いします。
今、TextFieldの位置に関する制約は、Leading Space = 11、Center Y = 0 の2つだけでしょうか？
加えてWidth=126、Height=30の計4つになります。
それは位置じゃないので‥。
残念ながらこちらでは症状を再現できませんでした。
今、TakeOneさんの回答が付きましたが、
>>xibファイルでカスタムセルを定義してそれを使用するのなら、
>>StoryboardのOption Table Viewの中に配置しているcustomCellは
>>使用されていないと思うので削除すべきと思います。
まず、これを行うことをお勧めします。
0
カスタムセル上に配置したUITextFieldにストーリーボード上からAutoLayoutを設定しているのですが
こちらUITextFieldの下にUIViewが配置されている様に思えるのですが、その様な構造になっていますか？※同じ状態を作ろうとしたらそうでないと辻褄が合わない気がしました。
なっているのでしたらそちらのUIViewにも制約を付けてください。
投稿2018/06/20 21:40
総合スコア8490
ご回答ありがとうございます。
確認してみたところ、UITextFieldの直下にUIViewはありませんでした。
UIView→UITableView→UITableViewCell
という構成になっています。
あなたの回答
tips
プレビュー
