UITabBarをエリア分け、スクロールしたい（xcode）

Question

やりたいこと

swiftでアプリ開発をしています。その中で、UITabBarをカスタマイズしたいと考えています。

実現したいタブバーの動画↓
![

まず、タブバーアイテムがスクロールしています。
そして、薄い縦線のようなもので区切られた一番右のタブバーアイテムは、
そのスクロールに干渉されていないような作りになっています。
また、分かりづらいですが、一番左のタブバーアイテムはある閾値を超えるとスクロールについていくようになっています。

1 TabBarの中で薄い縦線のようなものでエリアを区切る方法
2 TabBarItemを横スクロールする方法
を探しています。

実装方法をご存じの方いましたら、教えていただきたいです。
よろしくお願いします。

開発環境

Xcode 12.4
Mac 10.15.7
iOS 14.4

Comments

[hoshi-takanori]

このへんのライブラリを使えばいいのでは。
https://github.com/HeshamMegid/HMSegmentedControl

[TsukubaDepot]

hoshi-takanoriさん
すいません、また行き違いになってしまいました。
質問者さんは tabBar ではなくて、スクロール可能なメニューバーを期待されているような気がしました。

Answer 1

イメージキャプチャから想像するに、GoodNotes 5 のようなインタフェースを考えているんだと思います。
そのアプリは使ったことはありませんが、いくつかの動画をみると、スライド可能なアイテムバーから構成されている感じです。

たぶん、ご希望の実装はこんな感じになるのではないでしょうか。
あくまでも動画から得られる情報だけで再現しています。

具体的には、左右に UIButton, 区切りは背景色のある UIView、アイテムバーの部分は UIScrollView で構成しています。

StoryBoard や AutoLayout を使うと記述が増えるので、絶対値指定で作っていますが、たぶん標準的なデバイスであれば大丈夫だと思います。

完全に興味と即興で作ったので高度なことは期待していただきたくありませんが、おそらく基本的な要素は揃っていると思います。

概要はコメント中に記入していますので、詳しくはそちらを参考にしていただけますでしょうか。

import UIKit

// Scroll View に表示するカスタムセル
class ItemCell: UICollectionViewCell {
    private var image: UIImageView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setup() {
        image = UIImageView(frame: CGRect(x: 0,
                                          y: 0,
                                          width: self.frame.width,
                                          height: self.frame.height))
        self.contentView.addSubview(image)
    }
    
    func setImage(icon: UIImage) {
        image.image = icon
    }
}

class ViewController: UIViewController {
    var barItems = (10...20).map { String($0) }
    
    // 上部の背景
    lazy var baseView:UIView = {
        let bv = UIView()
        bv.backgroundColor = .systemTeal
        return bv
    }()
    
    // 左ボタン
    lazy var leftButton: UIButton = {
        let bt = UIButton(type: .system)
        bt.imageView?.contentMode = .scaleAspectFit
        bt.contentHorizontalAlignment = .fill
        bt.contentVerticalAlignment = .fill
        bt.isEnabled = false
        return bt
    }()
    
    //右ボタン
    lazy var rightButton: UIButton = {
        let bt = UIButton(type: .system)
        bt.setTitle("Button", for: .normal)
        return bt
    }()
    
    // 左区切り
    lazy var leftSeparator:UIView = {
        let bv = UIView()
        bv.backgroundColor = .gray
        return bv
    }()
    
    // スクロールビュー
    lazy var itemBarCollectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 50, height: 50)
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.scrollDirection = .horizontal
        let sv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        sv.dataSource = self
        sv.delegate = self
        sv.isScrollEnabled = true
        sv.backgroundColor = .clear
        return sv
    }()
    
    // 右区切り
    lazy var rightSeparator:UIView = {
        let bv = UIView()
        bv.backgroundColor = .gray
        return bv
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = .white
        self.view.addSubview(baseView)
        
        baseView.addSubview(leftButton)
        baseView.addSubview(leftSeparator)
        baseView.addSubview(itemBarCollectionView)
        baseView.addSubview(rightSeparator)
        baseView.addSubview(rightButton)
        
        leftButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        rightButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

        itemBarCollectionView.register(ItemCell.self, forCellWithReuseIdentifier: "ItemCell")
    }
    
    @objc func buttonTapped(_ sender: UIButton) {
        if sender == leftButton {
            let item = sender.tag + 10
            print("左ボタンが押された（アイテム番号(item)）")
        } else {
            print("右ボタンが押された")
        }
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        let topInset = self.view.safeAreaInsets.top
        let edgeInset: CGFloat = 8
        let height: CGFloat = 50
        let width = height
        let screenWidth = self.view.frame.width
        
        baseView.frame = CGRect(x: 0, y: 0, width: screenWidth, height: height + topInset)
        leftButton.frame = CGRect(x: edgeInset, y: topInset, width: height, height: height)
        leftSeparator.frame = CGRect(x: edgeInset + width + 2,
                                     y: topInset + 4,
                                     width: 1, height: height - 8)
        itemBarCollectionView.frame = CGRect(x: edgeInset + width + 5, y: topInset,
                                             width: screenWidth - (width + edgeInset + 5) * 2,
                                             height: height)
        rightSeparator.frame = CGRect(x: screenWidth - (width + edgeInset + 1),
                                      y: topInset + 4,
                                      width: 1, height: height - 8)
        rightButton.frame = CGRect(x: screenWidth - (width + edgeInset),
                                   y: topInset,
                                   width: width, height: height)
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return barItems.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ItemCell", for: indexPath) as! ItemCell
        
        cell.setImage(icon: UIImage(systemName: barItems[indexPath.row] + ".circle")!)
        
        return cell
    }
}

