「興味・関心のあるカテゴリー選択」画面の実装方法

Question

前提・実現したいこと

アプリを最初にインストールした際などに表示される「興味・関心のあるカテゴリー選択」の画面

試したこと

上記の画像のような「興味・関心のあるカテゴリー選択」の画面を作成したいのですが、どのように実装をすれば良いかわからないためご教示いただきたく思います

私が現時点で考えているのは、

• ボタン作成の内容をFor文で回しカテゴリーごとにうまく表示されるようにする

というものです

しかしながら、検索をしたところ上記の実装方法が見つからなかったため、おすすめのサイトや同様の質問、または私の考えている方法よりも良い方法がありましたら、案内していただけますと幸いです

解決・追記

Ranfordさんのコードを参考に実装したところ、無事に以下のように実装できました！
ありがとうございます

![]

加えてそれぞれのボタンに対しクリックされた際に色をつける動作をしたかったため、色々試行錯誤していたのですが、以下の記述で解決できました

@objc func buttonEvent(_ sender: UIButton) {
        if !sender.isSelected {
            sender.backgroundColor = UIColor.gray
        } else {
            sender.backgroundColor = UIColor.clear
        }
        sender.isSelected.toggle()
    }

Comments

[tomato879241]

自分でUIImageViewとUILabelをUIViewに加えるしかないのではないでしょうか？

[hoshi-takanori]

SwiftUI で flow layout ということなら、これとか？
https://swiftuirecipes.com/blog/flow-layout-in-swiftui

Answer 1

// 要素配列
let array = ["????動物","????コメディ","????スポーツ","????ゲーム","????動物動物","????コメディ","????スポーツ","????ゲームゲーム","????動物","????コメディコメディ","????スポーツスポーツ","????ゲーム"]
// 改行の基準
let maxWidth = CGFloat(300)
// 隙間
let offset = CGFloat(16)
// 先頭か
var lead = true
// 初期位置
var point = CGPoint(x: offset, y: offset)

// UIViewController の viewDidLoad() とかで
for (index, title) in array.enumerated() {
    let button = UIButton(frame: CGRect.zero)
    button.tag = index
    button.setTitle(title, for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.sizeToFit()

    // 角丸枠
    button.layer.cornerRadius = button.frame.height * 0.4
    button.layer.borderColor = UIColor.black.cgColor
    button.layer.borderWidth = 1.0;

    // 先頭ではなく、配置しようとしているボタンが基準を超える場合は改行する
    if lead == false, maxWidth < point.x + button.frame.width {
        point.x = offset
        point.y += button.frame.height + offset
    }
    button.frame.origin = point

    // self = UIViewController
    self.view.addSubview(button)

    // 位置の更新
    point.x += button.frame.width + offset
    lead = maxWidth < point.x ? true : false
    if lead {
        point.x = offset
        point.y += button.frame.height + offset
    }
}

// 改行の基準の表示
let view = UIView(frame: CGRect(x: maxWidth, y: 0, width: 1, height: point.y))
view.backgroundColor = .black
self.view.addSubview(view)

Comments

[mayo_]

改行基準のコードも記載いただきありがとうございます！
無事に画像のようなボタンを配置することができました！ありがとうございます！

上記に加え大変お手数なのですが、追加でお聞きしたい事があります
それぞれのボタンが押された時に該当のボタンのBackColorを変更したいのですが、どのボタンを押しても最後に生成されたボタンの色が変更されてしまいます

現状、以下のようにコードを書いています
-----------------------
var buttonEv = UIButton() // viewDidLoad()より上で指定

〜

self.view.addSubview(button)
buttonEv = button // ここに入れることでButton情報を渡せると思いきやできない

// ボタンを押した時に実行
button.addTarget(self, action: #selector(buttonEvent(_:)), for: UIControl.Event.touchUpInside)

　　} // for文
} // viewDidLoad()

