【Xcode9 swift4】UIButtonの使い方 画像ボタンや角丸ボタンなど

ほとんどのアプリで使わない時がないといっても過言ではないUIButton

しかし、少し角を丸くしよう!とか思ってもちょくちょく調べていたのでまとめました。

Xcode: 9.0.1   Swift4.0

種類としては、3通りします。

  • 文字ラベルと色の変更
  • 画像ボタンにする
  • ボタンの枠を丸にする

 

Simulator Screen Shot - iPhone 7 - 2017-11-14 at 02.05.14

 

 

 

プロジェクト作成後してからボタン設置

 

iOS→「Single View App」から今回は「button_sample」という名前でプロジェクト作成しました。

初期で作成されているViewControllerにUIButtonを配置していきます。

UIButtonはこのアイコンです。

 

スクリーンショット 2017-11-13 23.41.30

 

配置位置はこんな感じです。

スクリーンショット 2017-11-14 0.04.44

 

 

 

 

プログラム

 

下記は、UIButtonを紐付けした状態のプログラムです。

これを元にUIButton1~3をviewDidLoad()部分で変更していきます。

詳しいドキュメントは、Develpoer Apple公式ドキュメントをご覧ください。

 

 

UIButtonのlabelや色を変更する

UIButtonの中身である文字などは、UILabelの設定方法とは異なります。

Simulator Screen Shot - iPhone 7 - 2017-11-14 at 01.33.53

 

ボタンを画像にする

UIButtonを画像にする場合は、setImageを利用します。

画像は、swiftのアイコンを利用しました。

Asset.xcassetsの中にドラックアンドドロップします。

スクリーンショット 2017-11-14 1.37.39

 

 

画像によっては、青くなってしまうことがあります。

Simulator Screen Shot - iPhone 7 - 2017-11-14 at 01.53.27

その時は、Main.storyboardでボタンのTypeを「Custom」に変更しましょう。

スクリーンショット 2017-11-14 1.54.08

 

するとうまく画像が表示されます。

UIButtonのType属性はコード上では読み取り専用となっており、viewDidLoad()関数では変更できないため、Main.storyboardで変更してください。

Simulator Screen Shot - iPhone 7 - 2017-11-14 at 01.56.40

 

 

ボタンの角を丸くする

 

ボタン自体の装飾については、layer属性をカスタマイズしていきます。

borderColorの設定時は、UIColor.blueのみにすると as! CG Color と後に書くように修正が入りますが、そっちではなく .cgColorと書いてあげましょう。

Simulator Screen Shot - iPhone 7 - 2017-11-14 at 02.05.14

 

 

まとめ

 

いかがでしたか?

UIButtonは、いろんなところで利用するのですがいざカスタマイズという時には、結構調べますよね。Typeのように読み取り専用だったりする要素もありちょっと難しい場合もあります。

@IBDesignableと@IBInspectableを利用してMain.storyboardでカスタマイズできる方法もあります。

では、良いプログラミングライフを!

 


Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です