Tips

UIKitのアトリビュート徹底解説〜UIButton編〜

UIKitのアトリビュート徹底解説〜UIButton編〜

UIButtonのアトリビュートを徹底解説!

UIButtonはボタンに画像を配置したりすることができる部品になっているため、
UIControlクラスを継承しています。
UIButton→UIControl→UIViewというようにクラスを継承しています。そのため
UIButtonクラス独自のアトリビュートだけでなく、UIControlクラスとUIViewクラスの
アトリビュートも設定することが可能です。
s24_1
s24_2
s24_3
今回はUIButtonクラス独自のアトリビュートのみに絞って解説します。

【Type】

(UIButtonのイニシャライザ)
s24_4
ボタンの種類を変更することができます。デフォルトは「System」です。

コードで作成する際はボタンのタイプはインスタンス化のタイミングで指定します。ひとたびインスタンス化して
ボタンを作成したら変更することができなくなっていますので注意が必要です。

◼︎Custom
自由にカスタマイズすることができるボタン。選択すると何も決まってない状態なので
イチから文字や背景色など全て指定する必要がある
◼︎System
一般的なボタン。枠線のない四角ボタン
◼︎Detail Disclosure
情報などの表示に使用される丸ボタン。タップ時にハイライトされない
◼︎Info Light
情報などの表示に使用される丸ボタン。タップ時にハイライトされる
◼︎Info Dark
Info Lightと全く同じボタン。アイコンがシンプルになったため統一された
◼︎Add Contact
情報追加画面などに遷移する際に使用されるボタン

それぞれのボタンの形は次のようになります。Customボタンはユーザが自由に作成することができる
ボタンのため、文字色や背景色を変更して見えるようにしています。また、他のボタンのようにタップした際に
ハイライトされたり、押された感は出ません。そこも含めて全てカスタマイズしないといけないんですね。
s24_5

let myButton = UIButton(type: UIButtonType.InfoLight)

【State Config】

s24_6
ボタンの状態を指定します。この状態ごとに、以下に続く「Title」から「Background」までのアトリビュートを
決めていく形になります。

コードで作成する場合は以下の「Title」や「Font」などを指定する際に引数で一緒に指定します。

◼︎Default
ボタンが通常状態の設定を行う
◼︎Highlighted
ボタンがタップしている状態(ハイライト状態)の設定を行う
◼︎Focused
ボタンがフォーカスされている状態の設定を行う
◼︎Selected
ボタンが選択されている状態の設定を行う
◼︎Disabled
ボタンが無効状態の設定を行う

【Title】

(setTitle(title: String?, forState state: UIControlState)メソッド)
UILabelの「Text」アトリビュートと全く同じになります。ボタンに表示する文字列を変更します。
「Plain」と「Attributed」の2種類がありますが、基本的に「Plain」で問題ないでしょう。

myButton.setTitle("myButton", forState: UIControlState.Normal)

【Font】

(titleLabel?.fontプロパティ)
UILabelの「Font」アトリビュートと全く同じになります。指定方法も全く同じです。
フォントの指定方法は前回のUIKitのアトリビュート徹底解説〜UILabel編〜を参照してください。

myButton.titleLabel?.font = UIFont(name: "HiraKakuProN-W3", size: 20.0)

【Text Color】

(setTitleColor(color: UIColor?, forState state: UIControlState)メソッド)
UILabelの「Color」アトリビュートと全く同じになります。
色の設定方法は前回のUIKitのアトリビュート徹底解説〜UILabel編〜を参照してください。

myButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Highlighted)

【Shadow Color】

setTitleShadowColor(color: UIColor?, forState state: UIControlState)メソッド)
UILabelの「Shadow」アトリビュートと全く同じになります。
影付き文字の色の設定方法は前回のUIKitのアトリビュート徹底解説〜UILabel編〜を参照してください。

