創建自定義標籤欄

我想在頂部創建自定義標籤欄。就像9gag。你知道我可以學習如何做的地方嗎？（documentiation或視頻教程）謝謝 9gag custom tab bar 創建自定義標籤欄

2016-11-11 Volkan Elçi

你可以檢查它是否有效[https://github.com/uacaps/PageMenu] –

圍繞其實施的工作。

創建一個視圖以擁有自定義選項卡欄。

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) 

}

滾動型委託功能

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 

}

來源

2016-11-11 16:14:06 nothingwhatsoever

非常感謝！這幫了很多 –

請表示感謝！ – nothingwhatsoever

您可以使用集合視圖來創建這樣的事情。

這裏是如何做到這一點：

創建ViewController接口一樣顯示在下面的截圖：

不要忘記設置scroll direction的collection view至horizontal

2.創建自定義集合觀察室類爲

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.創建視圖控制器類爲：

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 
    } 
}

輸出畫面：

來源

2016-11-11 16:33:43 PGDev

是的。這看起來不錯。如果您分享代碼，我將不勝感激。謝謝 –

創建自定義標籤欄

回答

相關問題