Swift4.0學(xué)習(xí)筆記(十一)——分段選擇控件(UISegmentedControl)

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)方式。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 嗯哼嗯哼蹦擦擦~~~ 轉(zhuǎn)載自:https://github.com/Tim9Liu9/TimLiu-iOS 目錄 ...
    philiha閱讀 5,265評論 0 6
  • 什么叫天才? 小白解釋為:天賦的才能;卓絕的創(chuàng)造力、想象力、靈感;天造之才。 這么說,好像還看得懂。 但是過往的歷...
    小揚(yáng)輕輕閱讀 171評論 0 0
  • 以前會害怕時間會侵蝕彼此的情意。 原來這樣的擔(dān)心是有必要的,工作的忙碌與生活的庸擾,都會慢慢侵蝕一個人的內(nèi)心,可能...
    吳術(shù)閱讀 214評論 0 0
  • 之前大略知道這本書是講企業(yè)管理的,覺得可能會比較高大上、貌似看得懂但是又不知如何落地。 但是讀了一部分就被吸引了,...
    產(chǎn)品經(jīng)理文靜閱讀 389評論 0 0

友情鏈接更多精彩內(nèi)容