未分類

systemImageを使ってボタンをカスタマイズする

投稿日:

標準で用意されているsystemImageを使って、以下のような追加ボタンを作る。

StoryBoardでImageに「plus」を設定して、テキストは消す。

systemImageのサイズ、色はコードで設定する。

以下の3行で、ボタンいっぱいに画像を表示させることができる。

button.imageView?.contentMode = .scaleAspectFit
button.contentHorizontalAlignment = .fill
button.contentVerticalAlignment = .fill

大きすぎる場合は、.imageEdgeInsetsでマージンを調整できる。

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10);

すべてのコード

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var button: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //角丸
        button.layer.cornerRadius = 20
        
        //画像の色
        button.imageView?.tintColor = .white
        
        //ボタンいっぱいに画像を表示する
        button.imageView?.contentMode = .scaleAspectFit
        button.contentHorizontalAlignment = .fill
        button.contentVerticalAlignment = .fill
        
        //画像にマージンを追加する
        button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10);

    }
}

完成

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

-未分類

執筆者:

関連記事

no image

モーショングラフィックテンプレートを読み込む

ダウンロードしたテンプレートは拡張子『.mogrt』で保存されます。テンプレートを使う際には、Premiere Proのローカルテンプレートフォルダにコピーするか、エッセンシャルグラフィックスパネルか …

アプリをバージョンアップする方法

App Storeにアプリのバージョンアップを申請する。 xcode上でバージョンを書き直す。 以下を参考にAppl Storeに申請する。 申請前にApp Store Connectでやること。 参 …

no image

Colendar.currentで現在時刻を表示する

●Calendar.currentとcomponentプロパティで現在の日付を表示させる。 //現在時刻をdate型で生成 let date = Date() //ユーザーの現在時刻のグレゴリオン歴カ …

プレミアプロ講座基礎編1_エフェクト(新規作成時の設定)

新規プロジェクト作成時の設定 プロジェクトを保存する場所を指定 プロジェクトや書き出しを行った時に保存されるフォルダを指定する。 ここを指定すると、オートセーブされるデータのファイルなども全てこのファ …

no image

String型からDate型への変換

String型の「2020/08/10」をDate型に変換したい。 import Foundation let dateFormatter = DateFormatter() dateFormatte …