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

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

ただいまの
回答率

90.47%

  • Swift

    7482questions

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

  • Xcode

    4215questions

    Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

  • iOS

    4089questions

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

  • TableView

    123questions

    TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

カスタムセルのAutoLayoutが正しく反映されない

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 498

sssskkkktttt

score 3

 発生している問題

カスタムセル上に配置したUITextFieldにストーリーボード上からAutoLayoutを設定しているのですが思い通りに実装することができません。
イメージ説明
イメージ説明

セル上にUITextFieldとStepperをバランス良く配置したく、まずUITextFieldの方に上の画像のような制約を設定したのですが、実際にビルドをしてみると下の画像のようにセルの領域の左上にぴったりくっついた状態になってしまいます。

イメージ説明

AutoLayoutが正しく反映されていないのか、私の制約の与え方が間違っているのか、解決方法の分かる方ご教授いただければ幸いです。

*補足 ストーリーボードの構成

//optionCell.swift
import UIKit
import GMStepper

@IBDesignable
class optionCell: UITableViewCell {

    @IBOutlet var optionName: UITextField!
    @IBOutlet var optionValue: GMStepper!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • fuzzball

    2018/06/21 09:22 編集

    Storyboardで制約のエラーが出ているようなので、まずエラーを解消して下さい。

    キャンセル

回答 3

+2

カスタムセルの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中に定義されているセルを使った方がわかりやすくて簡単だと個人的には思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

カスタムセル上に配置したUITextFieldにストーリーボード上からAutoLayoutを設定しているのですが

こちらUITextFieldの下にUIViewが配置されている様に思えるのですが、その様な構造になっていますか?※同じ状態を作ろうとしたらそうでないと辻褄が合わない気がしました。

なっているのでしたらそちらのUIViewにも制約を付けてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 08:56

    ご回答ありがとうございます。
    確認してみたところ、UITextFieldの直下にUIViewはありませんでした。
    UIView→UITableView→UITableViewCell
    という構成になっています。

    キャンセル

0

Leading SpaceTop Spaceの値を調整して下さい。
縦方向は、セルの中央に配置したいならCenter Verticallyがいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 09:20

    調整をしてみましたが、改善されずセル内左上にぴったりくっついた状態になってしまいます。

    キャンセル

  • 2018/06/21 09:21

    どのような調整をしたのか書いて下さい。

    キャンセル

  • 2018/06/21 09:23

    修正依頼にも書きましたが、エラーが出ているようなので、まずエラーを解消して下さい。

    キャンセル

  • 2018/06/21 09:41 編集

    制約のエラーを修正しました。こちらはTableView外で起きているものでした。
    セル内のTextFieldに対してLeading Space、Center Verticallyを設定しましたが、変化がありませんでした。

    キャンセル

  • 2018/06/21 09:47 編集

    調整というのはConstant値を変えるということです。
    質問の状態だと、Leading Space = 0、Top Space = 1だと思うので、左上にくっつきます。

    Center Verticallyに変更したのであれば、
    Leading Space = 8(これはお好みで)、Center Vertically = 0 にすればいいと思います。

    キャンセル

  • 2018/06/21 09:51

    Constant値を変更しましたが、変化なしです。
    Leading Space=11, Center Vertically=0にしてありますが、左上にくっついたままです。

    キャンセル

  • 2018/06/21 10:44 編集

    セルに関係するコード/情報を書いて下さい。
    ・xib上のセルのカスタムクラス、セルID
    ・xibのFile's Owner
    ・Storyboard上のセルのカスタムクラス、セルID
    ・ViewControllerでのセル登録のコード(tableView.register(...))
    ・ViewControllerでのセル生成のコード(tableView.dequeue(...))
    ・その他何かあれば

    キャンセル

  • 2018/06/21 10:57

    ・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

    よろしくお願いします。

    キャンセル

  • 2018/06/21 11:10

    今、TextFieldの位置に関する制約は、Leading Space = 11、Center Y = 0 の2つだけでしょうか?

    キャンセル

  • 2018/06/21 11:14

    加えてWidth=126、Height=30の計4つになります。

    キャンセル

  • 2018/06/21 11:25

    それは位置じゃないので‥。
    残念ながらこちらでは症状を再現できませんでした。

    今、TakeOneさんの回答が付きましたが、

    >>xibファイルでカスタムセルを定義してそれを使用するのなら、
    >>StoryboardのOption Table Viewの中に配置しているcustomCellは
    >>使用されていないと思うので削除すべきと思います。

    まず、これを行うことをお勧めします。

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Swift

    7482questions

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

  • Xcode

    4215questions

    Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

  • iOS

    4089questions

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

  • TableView

    123questions

    TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。