0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UISegmentedControlの色をStoryBoardから変更する

Posted at

##環境
swift4
xcode10.1

##やること
UISegmentedControlの背景色をStoryBoardから変更してみる。
スクリーンショット 2019-04-09 0.43.52.png
こんなもの作る場合ですね。

##流れ
1.UISegmentedControlを継承したクラスの作成
2.作成したクラスにIBInspectableに背景色を設定するプロパティを設定
3.StoryBoardでUISegmentedControlを作成し、1のクラスを設定
4.2のプロパティにカラーを設定

###1.UISegmentedControlを継承したクラスの作成

こちらのリンクを参考にクラスを作成します。
https://qiita.com/son_s/items/7ca2acf690d10f9fd1b7

DesignableSegment.swift
@IBDesignable
class DesignableSegment: UISegmentedControl {
}

###2.作成したクラスにIBInspectableに背景色を設定するプロパティを設定
UISegmentedControlにIBInspectableを設定し、
その中でカラーを変更します。
先程のコードにIBInspectableを追加します。

DesignableSegment.swift
@IBDesignable
class DesignableSegment: UISegmentedControl {
    @IBInspectable internal var segmentColor: UIColor? {
        didSet {
            self.tintColor = segmentColor
            self.backgroundColor = UIColor.white
            self.layer.cornerRadius = 4
        }
    }
}

###3.StoryBoardでUISegmentedControlを作成し、1のクラスを設定
スクリーンショット 2019-04-09 0.35.23.png

###4.2のプロパティにカラーを設定
スクリーンショット 2019-04-09 0.35.37.png

これで実行すればSegmentedControlの色を変更できます。

##おまけ
ユースケースとして、StoryBoardからだけでなく、ソースコードからもカラーを変更したくなるかもしれません。
そんな時はviewDidLoadあたりでsegmentColorに直接カラーをぶち込んで下さい。
そんなの当たり前だよと突っ込まれそうですが。。。

omake.swift
override func viewDidLoad() {
        super.viewDidLoad()
        segmentV.segmentColor = .red
    }
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?