Swift - タグのようなUIを作る方法

作るもの

今回は「TagListView」というライブラリを使って選択可能のタグのようなUIを作ります。

完成イメージ

事前準備

xcodeのメニューバーのFile > Add Packages...からTagListViewを追加しましょう。

検索窓に

github.com/ElaWorkshop/TagListView.git

と入力すると出てきます。

実装手順

1.TagListViewを追加

まずはStoryboardにUIViewを追加します。

UIViewを追加したらCustom ClassにTagListViewと入力しましょう。

2.見た目をカスタム

右側のAttributes Inspectorからタグのスタイルを整えていきます。

タグの色や内側・外側の余白はここから設定します。

完成コード

ViewController

import UIKit
import TagListView

class ViewController: UIViewController, TagListViewDelegate {

    @IBOutlet weak var tagListView: TagListView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tagListView.textFont = UIFont.systemFont(ofSize: 20)
        tagListView.addTags(["タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ", "タグ", "タグタグ", "タググ", "タグタグタグ"])
        tagListView.delegate = self
    }
    
    func tagPressed(_ title: String, tagView: TagView, sender: TagListView) {
        if tagView.textColor == UIColor(named: "DarkColor")! {
            tagView.textColor = UIColor(named: "LightColor")!
            tagView.tagBackgroundColor = UIColor(named: "DarkColor")!
        } else {
            tagView.textColor = UIColor(named: "DarkColor")!
            tagView.tagBackgroundColor = UIColor(named: "LightColor")!
        }
    }
}

ポイント

文字のスタイル設定

tagListView.textFont = UIFont.systemFont(ofSize: 20)

ほとんどの見た目はAttributes Inspectorからカスタムすることができますが、文字のスタイルはコードで指定する必要があるようです。

選択可能にする

選択可能のタグにするには、

TagListViewDelegate

をViewControllerに追加し、

TagListView.delegate = self

をviewDidLoadに記述する必要があります。

選択時の切り替え

func tagPressed(_ title: String, tagView: TagView, sender: TagListView) {
    if tagView.textColor == UIColor(named: "DarkColor")! {
        tagView.textColor = UIColor(named: "LightColor")!
        tagView.tagBackgroundColor = UIColor(named: "DarkColor")!
    } else {
        tagView.textColor = UIColor(named: "DarkColor")!
        tagView.tagBackgroundColor = UIColor(named: "LightColor")!
    }
}

このメソッドがタグをタップするたびに呼ばれます。
タグの色で選択されたかどうかを判断し、色が切り替わるようにしています。

参考記事

https://github.com/ElaWorkshop/TagListView