読者です 読者をやめる 読者になる 読者になる

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

Xcodeの使い方 - ユーティリティーエリア

iPhoneアプリ開発

ユーティリティーエリアで良く使う機能を抜粋してご紹介します。

Xcodeはとにかく機能が多すぎるので、使用頻度の高いものだけ覚えましょう。

 

目次

  • ユーティリティーエリア概要
  • アイデンティティー・インスペクターの使い道
  • アトリビューツ・インスペクターはプロパティー設定をするところ
  • サイズ・インスペクターはオートレイアウトの調整場所
  • コネクションズ・インスペクターでプログラムとの接続状態をチェック

 

 

ユーティリティーエリア概要

Xcodeを起動したときに右側に表示されているエリアがユーティリティーエリアです。

f:id:bettychang:20160121213851p:plain

右上のアイコンで開閉できます(ショートカットだとcommand + option + 0)。

ここは主に、ストーリーボード関連の設定全般を操作するエリアです。大きく上下2つのエリアに分かれています。

  • インスペクタ
  • ライブラリ

f:id:bettychang:20160121214420p:plain

 

ライブラリ(下)でパーツを選んで設定し、インスペクター(上)でプロパティ設定など(色を変えたり、制約を修正したり)を行います。

なお、ライブラリ部分は下にドラッグすると非表示にできます。

 

では、ライブラリについては見たままなので、以降はインスペクターについてよく使用する箇所を説明いたします。

 

アイデンティティ・インスペクターの使い道

名前が覚えづらいですが、アイコンだけ把握しておけば名前は特に覚えなくてもいいと思います。

ここでは、User Defined Runtime Attributesというところを比較的良く使います。

f:id:bettychang:20160121215501p:plain

なにができるかというと、ストーリーボード上に設定したボタンやビューなどの詳細設定について、本来プログラムファイルで書くべきところを、ここでも設定できたりします。かなりわかりづらいですね。

 

では試しに使ってみましょう。ストーリーボード上にボタンを配置しているとして、ボタンを選択して、下記の値をAttributesに設定します。

  • layer.cornerRadius Number 20
  • layer.masksToBounds Boolean チェック

f:id:bettychang:20160121220509p:plain

 


これを実機で見てみましょう。

f:id:bettychang:20160121220616p:plain

 

Xcode上では角ばっていたボタンが実機では丸くなっているのがわかりますか。

これは先ほど追加した設定が反映しているためです。layer.cornerRadiusはパーツの角の丸さを設定をするパラメータです。本来であれば、プログラムに記述するところですが、このように、アイデンティティー・インスペクター上でもGUI的に設定することができるわけです。楽といえば楽ですね。

注意点は、Xcode上の画面表示(真ん中の画面)には設定が反映されないことと、設定したこと自体を忘れがちなので、使うかは好みが分かれるところかもしれません。

私は今の所、ビューの角を丸くする用途にだけつかっています。

 

アトリビューツ・インスペクターはプロパティー設定をするところ

 

選択しているパーツのプロパティーを表示し、設定するところがアトリビューツ・インスペクターです。名前は覚えなくてもよいですが、ここはとても良く使うエリアです。

例えば下記はボタンを選択したときの状態です。

f:id:bettychang:20160121221736p:plain

このようにボタンの状態、属性が多数表示されます。

  • ボタンに表示する文字
  • Font
  • 文字の色
  • 文字の影の色

下にいくともっといろいろとあります。

f:id:bettychang:20160121222030p:plain

  • Alignment(ボタンの文字をどこに配置するか)
  • Alpha(ボタンの透過設定)
  • 背景色

などなどです。ここにはかなりいろいろな項目がありますし、パーツによって表示項目もそれぞれことなりますので、必要なものだけ随時覚えましょう。

 

サイズ・インスペクターはオートレイアウトの調整場所

物差しのアイコンをクリックすると表示されるのがサイズ・インスペクターです。ここはビューやボタンなどのサイズに関する設定をするところです。

 

