1.定義控件
先舉一個純文本的實例
let tags = ["理財","轉(zhuǎn)讓","預(yù)約"] as [Any]
let segmented = UISegmentedControl(items: tags)
segmented.layer.position = CGPoint(x: self.view.bounds.size.width/2, y: 100)
segmented.selectedSegmentIndex = 0//默認(rèn)第一個被選中
self.view.addSubview(segmented)
定義控件
再舉一個純圖片的例子云挟，當(dāng)然圖片和文本可以一起用
let tags = [UIImage(named: "voice-")!,UIImage(named: "voice")!,UIImage(named: "voice+")!] as [Any]
圖片items
2.添加事件
segmented.addTarget(self, action: #selector(segmentDidchange(_:)), for: .valueChanged)
@objc func segmentDidchange(_ sender: UISegmentedControl){
print("index:\(sender.selectedSegmentIndex); title:\(sender.titleForSegment(at: sender.selectedSegmentIndex))")
}
添加事件
3.添加和刪除選項
let tags = ["理財","轉(zhuǎn)讓","預(yù)約"] as [Any]
let segmented = UISegmentedControl(items: tags)
segmented.layer.position = CGPoint(x: self.view.bounds.size.width/2, y: 100)
segmented.selectedSegmentIndex = 0//默認(rèn)第一個被選中
segmented.addTarget(self, action: #selector(segmentDidchange(_:)), for: .valueChanged)
//添加文字選項
segmented.insertSegment(withTitle: "借款", at: 2, animated: true)
//添加圖片選項
segmented.insertSegment(with: UIImage(named:"alarm")!, at: 3, animated: true)
//刪除選項
segmented.removeSegment(at: 0, animated: true)
self.view.addSubview(segmented)
增刪選項
4.修改選項文字和顏色
let tags = ["理財","轉(zhuǎn)讓","預(yù)約"] as [Any]
let segmented = UISegmentedControl(items: tags)
segmented.layer.position = CGPoint(x: self.view.bounds.size.width/2, y: 100)
segmented.selectedSegmentIndex = 0//默認(rèn)第一個被選中
segmented.addTarget(self, action: #selector(segmentDidchange(_:)), for: .valueChanged)
//添加圖片選項
segmented.insertSegment(with: UIImage(named:"alarm")!, at: 3, animated: true)
segmented.tintColor = UIColor.red
segmented.setTitle("理財", forSegmentAt: 1)
self.view.addSubview(segmented)
修改選項樣式
5.保留圖片顏色
上面一步操作圖片的顏色也一起被設(shè)置成了紅色（原本藍(lán)色）忆畅，大多數(shù)情況是不希望圖片顏色被修改，可以通過下面的方法保留圖片原來的顏色
segmented.setImage(UIImage(named:"alarm")?.withRenderingMode(.alwaysOriginal), forSegmentAt: 3)
保留圖片原色
6.修改選項文本偏移量
segmented.setContentOffset(CGSize(width:3, height:2), forSegmentAt: 1)
修改偏移量
可以把值設(shè)置為負(fù)數(shù)
segmented.setContentOffset(CGSize(width:-3, height:2), forSegmentAt: 1)
修改偏移量1
使用Segmented Control實現(xiàn)多個View切換
1.實現(xiàn)原理
通過不同view的偏移量來實現(xiàn)view的切換
2.先定義兩個簡單的view
FirstView.swift
import UIKit
class FirstView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.green
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
label.text = "第一個Segment"
label.textColor = UIColor.black
self.addSubview(label)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
SecondView.swift
import UIKit
class SecondView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.yellow
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
label.text = "第二個Segment"
self.addSubview(label)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
3.實現(xiàn)view加載
import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var segmented: UISegmentedControl!
var scrollView: UIScrollView!
var firstView : FirstView!
var secondView: SecondView!
var width: CGFloat!
var height: CGFloat!
override func viewDidLoad() {
super.viewDidLoad()
let tags = ["理財","轉(zhuǎn)讓"] as [Any]
width = self.view.bounds.size.width
height = self.view.bounds.size.height
segmented = UISegmentedControl(items: tags)
segmented.layer.position = CGPoint(x: self.view.bounds.size.width/2, y: 50)
segmented.selectedSegmentIndex = 0//默認(rèn)第一個被選中
segmented.addTarget(self, action: #selector(segmentDidchange(_:)), for: .valueChanged)
self.view.addSubview(segmented)
scrollView = UIScrollView(frame: CGRect(x: 0, y: 80, width: width, height: height - 80 ))
scrollView.delegate = self
scrollView.isPagingEnabled = true
scrollView.contentSize = CGSize(width: width * 2, height: height - 80 )
self.view.addSubview(scrollView)
firstView = FirstView(frame: CGRect(x: 0, y: 0, width: width, height: height - 80))
scrollView.addSubview(firstView)
//第二個view的x坐標(biāo)是從屏幕的寬度開始
secondView = SecondView(frame: CGRect(x: width, y: 0, width: width, height: height - 80))
scrollView.addSubview(secondView)
}
@objc func segmentDidchange(_ sender: UISegmentedControl){
if sender.selectedSegmentIndex == 0 {
scrollView.contentOffset.x = 0
}else{
scrollView.contentOffset.x = width
}
}
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.view.endEditing(true)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if scrollView.contentOffset.x >= width {
segmented.selectedSegmentIndex = 1
}else{
segmented.selectedSegmentIndex = 0
}
}
}
用例
上面實現(xiàn)的效果也可以通過滑動底部的view來切換view蕾管，截屏的時候忘了演示
上面講述了UISegmented Control基本的用法，以及其在具體應(yīng)用中的一個實例，當(dāng)然上面的例子這種實現(xiàn)方式只是此類功能的一種實現(xiàn)思路古劲，小伙伴們可以搜集一些資料，尋找一些功能性更強(qiáng)浙踢，效果更優(yōu)美的實現(xiàn)方式绢慢。
