swift - 创建自定义标签栏

Question

我想在顶部创建一个自定义标签栏。就像9gag一样。你知道我可以学习如何做的地方吗？ (文档或视频教程)谢谢 9gag custom tab bar

Answer 1

您可以使用 Collection View 来创建类似这样的东西。

方法如下:

1. 创建您的 ViewController 界面，如下面的屏幕截图所示:

不要忘记将 collection view 的滚动方向设置为水平

<强>2。将自定义 Collection View 单元类创建为

    import UIKit


    class CustomCollectionViewCell: UICollectionViewCell
    {
        //MARK: Outlets
        @IBOutlet private weak var titleLabel: UILabel!
        @IBOutlet private weak var blueDividerLineImageView: UIImageView!

        //MARK: Overridden Properties

    override var isSelected: Bool{
        willSet{
            super.isSelected = newValue
            if newValue
            {
                self.titleLabel.textColor = UIColor(red: 0.0/255.0, green: 122.0/255.0, blue: 255.0/255.0, alpha: 1.0)
                self.blueDividerLineImageView.isHidden = false
            }
            else
            {
                self.titleLabel.textColor = UIColor.black
                self.blueDividerLineImageView.isHidden = true
            }
        }
    }

    //MARK: Internal Properties
    var titleString : String?{
        get{
            return self.titleLabel.text
        }
        set{
            self.titleLabel.text = newValue
        }
    }

    //MARK: View Lifecycle Methods
    override func awakeFromNib()
    {
        self.titleLabel.text = nil


     }
}

<强>3。将您的 ViewController 类创建为:

import UIKit

class ViewController: UIViewController
{
    @IBOutlet weak var customCollectionView: UICollectionView!

    let tabsArray = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5"]

    override func viewDidLoad()
    {
    }

    override var prefersStatusBarHidden: Bool{
        return true
    }
}

// MARK: - UICollectionViewDataSource, UICollectionViewDelegate Methods
extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate
{
    //MARK: UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return self.tabsArray.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
        cell.titleString = self.tabsArray[indexPath.row]
        return cell
    }

    //MARK: UICollectionViewDelegate
    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
    {
        //For initially highlighting the first cell of "customCollectionView" when ViewController is loaded
        guard let _ = collectionView.indexPathsForSelectedItems?.first, indexPath.row != 0 else
        {
            cell.isSelected = true
            collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .left)
            return
        }
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
    {
        collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally)
        print("\(self.tabsArray[indexPath.row]) Pressed")

        //Do your task here..whatever you want to do when pressing the tabs
    }
}

输出屏幕是: