テックキャンプの教材どおり進められない‥Labelとソースの接続、Labelの横幅でエラー

2018年7月11日

テックキャンプで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)が2つあって。画面左右で同じファイルを開いてるはずなのに書かれてる内容が違う。それでLabelを右側のソースに接続しようとして、このエラーが出てた。

これをあれこれ正してちゃんとしたViewController.swiftに接続したらうまくいった。

しかしどうしてファイルが2つ出来てしまったのか、どっちが正しいファイルなのか、なぜ駄目な方のファイルが開いたのか未だにわからない。テックキャンプの正式な受講が始まったらスグにでも質問したい。

→質問で解決しました。

Xcodeではアシスタントエディターのボタンをクリックした時に自動的に判別して右側にソースを表示するようで、自分が画面上の何も選択せずにボタンを押したことで、ViewController.swift(Interface)の方が開いてしまったのではないか、とのことでした。

この画面が出てしまったら画面右上の×ボタンで画面を消して、ViewControllerを選択状態にしてからアシスタントエディターボタンをクリックすれば良いです。

ViewController.swift(Inteface)とは

あの後調べてみたら海外のサイトで私と同じように疑問に思った人のQ&Aがありました。

https://stackoverflow.com/questions/34646516/what-is-the-viewcontroller-swift-interface-file-for-in-counterparts

これを見ると、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の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」のエラーが2個出てるのみです。

なのでこの時点で教材とは何か違ったことをやらかしているように見えます。と、思って質問したら教材が古いようでした。(T_T)

引き続き(教材でもエラーそのままに次の作業をやれと指示がでている)Pinというボタンを使ってこのビューに対して縦横サイズを指定するという成約を追加しました。

そうするとエラーが出なくなりました。

テックキャンプの教材だと、ここで謎のオレンジ色の線が出現し、エラーが1個に減る‥とあります。けど私の画面上にはすでにエラーが1個も無くなっているのです。(´・ω・`)

いったい何がおこっているのかわからないので、ここでギブアップ気味です。

と、思ったら私は最新のXcodeをインストールしてて、それだとあれこれ自動でやってくれてエラーが出なくなってるとのこと。ここでもやはり教材が古いようでした。たのむぜテックキャンプ!

次にIssuesボタンを使って、全てのビューあるいは選択した1つのビューに付与した成約を解除することができたりします。

取り敢えずここまで進めました。テックキャンプの教材ではIssuesボタンを使って「Update Frames」を行うよう指示されていますが、そもそもグレーアウトしていてクリックすら出来ないし。。

もう何がなにやらわからないので教材は飛ばして先に進みます。

今何を選択しているのかわからない

ストーリーボードを表示させています。黄色のビューを配置したところです。だからこれがノーマル状態。何も選択してない状態。

ビューを1クリックすると画面がこのように変わる。これは?? ビューを選択した状態、ということで良いのだろうか。

で、もう1回ビューをクリックすると画面がこのように変わる。黄色の四角のまわりに白線ができて、背景がグレーになる。これはビューを選択してる状態なの?

このへんもよくわかってなくて、変な操作してこの状態で進めて失敗しているんじゃないだろうか‥