View

まず一番上にあるのがViewというエリアです。、ここでは各パーツのXcode上でのサイズと配置位置を設定できます。

f:id:bettychang:20160121222744p:plain

  • Xは横軸の位置
  • Yは縦軸の位置
  • Widthは横幅
  • Heightは高さ

ただし、これは実際の(アプリとしての)もののサイズや配置位置とは全く関係ありません。あくまでXcode上の画面中央画面にどう配置するかの設定です。どうでもよい項目に感じるかもしれませんが、これが意外とよく使います。例えば、このようにいろいろなパーツが重なり合ってたくさん密集しているようなレイアウトの時に、使用します。

f:id:bettychang:20160121223505p:plain

このレイアウトでは、ビューの中にボタンが6つ入り、その上にさらに画像を表示するためのイメージビューが覆いかぶさっています。

例えば、この状態でボタンの位置を、マウスで操作するには、一度イメージビューをどかさないとむりなわけですが、Viewのエリアを活用すると、マウスで狭いパーツ群を選り分けて操作しなくとも、ツリー上で対象ボタンを選択してX軸Y軸の数値を変更すればその座標に移動してくれます。

また、こちらのほうが非常に重要なのですが、マウス操作でパーツを移動していると、誤操作によりパーツ間の入れ子構造や前後配置が変わってしまうことがあります。そうするとせっかく設定したオートレイアウトが消えしまう事故が発生します。すぐ気づけば操作取り消しできますが、いつのまにか設定が狂っているということになり、かなりの手戻りになりますので、入り組んだレイアウトをいじる場合はここで操作するのが無難です。

また、オートレイアウトの設定ミスで、ビューなどが遠くにに吹っ飛んでしまうと、マウスでは選択できないので、ここで座標を直して、見える位置内に戻します。

 

オートレイアウトの編集

設定したオートレイアウトは、Constraintsのエリアで編集と削除ができます。

f:id:bettychang:20160121224824p:plain

青いアイコンで表示されている2つの枠が制約です。Editを押すと編集ができます。選択して制約を削除することもできます。

 

コネクションズ・インスペクターでプログラムとの接続状態をチェック 

ストーリーボード上に配置したビューやボタンをプログラムから操作するためには、OutletやSentEventといったコネクション設定をする必要がありますが、その状態を見ることができるのがコネクションズ・インスペクターです。

f:id:bettychang:20160121225730p:plain

 

例えば、あるボタンをストーリーボード上に設定します。

プログラム上にはボタン操作用のアウトレットとボタンのアクション設定(タッチした時の動作を書くところ)をしたとします。その時コネクションズ・インスペクターには自動的に下記の設定が入ります。

f:id:bettychang:20160121230253p:plain

 

「設定が入ります」と記載してしまいましたが、コネクション設定はコネクションズ・インスペクター画面から矢印をひっぱることもできましたね、ちょと語弊がありました(私はツリー上から矢印を引っ張ることがほとんどなので)。

コネクションを設定したり、確認したり、削除する場所がコネクションズ・インスペクターです。削除には対象のコネクションのバツボタンをクリックします。

私の場合、コネクション設定に起因してはまることがよくあります。主に下記の点です。

  • コネクションを削除してもプログラムに設定したアウトレット等の記述は自動では消えないため、プログラム、ストーリーボード間で設定非同期が起きてしまう
  • ツリー上でボタンなどをコピペすると、コネクションも一緒にコピーされてしまうため、それに気づかず誤動作に悩む。コピペする場合はここでコネクションを事前に削除する必要がある。

 

以上がユーティリティーエリアで良く使う箇所です。ちょっとボリュームがありますが、ストーリーボードを使用して画面を作る場合にはとても重要なエリアですので、少しずつ操作して画面に親しみましょう。

今回はこれで終了です。ご覧いただきありがとうございました!

 

関連記事

swift-bettychang.hatenadiary.jp