未分類

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

PremiereProショートカット割り当て

自分で割り当てたショートカット   ・アクティブウィンドウを最大化(または戻す):@

no image

アイコン下のアプリ名だけ変更する方法

プロジェクト名などは変えずに、ホーム画面のアイコン下に表示されるアプリ名だけを変更する方法。 Genelal(名前とは設定するところ)→info→ +でBundle display nameを追加し、 …

no image

クラッシュした時に見るところ・ブレイクポイントを作る

このエラーが出た時に見るところ(選択箇所)↓ reason:のあとを読む。 nextが渡っていないことがわかる。 さらにAutoBreakPointを作ることで、どこでエラーが出ているかわかる。 +→ …

no image

PremiereProのテキストアニメーション簡単なやつ色々

・ぼかしからぼやっと出てくる エフェクト「ブラー(ガウス)」→開始でブラー値300、10フレーム後で0 参考:https://youtu.be/pamD-YrZGuY   ・1文字ずつ出てる …

読み込んだイラストの位置・スケールを直接変える方法

クリップ選択後、「モーション」をクリックするとイラストの周りに青枠が出て直接拡縮したり移動できる。 エフェクトコントロールの位置・スケールで動かすより楽。