テックキャンプでswiftのマニュアルを読みながら学習を進めています。
いよいよinterface builder（インターフェイスビルダー）を使う時がやってきました。
しかし煮詰まってきてどうにも意味がわからなくなってきたので、アウトプットしつつ自分の備忘録になっています。
XcodeのInterface Builderの画面構成
画面左側のプロジェクトファイル一覧からMain.storyboardファイルを開くとinterface builderが表示される。interface builderはスマホ上の見た目を表示していて、見た目を見ながらボタンを配置などが出来るようになる。
画面のボタンなど主要部分をまとめるとこのように理解している。
Sceneはビューコントローラとビューから構成される。ビューというのは文字通りViewだったり、Labelだったり、Imageだったりする。
この画面のうえにビュー（ボタンとかラベルとか）を乗せていく。ビューコントローラーとビューをあわせて画面（Scene）と呼ぶ。
画面＝Scene、遷移＝Segueと呼ぶ。
ところでテックキャンプのカリキュラムには目次番号がふられていないので、質問するときにどこのどこと伝えるのが難しい。目次をつけてほしい。
Labelとソースコードの接続が出来ない
オブジェクトライブラリーからビューコントローラー上に配置したLabel。このままだとソースコードと結びついてなくて使えないので、ソースコードと関連付けという作業をする必要がある。
interface builderのViewController上にLabelを持ってきた。それとソースコードを関連付けしようとしたらエラーが出た。
Could not insert new outlet
connection:Could not find a class named ViewController in the language Swift
意味がわからない。
どうも自分が開いてたファイル（ViewController.swift）が２つあって。画面左右で同じファイルを開いてるはずなのに書かれてる内容が違う。それでLabelを右側のソースに接続しようとして、このエラーが出てた。
これをあれこれ正してちゃんとしたViewController.swiftに接続したらうまくいった。
しかしどうしてファイルが2つ出来てしまったのか、どっちが正しいファイルなのか、なぜ駄目な方のファイルが開いたのか未だにわからない。テックキャンプの正式な受講が始まったらスグにでも質問したい。
→質問で解決しました。
Xcodeではアシスタントエディターのボタンをクリックした時に自動的に判別して右側にソースを表示するようで、自分が画面上の何も選択せずにボタンを押したことで、ViewController.swift(Interface）の方が開いてしまったのではないか、とのことでした。
この画面が出てしまったら画面右上の×ボタンで画面を消して、ViewControllerを選択状態にしてからアシスタントエディターボタンをクリックすれば良いです。
ViewController.swift(Inteface)とは
あの後調べてみたら海外のサイトで私と同じように疑問に思った人のQ&Aがありました。
これを見ると、ViewController.swift(Interface）というのは実在しないファイルで、ViewController.swiftのメソッドやプロパティ部分を要約して見せているだけではないか、と書かれてるように思います。
なのでこのファイル（というより画面上）では編集したりLabelと接続するようなことはできない、というわけです。
Labelの横幅が文字列に対してフィットしない
Labelを2つ作ってViewControllerに接続した。
そのあとlabe.txt = “”で文字列をラベルにセットしてビルド＆シミュレーターを起動。
すると「swi…」までしか表示されない困った。テックキャンプのマニュアルだとちゃんと表示されてるんですけど自分の環境だと駄目。あるいは自分がちゃんと操作出来てない可能性もある。
ネットでいろいろと調べて回ったら、文字列をセットした後にsizeToFit()メソッドを呼び出すとLabelが文字幅に合わせてフィットしてくれるそう。
なので
myLabel.text = “swift不可解”
myLabel.sizeToFit()
とやると横幅ちゃんと表示してくれた。
◆Buttonのビューも文字を入れて配置してみたけど、長めの文字だとちゃんと全文表示されませんでした。
これは解決しました。マウスでViewController上のLabelやButtonをクリック＆ドラッグすれば表示領域を増やすことができました。
XCodeはInterface Builderの画面と、ソースコードの画面と2つとも自分でどこにどう配置して、どんな値を持っていて‥というのを覚えておかないといけませんね。マウスでLabelやButtonの大きさを変える事もできるし、画面右側のメニュ（Attributes Inspector）で縦横幅に数値を与えて大きさを変える事もできます。
自分がどっちを使うのか使っていくのかを把握してないとゴチャゴチャしちゃいそうです。
XcodeのInterface BuilderのAutoLayoutの成約がうまくいかない
テックキャンプの教材に従ってXcodeの操作をしながら学習を進めていっているのですが、どうにも教材通りの結果に画面がならなくて困っています。
まだ本コース開始前なので質問等ができないから開始したときのために事象をまとめておこうかと思いました。
AutoLayoutの成約の理解
AutoLayoutというのはInterface Builderの機能の1つでビュー（ボタンやラベルなど）をどのように画面に配置するか、ビューの大きさをどうするかという設定のことだと理解しています。
iPhoneにはバージョンがあり、それぞれ画面サイズが異なるのでどの画面サイズでも綺麗に見えるようにビューを配置するための成約（例えば右端からの距離を固定）とか、そういうことをやります。
まずはXcodeで新規プロジェクトを作成して.storyboardファイルを開きInterface Builderを表示させたところ
右下からビューをドラッグして画面上に乗せて、アトリビュートインスペクターで色を黄色にしたところ
次にサイズインスペクターで縦横サイズを指定したところ
ここまではうまくいきました。
次からが「成約」というものを付与していきます。画面右下の「Alignボタン」でこの画面を開き、「Horizontally in Container」と「Vertically in Container」にチェックを入れると、水平と垂直方向の中央揃えという成約を追加できます。
そうするとここでエラーが出ます。
エラー内容を確認できるのですが、テックキャンプの教材によるとエラーが出るのは良いらしく「Missing Constraints」と「Misplaced Views」のエラーが出てる予定なんですけど、私の画面上だと「Missing Constraints」のエラーが２個出てるのみです。
なのでこの時点で教材とは何か違ったことをやらかしているように見えます。と、思って質問したら教材が古いようでした。(T_T)
引き続き（教材でもエラーそのままに次の作業をやれと指示がでている）Pinというボタンを使ってこのビューに対して縦横サイズを指定するという成約を追加しました。
そうするとエラーが出なくなりました。
テックキャンプの教材だと、ここで謎のオレンジ色の線が出現し、エラーが1個に減る‥とあります。けど私の画面上にはすでにエラーが1個も無くなっているのです。(´・ω・｀)
いったい何がおこっているのかわからないので、ここでギブアップ気味です。
と、思ったら私は最新のXcodeをインストールしてて、それだとあれこれ自動でやってくれてエラーが出なくなってるとのこと。ここでもやはり教材が古いようでした。たのむぜテックキャンプ！
次にIssuesボタンを使って、全てのビューあるいは選択した1つのビューに付与した成約を解除することができたりします。
取り敢えずここまで進めました。テックキャンプの教材ではIssuesボタンを使って「Update Frames」を行うよう指示されていますが、そもそもグレーアウトしていてクリックすら出来ないし。。
Issuesボタンでは制約を解除したり、Update（更新）で自動的に修正したり、といった事ができる様子です。しかし自分で操作してみて制約の付与自体が結構混乱のモトになってると感じました。エラー理由がわからない状態でUpdateで修正するのはさらに不理解が積もります。制約はいったん解除して再設定したほうがミスなく進められそうです。
ということで、教材が古い（と思われる）部分は飛ばして先に進みましょう。
今何を選択しているのかわからない
ストーリーボードを表示させています。黄色のビューを配置したところです。だからこれがノーマル状態。何も選択してない状態。
ビューを1クリックすると画面がこのように変わる。これは？？ ビューを選択した状態、ということで良いのだろうか。
で、もう1回ビューをクリックすると画面がこのように変わる。黄色の四角のまわりに白線ができて、背景がグレーになる。これはビューを選択してる状態なの？
このへんもよくわかってなくて、変な操作してこの状態で進めて失敗しているんじゃないだろうか‥
