Question

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

Answer 1

您可以使用集合视图来创建这样的内容。

以下是如何操作：

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

不要忘记将scroll direction的{{1}}设置为collection view

<强> 2。将自定义集合视图单元类创建为

horizontal

第3。将ViewController类创建为：

    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


     }
}

输出屏幕为：

Answer 2

我实施的工作。

创建一个包含自定义标签栏的视图。

let tabView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60))
tabView.backgroundColor = UIColor(red: 45/255, green: 58/255, blue: 114/255, alpha: 1)
self.view.addSubview(tabView)

根据按钮的数量，决定按钮大小并将其添加为子视图。（在此处取2）

firstButton = UIButton(type: .Custom)
firstButton.frame = CGRect(x: 0, y: 20, width: tabView.frame.size.width / 2, height: 30)
firstButton.setTitle("BUT 1", forState: .Normal)
firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)
firstButton.addTarget(self, action: #selector(ViewController.firstButtonTapped), forControlEvents: .TouchUpInside)

tabView.addSubview(firstButton)

secondButton = UIButton(type: .Custom)
secondButton.frame = CGRect(x: tabView.frame.size.width / 2, y: 20, width: tabView.frame.size.width / 2, height: 30)
secondButton.setTitle("BUT 2", forState: .Normal)
secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
secondButton.addTarget(self, action: #selector(ViewController.secondButtonTapped), forControlEvents: .TouchUpInside)

tabView.addSubview(secondButton)

添加一个小UIView，用作按钮下方的一行。

 lineView = UIView()
lineView.frame = CGRect(x: 0, y: CGRectGetMaxY(tabView.frame) - 3, width: tabView.frame.size.width / 2, height: 3)
lineView.backgroundColor = UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0)

tabView.addSubview(lineView)

在滚动视图中制作以下视图。

 self.scrollView.frame = CGRectMake(0, CGRectGetMaxY(tabView.frame), self.view.frame.width, self.view.frame.height)
self.scrollView.backgroundColor = UIColor.whiteColor()
self.scrollView.delegate = self
self.scrollView.pagingEnabled = true

self.view.addSubview(self.scrollView)

let aScrollViewWidth = self.scrollView.frame.width
let aScrollViewHeight = self.scrollView.frame.height
self.scrollView.contentSize = CGSizeMake(aScrollViewWidth * CGFloat(2), aScrollViewHeight)

一个接一个地添加您的视图。为了示例，我只是添加了一个UITextView。

for anIndex in 0  ..< 2  {

    let anEssayTextView = UITextView(frame: CGRectMake(aScrollViewWidth * CGFloat(anIndex), 0, aScrollViewWidth, aScrollViewHeight))
    anEssayTextView.text = essays[anIndex]
    anEssayTextView.editable = false
    self.scrollView.addSubview(anEssayTextView)

}

ScrollView委托功能

 func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)

if (pageNumber == 0) {
    firstButtonTapped()
} else {
    secondButtonTapped()
}
}

按钮操作

func firstButtonTapped() {

firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)
secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)

if (self.lineView.frame.origin.x != 0) {

    UIView.animateWithDuration(0.25) {

        self.lineView.frame.origin.x -= self.tabView.frame.size.width / 2

    }

}

scrollView.setContentOffset(CGPointMake(0, 0), animated: true)

pageNumber = 0

}


func secondButtonTapped() {

firstButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
secondButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal)

if (self.lineView.frame.origin.x != self.tabView.frame.size.width / 2) {

    UIView.animateWithDuration(0.25) {

        self.lineView.frame.origin.x += self.tabView.frame.size.width / 2

    }

}

scrollView.setContentOffset(CGPointMake(self.scrollView.frame.size.width, 0), animated: true)

pageNumber = 1

}

创建自定义选项卡栏

2 个答案: