【swift・iOS】UIボタン(Button)の装飾の仕方。ボーダー・角丸・背景色など【Xcode】

iphoneアプリ開発で必ず使用するUIボタン。

今回はUIボタンに

  • 文字色
  • 高さ
  • 位置調整
  • 背景色
  • ボーダー
  • 角丸
  • シャドウ(影)

などの装飾を施す方法を紹介します!

Object LibraryからButtonを選択して、Storyboardに配置する

まずは、装飾するボタンを配置しましょう。

配置が完了したら、ViewControllerに紐づけます。(Control + ドラッグ・アンド・ドロップ)

swiftのソースでボタンを装飾していく

ViewControllerをこの状態にして、ビルドすると

こういった形で、

  • 大きさ
  • 位置
  • 背景色
  • 文字色
  • ボーダー幅
  • ボーダー色
  • 角丸

が装飾されたボタンが完成します。

ソースのどこの部分でどの装飾を施しているかを説明すると、

  1. 大きさと位置
  2. 位置(センター寄せにさせるために1を上書き)
  3. 背景色
  4. 文字色
  5. ボーダー幅
  6. ボーダー色
  7. 角丸の度合い
  8. 影の大きさ
  9. 影の薄さ
  10. 影の丸み
  11. 影の色

を設定しています。(ソースのコメントアウトの数字に対応)

こういった形で、swiftではボタンの装飾を行います!

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!