ほとんどのアプリで使わない時がないといっても過言ではないUIButton
しかし、少し角を丸くしよう！とか思ってもちょくちょく調べていたのでまとめました。
Xcode: 9.0.1 Swift4.0
種類としては、3通りします。
- 文字ラベルと色の変更
- 画像ボタンにする
- ボタンの枠を丸にする
プロジェクト作成後してからボタン設置
iOS→「Single View App」から今回は「button_sample」という名前でプロジェクト作成しました。
初期で作成されているViewControllerにUIButtonを配置していきます。
UIButtonはこのアイコンです。
配置位置はこんな感じです。
プログラム
下記は、UIButtonを紐付けした状態のプログラムです。
これを元にUIButton1~3をviewDidLoad()部分で変更していきます。
詳しいドキュメントは、Develpoer Apple公式ドキュメントをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import UIKit class ViewController: UIViewController { @IBOutlet weak var button1: UIButton! @IBOutlet weak var button2: UIButton! @IBOutlet weak var button3: UIButton! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
UIButtonのlabelや色を変更する
UIButtonの中身である文字などは、UILabelの設定方法とは異なります。
|
1 2 3 4 5 6 7 8 |
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //button1 文字や文字色を変更する button1.setTitle("赤文字ボタン１", for: UIControlState.normal) button1.setTitleColor(UIColor.red, for: UIControlState.normal) } |
ボタンを画像にする
UIButtonを画像にする場合は、setImageを利用します。
画像は、swiftのアイコンを利用しました。
Asset.xcassetsの中にドラックアンドドロップします。
|
1 2 3 4 5 6 7 8 9 10 |
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //button1 文字や文字色を変更する button1.setTitle("赤文字ボタン１", for: UIControlState.normal) button1.setTitleColor(UIColor.red, for: UIControlState.normal) //button2 UIButtonを画像にする namedの中身を適宜変更してください button2.setImage(UIImage.init(named: "apple-swift-logo"), for: UIControlState.normal) } |
画像によっては、青くなってしまうことがあります。
その時は、Main.storyboardでボタンのTypeを「Custom」に変更しましょう。
するとうまく画像が表示されます。
UIButtonのType属性はコード上では読み取り専用となっており、viewDidLoad()関数では変更できないため、Main.storyboardで変更してください。
ボタンの角を丸くする
ボタン自体の装飾については、layer属性をカスタマイズしていきます。
borderColorの設定時は、UIColor.blueのみにすると as! CG Color と後に書くように修正が入りますが、そっちではなく .cgColorと書いてあげましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //button1 文字や文字色を変更する button1.setTitle("赤文字ボタン１", for: UIControlState.normal) button1.setTitleColor(UIColor.red, for: UIControlState.normal) //button2 UIButtonを画像にする button2.setImage(UIImage.init(named: "apple-swift-logo"), for: UIControlState.normal) //button3 角丸のUIButtonを作成する 青枠で線の太さは1.0 button3.layer.borderColor = UIColor.blue.cgColor button3.layer.borderWidth = 1.0 button3.layer.cornerRadius = 10.0 //丸みを数値で変更できます } |
まとめ
いかがでしたか？
UIButtonは、いろんなところで利用するのですがいざカスタマイズという時には、結構調べますよね。Typeのように読み取り専用だったりする要素もありちょっと難しい場合もあります。
@IBDesignableと@IBInspectableを利用してMain.storyboardでカスタマイズできる方法もあります。
では、良いプログラミングライフを！
