![見出し画像](https://assets.st-note.com/production/uploads/images/101369972/rectangle_large_type_2_02803dcb2af956833cec46b57146d482.png?width=1200)
【徒然iOS】気ままにUIKitちょいと小技〜ボタンの形を変形するテクニック〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
前回までの記事
NavigationControllerやSegueでボタンをビューに配置することが多くなってきたんだけど、
![](https://assets.st-note.com/img/1679983614018-mmi6CcegGk.png?width=1200)
って欲求もそろそろ出てきてるかな〜〜〜
って思ったので、
簡単な小技を紹介します〜〜〜〜🕺
組み込むコード
@IBDesignable class BorderedButton: UIButton {
@IBInspectable var borderColor: UIColor? {
get { return UIColor(cgColor: self.layer.borderColor!) }
set { self.layer.borderColor = newValue?.cgColor ?? nil }
}
@IBInspectable var borderWidth: CGFloat = 1.0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat = 0.0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0.0
}
}
}
@IBDesignable class BorderedLabel: UILabel {
@IBInspectable var borderColor: UIColor? {
get { return UIColor(cgColor: self.layer.borderColor!) }
set { self.layer.borderColor = newValue?.cgColor ?? nil }
}
@IBInspectable var borderWidth: CGFloat = 1.0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat = 0.0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0.0
}
}
}
手順
⒈コードをいつもアシスタントで編集してるファイルに追加(分かりやすいように先頭あたりで適用に〜〜〜)
![](https://assets.st-note.com/img/1679983754178-3Wub2baa2t.png?width=1200)
⒉対象ボタンにクラスを組み込み〜〜〜
![](https://assets.st-note.com/img/1679983843105-8S4hFRxNMh.png?width=1200)
⒊AttributeInspectorで調整
![](https://assets.st-note.com/img/1679983984478-EgkkuuEBsT.png)
⒋シミュレータで実行
![](https://assets.st-note.com/img/1679984095902-scGgo0JLPV.png?width=1200)
![](https://assets.st-note.com/img/1679984113324-QX12VakHXW.png?width=1200)
てな感じで遊べるから色々試してみてね〜〜〜〜👀
最後に、またこの記事のリンクボタンを追加しとこ💃
![](https://assets.st-note.com/img/1679984634811-7onqP3GlwK.png?width=1200)
Apple公式
Forumの方の記事だけど、参考までに
さてと、次回こそは
をレッツゴする🕺
さて、そろそろ良い天気だしちゃん丸の散歩行かねば💦