myButton.setTitleShadowColor(UIColor.greenColor(), forState: UIControlState.Normal)

【Image】

setImage(image: UIImage?, forState state: UIControlState)メソッド)
ボタンに画像を設定することができます。アプリのプロジェクトにあらかじめ画像を取り込んでおき、表示することが
できます。実用性はほとんどありませんが、画像を設定している状態で「Title」も設定していると両方とも表示されます。
実用性がないので、画像を表示する場合は文字は消しておいたほうが良いでしょう。
s24_7

myButton.setImage(image, forState: UIControlState.Disabled)

【Background】

setBackgroundImage(image: UIImage?, forState state: UIControlState)メソッド)
Imageアトリビュートと異なり、こちらのアトリビュートTitleによって表示されている文字の後ろに表示させる画像を設定する
ことができます。文字と重なって表示されるので、文字が見やすい画像を設定するようにしましょう。
s24_8

myButton.setImage(image, forState: UIControlState.Selected)

【Shadow Offset】

(titleLabel?.shadowOffsetプロパティ)
UILabelの「Shadow Offset」アトリビュートと全く同じになります。
影付き文字の表示位置の設定方法は前回のUIKitのアトリビュート徹底解説〜UILabel編〜を参照してください。

myButton.titleLabel?.shadowOffset = CGSizeMake(5, 5)

◼︎Reverses On Highlight
(reversesTitleShadowWhenHighlightedプロパティ)
チェックを入れているとボタンをタップしている状態(ハイライト状態)の時に影の位置を反転して表示する

myButton.reversesTitleShadowWhenHighlighted = true

【Drawing】

以下の3つの項目があります。
◼︎Shows Touch On Highlight
(showsTouchWhenHighlightedプロパティ)
チェックを入れるとボタンをタップした時にボタン中心部から光が照らし出されているような効果をつけることが
できます。「Info Light」と「Info Dark」の時にはデフォルトでこの設定がされています。

myButton.showsTouchWhenHighlighted = true

◼︎Highlighted Adjusts Image
(adjustsImageWhenHighlightedプロパティ)
チェックを入れるとボタンをタップした時に画像の色合いを自動調整して表示するようになります。
若干暗くなります。

myButton.adjustsImageWhenHighlighted = true

◼︎Disabled Adjusts Image
(adjustsImageWhenDisabledプロパティ)
チェックを入れるとボタンが「Disabled」状態の時に色合いを自動調整して表示するようになります。

myButton.adjustsImageWhenDisabled = true

【Line Break】

(titleLabel?.lineBreakModeプロパティ)
UILabelの「Line Breaks」アトリビュートと全く同じになります。
文字がはみ出した際の省略部分の設定方法は前回のUIKitのアトリビュート徹底解説〜UILabel編〜を参照してください。

myButton.titleLabel?.lineBreakMode = NSLineBreakMode.ByTruncatingHead

【Edge】

下記のアトリビュート「Inset」と併用して用いる。
「Content」…「Inset」アトリビュートをタイトルと画像の両方に対して適用する
「Title」…「Inset」アトリビュートをタイトルのみに対して適用する
「Image」…「Inset」アトリビュートを画像のみに対して適用する

【Inset】

(contentEdgeInsetsプロパティ)
(titleEdgeInsetsプロパティ)
(imageEdgeInsetsプロパティ)
上記アトリビュート「Edge」と併用して用いる。
タイトル及び画像の上下左右の余白を設定します。

myButton.contentEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

いかがだったでしょうか。コードで記述する際の例も載せているのでstoryboard上でいじってみたり、
コードを変更してみたり、いろいろ試してみてください!

TechProjin 開発系基礎講座 連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

AIなどで注目急上昇!これから学ぶならPython!!
独学で学ぶ-pythonプログラミング 連載

汎用性◎ 定番プログラミング言語JAVA
Java基礎講座 連載

Recent News

Recent Tips

Tag Search