extension ViewController: UICollectionViewDelegate {
    // 自動スクロールが終了した場合
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        print(#function)
        
        snap(scrollView)
    }
    
    //　ドラッグが終了した場合
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        print(#function)
        
        // decelerate == true の場合は、自動スクロールが続いている状態
        // その場合は、自動スクロールが終了した時点で scrollViewDidEndDecelerating(_:)が呼ばれる
        if decelerate == false {
            // ドラッグ終了の場所で止めた場合
            snap(scrollView)
        }
    }
    
    private func snap(_ scrollView: UIScrollView) {
        let height = Int(scrollView.frame.height)
        let contentWidth = Int(scrollView.contentSize.width)
        let padding = contentWidth / barItems.count - Int(height)
        
        var item = Int(scrollView.contentOffset.x) / (50 + padding)
        
        // アイコンの前半部分でスクロールが終わった場合には、そのアイコンを全て表示
        // 後半の場合には、次のアイコンに移動させる
        if Int(scrollView.contentOffset.x) % (height + padding) < height / 2 {
            UIView.animate(withDuration: 0.5) {
                scrollView.contentOffset.x = CGFloat((height + padding) * item)
            }
        } else {
            item += 1
            UIView.animate(withDuration: 0.5){
                scrollView.contentOffset.x = CGFloat((height + padding) * item)
            }
        }
        
        // 今回は、item の番号が奇数の時だけ左ボタンにアイテムを設定している
        if item > 0 && item % 2 == 1 {
            leftButton.setImage(UIImage(systemName: barItems[item] + ".circle")!, for: .normal)
            // tag 番号を使って選択したボタンの番号を伝える
            leftButton.tag = item
            leftButton.isEnabled = true
        } else if item == 0 {
            leftButton.setImage(nil, for: .normal)
            leftButton.isEnabled = false
        }
    }
}

---

追記

とある方からのコメントでちょっと変更を加えてみました。

        // 今回は、item の番号が奇数の時だけ左ボタンにアイテムを設定している
        if item > 0 && item % 2 == 1 {
            UIView.transition(with: leftButton, duration: 0.4, options: .transitionCrossDissolve) {
                self.leftButton.setImage(UIImage(systemName: self.barItems[item] + ".circle")!, for: .normal)
            } completion: { _ in
                self.leftButton.tag = item
                self.leftButton.isEnabled = true

            }
        } else if item == 0 {
            leftButton.setImage(nil, for: .normal)
            leftButton.isEnabled = false
        }

該当する部分を変更すると、左側のボタンがクロスディゾルブで変わるようになります。

Comments

[TsukubaDepot]

ちなみに、本質的なところは UICollectionView の部分となります。
コードは長いですが、 CollectionView、とくに dataSource や delegate だけを追っていけば理解しやすいかと思います。
ただ、スクロールの判定には親クラスである UIScrollView の delegate を使う必要があります。

[onigiriZ]

コメントありがとうございます。
uitabbarではなくcollectionviewを使う発想がありませんでした。
そして、実装コードまで載せてくださり、感謝しかありません。
実装してみたいと思います。

[TsukubaDepot]

UITabBarは画面下部に配置し、上部に配置した View Controller を切り替える目的で使います。
OS標準の部品で、その設置場所はガイドラインで割合厳しく指摘されているようですので、配置を変えると審査落ちする可能性が高くなると言われています（自分で使う分には問題ないと思いますが）。

GoodNotes 5 はダウンロードしていないので想像でやりましたが、おそらくツールバーに表示できないアイコンをスクロールさせて表示させているんだろうと思います。

一番左に表示させるアイコンの表示基準はわかりませんので、今回は奇数番目のアイテムだけ表示という方法でやりましたが、特定のアイコンだけ表示させるのは、判定基準を変えるだけなので、おそらくそれほど難しい話ではないと思います。

左に配置されたボタンはもちろん、CollectionView 上のアイコンもタップされたときの delegte を呼び出せば判定できますので、それほど難しい話ではないと思っています。

また、なるべく確実に再現できるよう、今回は全てコードベースでやってしまいましたが、もちろん StoryBoard で配置し制約をつけたり、あるいは配置と制約をコードベースでやっても問題ありません。

カスタムセルも xib は使わずにやってしまいましたが、xib などを使った方が楽な場合もあります。
一番厄介なのは、CollectionView に表示させるアイコンの数を規定する（padding や spacing を設定する）ことかもしれません。

いずれにしても、このコードをもとにご自由は発想で発展させていただければそれに越したことはありませんので、どんどん拡張していただければと思います。