创建自定义标签栏
Creating a Custom Tab Bar
我想在顶部创建一个自定义标签栏。就像9gag一样。你知道我可以学习如何做的地方吗? (文档或视频教程)谢谢
9gag custom tab bar
我实施的一项工作。
创建一个具有自定义标签栏的视图。
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)
根据按钮的个数,决定按钮的大小,添加为subview。(这里取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
}
您可以使用集合视图来创建类似这样的内容。
操作方法如下:
- 创建您的
ViewController
界面,如下面的屏幕截图所示:
不要忘记将 collection view
的 scroll direction
设置为 horizontal
2。创建自定义集合视图单元格 class as
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 class 创建为:
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
}
}
输出画面为:
我想在顶部创建一个自定义标签栏。就像9gag一样。你知道我可以学习如何做的地方吗? (文档或视频教程)谢谢 9gag custom tab bar
我实施的一项工作。
创建一个具有自定义标签栏的视图。
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)
根据按钮的个数,决定按钮的大小,添加为subview。(这里取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 }
您可以使用集合视图来创建类似这样的内容。
操作方法如下:
- 创建您的
ViewController
界面,如下面的屏幕截图所示:
不要忘记将 collection view
的 scroll direction
设置为 horizontal
2。创建自定义集合视图单元格 class as
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 class 创建为:
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
}
}
输出画面为: