未分類

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】

-未分類

執筆者:

関連記事

文字をバラバラに表示させる

バラバラ文字を作る 文字を全選択したら「GG分解」のスクリプトを適用する。 適用すると文字がパーツごとに選択できるようになる。 最終的に表示されるバラバラな状態になるよう位置を調整して、キーを打ってお …

動かしたくないところも考慮してキーを打つ

関節アニメーションでショベールカーを動かす

関節アニメーションで、人間の動きなど様々なアニメーションが作れる。   「親子付け」を設定することで、連動する動き(移動など)と個別の動き(シャベルの回転など)をつけることができる。 全ての …

プレミアプロ講座応用編1_カットとテロップ入れ

ショートカットキー 変更後の設定 カットで使うショートカット レザーツールでカットしてリップル(空白)を削除するよりショートカットを使った方が時短できる。   ・全てのクリップに一括でカット …

no image

Int型からString型へ変換

Int型→String型またはString型→Int型に変換(キャスト)する方法。 //String型->Int型 let yearString = “2020” let yearInt = I …

テキストアニメーションでMVを作る

  テキストのモーショングラフィックを使ってMVを作った。 いろいろなテキストの表示を試してみた。 ・RGBずらし ・グリッチ ・ヌルとカメラを使って全体を動かす ●参考動画: