【Swift】UISegmented Controlを使って簡易的なタブを作る

私は今まで使う機会がなかったのか、使いにくいのかわからないですが

UISegmented Controlを使ってませんでした。

こんなやつです。

UISegmented Controlの利点

このUISegmented Controlの使いやすい点として以下があります。

さくっと複数のボタンを作れ押されたボタンによって

アクションを変えるのが非常に簡単です。

カスタムするには正直UIButtonのがいいような感じがしますが、

ここもさくっとご紹介します。

UIの作成

今回は簡易的なタブの作り方をご紹介します。

まずはプロジェクトを作成してMainStoryboardにUISegmented Controlを

置いてやってください。

下の画像の様にUISegmented Control、UITableView, Cellを配置してください。

cellのidentifierの設定を忘れずに。。私はcellって名前にしました。

こんな感じです。

UISegmented Controlの設定

(ここは飛ばしても構いません)

以下2点を変更していきます。

Segmentの数がデフォルトの2つではつまらないので3つにします。

それぞれのTitleもFirst、Secondでつまらないのでここも変更します。

ざっくり赤い枠の中を変更していくと形が変更していきます。

ここは任意で変更してみてください！

その後全てViewControllerに紐付けてください！

class ViewController: UIViewController {
    @IBOutlet weak var segmentControl: UISegmentedControl!
    @IBOutlet weak var tableView: UITableView!
    @IBAction func selectedSegment(_ sender: UISegmentedControl) {
        
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

こんな感じになっていればいいかと思います。

UITableViewの表示の設定

表示の設定をサックとしていきます。

設定の仕方は

こちらの記事を参考にしていただければと思います。

【Swift 初心者】TableViewを表示させるのに１番早い記事 他にもたくさん同じ様な記事があると思いますが、こちらの記事がおそらく tableViewを表示させるのに最速の方法です。 ...

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var segmentControl: UISegmentedControl!
    @IBOutlet weak var tableView: UITableView!
    @IBAction func selectedSegment(_ sender: UISegmentedControl) {
        
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        // Do any additional setup after loading the view.
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 8
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = "test"
        return cell
    }
}

ここまでで、一度ビルドしてみてください。

試しに入れたtestという文字のcellが出ていればここまでは順調です。

次がようやくUISegmented Controlの見せどころです。

Segmentをtapしたらそれぞれ文字を変更させます

cellの設定

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

//ここから追加
    let segmentIndex = segmentControl.selectedSegmentIndex
    switch segmentIndex {
    case 0:
        cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
    case 1:
        cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
    case 2:
        cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
    default:
        return UITableViewCell()
    }
    return cell
////ここまで
}

segmentを選択した時にtableViewのリロード

@IBAction func selectedSegment(_ sender: UISegmentedControl) {
//////追加
    tableView.reloadData()
//////
}

やってることを説明します！

全体のコード

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var segmentControl: UISegmentedControl!
    @IBOutlet weak var tableView: UITableView!
    @IBAction func selectedSegment(_ sender: UISegmentedControl) {
        tableView.reloadData()
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        // Do any additional setup after loading the view.
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 8
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        let segmentIndex = segmentControl.selectedSegmentIndex
        switch segmentIndex {
        case 0:
            cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
        case 1:
            cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
        case 2:
            cell.textLabel?.text = segmentControl.titleForSegment(at: segmentIndex)
        default:
            return UITableViewCell()
        }
        return cell
    }
}

ビルド

めっちゃ簡単ですね！

誰かこの記事をみていることを願い来週もまた書きます。

まさを。

ABOUT ME

goto

海外事業担当兼iOSエンジニア。 元々海外に行くことが好きで、海外で知り合った方に、CEO馬谷の話を聞き2019年2月に株式会社Playgroundに入社。 今も海外での生活、海外での仕事に憧れている。 今個人的にプライベートで行きたい国はイスラエルとポーランド。