0

UISegmentControlについて質問になります。
添付画像のようなSegmentControlにおいて、「First」選択時に全体のサイズを変更せずに、
「Fisrt」の幅を広くし、「second」の幅を狭めることは可能なのでしょうか。

以上になります。みなさんよろしくおねがいします。

画像の説明をここに入力

2
  • 選択状態でセグメントの幅を変えるのはもしかして、「どっちが選択されているのか分かりにくい」というのが理由だったりしますか?UISegmentedControlはセグメントが2つのみの場合この問題が発生します。その場合、UISwitchやチェックボックスなど別のUIにすることも検討した方がいいかもしれません。(幅が変化するUISegmentedControlにiOSユーザーは慣れていないので) Commented 2019年4月16日 7:13
  • 実際はタブのように表示して、選択されているセグメントの幅を他よりも少し大きくし強調したいといった形です。
    – sergi
    Commented 2019年4月18日 1:08

1 件の回答 1

1

UISegmentedControlの公開APIには、特に選択/非選択で幅を変更するようなものは見当たりませんが、各セグメントの幅を個別に設定することはできるようなので、ちょっとしたコードを書いてやれば実現できるかと思います。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var segmentedControl: UISegmentedControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        let normalAttr: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 12)
        ]
        segmentedControl.setTitleTextAttributes(normalAttr, for: .normal)
        let selectedAttr: [NSAttributedString.Key: Any] = [
            .font: UIFont.boldSystemFont(ofSize: 18)
        ]
        segmentedControl.setTitleTextAttributes(selectedAttr, for: .selected)

        segmentedControl.addTarget(self, action: #selector(segementValueChanged), for: .valueChanged)
        segementValueChanged(segmentedControl)
    }

    @objc func segementValueChanged(_ sender: UISegmentedControl) {
        for i in 0..<sender.numberOfSegments {
            let width: CGFloat = sender.selectedSegmentIndex == i ? 80 : 60
            sender.setWidth(width, forSegmentAt: i)
        }
        //...
    }

    //...
}

※Storyboard上でUISegmentedControl全体の幅を、選択状態のセグメントの幅(上の例では80が1個)と非選択状態のセグメントの幅(上の例では60が1個)の合計(=140)にしておきます。
※また、UISegmentedControlのactionはStoryboard上では接続していないと言う想定です。

First selected
Second selected

この例では選択状態のテキストのフォントと非選択状態のテキストのフォントを区別していますが、その部分が不要ならlet normalAttr...からの8行は不要です。

1
  • やりたいこととしましてはご教示頂いた内容でイメージできたので 少し試してみます。
    – sergi
    Commented 2019年4月18日 1:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。