// ボタンが押された時に呼ばれるメソッド
@objc func buttonEvent(_ sender: UIButton) {
buttonEv.backgroundColor = UIColor.gray
}
-----------------------
どのように改善を行えば良いかアドバイスいただけますと幸いです
よろしくお願いいたします

[Ranford]

buttonEv は不要です。
最後に生成されたボタンが変更されてしまうのは、for文の中でボタンが毎回上書きするからです。
buttonEvent() の sender が押されたボタンなので、
「sender.backgroundColor = UIColor.gray」とすれば押されたボタンの背景色が変更されます。

しかし、これではON/OFFの切替がやりたくなってきます。
そこで、buttonEvent() では「sender.isSelected = !sender.isSelected」で選択状態を反転し代入します。
UIButtonの生成時にsetTitleColor()とsetBackgroundImage()を使用して「.normal」と「.selected」の設定を行なってください。
button.setTitleColor(.black, for: .normal)
button.setTitleColor(.white, for: .selected)
button.setBackgroundImage(UIImage(named: "通常時"), for: .normal)
button.setBackgroundImage(UIImage(named: "選択時"), for: .selected)
UIImage(named:)で使用する画像素材はAssets.xcassetsで追加します
また、画像素材は sizeToFit() 後の button.frame.size にリサイズしてあげる必要が有ります。

Answer 2

この目的であれば OSS を使った方が早いと思います（もちろん、スクラッチから作ることは否定しません）。

• TagListView

あまり高機能なライブラリではありませんが、それなりにこまめにメンテされているようです。

もちろん、機種ごとの画面サイズにも考慮されています。

IBDesineble なので、StroyBoard を使って設定できますが、もちろんコードベースでも実装可能です。

ボタンを押されたときの処理は delegate になっているので、tagPressed(_:tagView:sender:) で処理すれば大丈夫です。

import UIKit
import TagListView

class ViewController: UIViewController {
    let tagListView = TagListView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        view.addSubview(tagListView)
        
        addTags()
        tagListView.delegate = self
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        tagListView.translatesAutoresizingMaskIntoConstraints = false
        tagListView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        tagListView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 12).isActive = true
        tagListView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 12).isActive = true
        tagListView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    }

    private func addTags() {
        let array = ["????動物", "????コメディ", "????スポーツ", "????ゲーム", "????動物動物", "????コメディ", "????スポーツ",
                     "????ゲームゲーム", "????動物", "????コメディコメディ", "????スポーツスポーツ", "????ゲーム"]

        // フォントの選択
        tagListView.textFont = .preferredFont(forTextStyle: .body)
        // タグの配置方法
        tagListView.alignment = .left
        
        // タグ内部の上下左右に付ける余白（Inset）
        tagListView.marginX = 9
        tagListView.marginY = 12
        
        // タグ間の Padding
        tagListView.paddingY = 5
        tagListView.paddingX = 7
        
        // タグの背景色をテキスト色
        tagListView.tagBackgroundColor = .white
        tagListView.textColor = .black
        
        // タグのボーダ幅と色
        tagListView.borderWidth = 1
        tagListView.borderColor = .lightGray
        
        // タグに影を付ける
        tagListView.shadowOpacity = 0.4
        tagListView.shadowColor = UIColor.black
        tagListView.shadowOffset = CGSize(width: 2, height: 2)
        
        // タグの追加
        tagListView.addTags(array)
        
        // タグを角丸にする
        // 基本決めうちだが、実際の高さを取得して決めるのであればこの方法しかないかもしれない
        tagListView.cornerRadius = tagListView.tagViews.first!.frame.height / 2
    }
}

extension ViewController: TagListViewDelegate {
    func tagPressed(_ title: String, tagView: TagView, sender: TagListView) {
        print("Tag pressed: (title), (sender), (tagView)")
        // 一度全てのタグの背景を元の色に戻す
        tagListView.tagBackgroundColor = .white
        // 選択したタグだけ色を変える
        tagView.tagBackgroundColor = .systemGray4
    }
}