UI第一周學習總結

ios開發之UI學習第一周總結

UIView基本屬性、方法、視圖關系、動畫

基本屬性和方法

UIView:是iOS中所有視圖(控件)直接/間接的父類;所以UIView的屬性和方法,對于其他類型的視圖都有效

視圖:在屏幕上能看見的所有的東西都屬于視圖

1.首先要創建UIview的對象

let redView = UIView.init()

如果想要將視圖展示在屏幕上的兩個必要條件:
(a).必須設置坐標和大小(默認坐標是(0,0),默認大小(0,0))
(b).將視圖添加到已經展示子屏幕上的視圖上
2.設置frame屬性(由坐標(下,y)和大小(width,height)兩部分組成)

redView.frame = CGRect(x: 10, y: 10, width: 100, height: 100)

注意iOS中所有的結構體都有一個對應的Make方法用來快速的創建一個結構體變量

redView.frame = CGRectMake(10, 10, 100, 100)

3.將視圖添加到界面

self.view.addSubview(redView)

4.設置背景顏色

redView.backgroundColor = UIColor.redColor()

創建背景顏色的方法有很多種,特別推薦三原色創建法,通過三原色來創建任意你想要的顏色,前提是你要知道紅綠藍的值,這個可以通過(數碼測色計)來查看
下面就是我們創建的視圖

![屏幕快照 2016-08-27 上午10.43.20.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 上午10.43.20.png)

下面我們來聊聊視圖的形變(transform)

當前視圖發生形變,那么添加到當前視圖上的所有的視圖會跟著一起形變
a.縮放
//參數1:x方向上的縮放比例
//參數2: y方向上的縮放比例

redView.transform = CGAffineTransformMakeScale(0.8, 2.5)

b.旋轉
//參數:旋轉角度(圓周率對應的角度值)

redView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4 / 2))

c.平移
//參數1:在x方向上平移的距離,負值->向左移,正值->向右移
//參數2:在y方向上平移的距離,負值->向上移,正值->向下移

 redView.transform = CGAffineTransformMakeTranslation(0, 300)

d.多個形變同時發生(在另外一個形變的前提下形變)
以下是在平移的前提下旋轉
//參數1:另外一個形變
//參數2:旋轉角度

redView.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.5, 0.5), CGFloat(M_PI_4 / 2))

以下我們來探討父子視圖關系

1.一個視圖只有一個父視圖,可以有多個子視圖
2.連續將同一個視圖添加到兩個視圖上,最后一次添加有效
我們將一個視圖添加到界面的時候會就會完美地呈現父子視圖

self.view.addSubview(redView)

selft.view就是redView的父視圖; redView就是self.view的子視圖

4.設置tag值,默認是0;設tag值的時候,值必須大于0;tag的作用:用來區分界面上不同的視圖

yellowView.tag = 101

如果我們想要通過tag值拿到指定的子視圖并且可以對它的尺寸進行修改

let subView2 = self.view.viewWithTag(101)
subView2?.frame.origin.y = 100

下面我們來接觸UIView動畫

UIView動畫就是視圖出現在界面上的出現方式,有從某個方向直接彈出來的,有的不停的在放大和縮小有的是慢慢的滑出來
視圖我們就不創建了;直接寫動畫方法,到時候直接調用就行
方法1.(在移動的過程中將視圖縮小并且改變視圖的顏色)

 func UIViewAnimation1() {
        
        //功能:執行這個方法前視圖的狀態,動畫的切換到閉包里面設置的最終狀態
        //參數1:動畫時間(單位:秒)
        //參數2:閉包,設置動畫結束時視圖的狀態
        UIView.animateWithDuration(2) {
            
            //在這兒來設置視圖動畫結束時的狀態
            //a.動畫的改變視圖的坐標
            self.subView.frame.origin.y = 50
            
            //b.動畫的改變視圖的大小
            //self.subView.frame.size = CGSizeMake(50, 50)
            self.subView.transform = CGAffineTransformMakeScale(0.5, 0.5)
            
            //c.動畫的改變視圖的背景顏色
            self.subView.backgroundColor = UIColor.redColor()
            
            //d.動畫的改變視圖的透明度(0~1)
            self.subView.alpha = 0.3
            
            
        }
        
        
    }

方法2.(在固定的范圍內循環移動)

func UIViewAnimation3() {
        
        //參數1:動畫時間
        //參數2:延遲時間
        //參數3:選項,Repeat->動畫重復執行,Autoreverse->自動回到動畫開始的狀態
        //參數4:設置動畫結束時視圖狀態的閉包
        //參數5:整個動畫過程完成后需要執行的閉包
        UIView.animateWithDuration(2, delay: 1, options: [ .Repeat, .Autoreverse], animations: {
            
                self.subView.transform = CGAffineTransformMakeTranslation(0, -200)
            
            }, completion: nil)
    }
    

方法3:(在原地像彈簧一樣縮放)

func UIViewAnimation4() {
        
        //參數1:動畫時間
        //參數2:延遲時間
        //參數3:彈簧的壓力系數
        //參數4:彈簧初始的加速度
        //參數5:選項
        //參數6:設置動畫結束時視圖的狀態
        //參數7:動畫結束后要執行的閉包
        UIView.animateWithDuration(2, delay: 1, usingSpringWithDamping: 0.1, initialSpringVelocity: 0, options: [ .Repeat, .Autoreverse], animations: {
            
            //注意:對于有圓角的視圖,改變大小而又不影響形狀,只能通過形變去縮放。不能直接改變frame中的size
                self.subView.transform = CGAffineTransformMakeScale(0.5, 0.5)
            
            }, completion: nil)
    }
    

UILabel基礎

從UIView繼承下來的屬性

1.創建UILabel對象

let label = UILabel.init(frame: CGRectMake(100, 100, 200, 300))

2.添加到界面上

 self.view.addSubview(label)

3.設置背景顏色

 label.backgroundColor = UIColor.yellowColor()

1.設置字體(字體大小默認是17)

label.font = UIFont.systemFontOfSize(24)

2.使用系統字體,設置字體大小和粗細
//參數1:字體大小
//參數2;字體粗細(0~1)

label.font = UIFont.systemFontOfSize(17, weight: 0.2)

3.使用斜體,設置字體大小

label.font = UIFont.italicSystemFontOfSize(17)

4.設置字體顏色

label.textColor = UIColor.redColor()

5.設置陰影顏色

label.shadowColor = UIColor.blackColor()

6.置陰影的偏移效果

label.shadowOffset = CGSizeMake(-1, -1)

7.設置字體的對齊模式(默認是左對齊)

label.textAlignment = .Center

8.設置換行模式
//ByWordrapping -> 以單詞為單位換行
//ByCharWrapping ->以字符為單位換行

label.lineBreakMode = .ByCharWrapping

UIImageView基礎

從UIView繼承下來的屬性和方法

1.創建UIImageView對象

let imageView = UIImageView.init(frame: CGRectMake(0, 100, 300, 300))

2.添加到界面上

self.view.addSubview(imageView)

3.設置背景顏色

imageView.backgroundColor = UIColor.yellowColor()

UIImageView專有的屬性

1.image屬性
a.通過圖片名去創建一個圖片對象(注意:如果圖片的格式是png,那么圖片名的后綴可以省略。但是其他格式的圖片的圖片名的后綴不能省略)

imageView.image = UIImage.init(named: "back2.jpg")

b.通過圖片路徑去創建一個圖片對象
將文件(除了swift文件)放到工程中,實質是放到了當前應用程序的包文件中;
想要拿到工程中的圖片路徑先要獲取包文件;); 就要拿到包中的指定的文件的路徑

let imagePath = NSBundle.mainBundle().pathForResource("back2", ofType: "jpg")
imageView.image = UIImage.init(contentsOfFile: imagePath!)

c.c.比較通過圖片名和通過圖片地址創建圖片對象的兩種方法:
(1).通過圖片名創建的圖片對象在程序結束后才會被銷毀,只會創建一次;通過圖片地址創建圖片對象是當前圖片對象不再使用的時候就銷毀
(2)使用圖片名創建圖片的情況:創建小圖標的時候;在工程中會重復使用的圖片
(3)使用圖片地址創建圖片對象的情況:不會頻繁的在多個界面出現的大圖
3.內容模式

imageView.contentMode = .ScaleToFill

UIImageView幀動畫

效果描述:使用幾張幀動畫圖片做到讓小鳥從模擬器上從左側飛向右側
1.創建一個定時器,并且自動開啟
參數1:定時時間
參數2:調用方法的對象
參數3:存儲定時時間到了以后需要調用的方法(可以不帶參也可以帶參,但是如果帶參只能帶一個參,并且參數類型是NSTimer類型)
參數4:給當前的NSTimer的userInfo屬性賦的值(一般寫nil)
參數5:是否重復
功能:每隔0.1秒,self去調用一次timerAction方法

NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: "timerAction:", userInfo: "aaa", repeats: true)

2.定時器方法
//參數:當前定時器

func timerAction(timer:NSTimer) {
        
        print(timer.userInfo)
        
        self.imageView.frame.origin.x += 3
        
        //判斷小鳥是否飛到了屏幕邊緣
        if self.imageView.frame.origin.x >= self.view.bounds.width - self.imageView.bounds.width {
            return
            //暫停定時器
            timer.fireDate = NSDate.distantFuture()
            //讓定時器繼續
            timer.fireDate = NSDate.distantPast()
            
        }
        
        
    }

3.創建imageview

func creatImageView()  {
       
        //1.創建一個UIImageView對象
        //通過圖片去創建一個imageView;UIImageView的大小是圖片的大小,坐標是(0,0)
        imageView = UIImageView.init(frame: CGRectMake(100, 100, 50, 50))
        imageView = UIImageView.init(image: UIImage.init(named: "DOVE 1.png"))
        //2.顯示在界面上
        self.view.addSubview(imageView)
        
        //3.使用UIImageView播放幀動畫
        //a.設置幀動畫數組
        //創建一個空的圖片數組
        var imageArray = [UIImage]()
        //通過for循環創建18張圖片
        for item in 1...18 {
            //拼接圖片名
            let imageName = "DOVE \(item).png"
            //創建對應的圖片
            let image = UIImage.init(named: imageName)
            //將圖片存到數組中
            imageArray.append(image!)
        }
        
        imageView.animationImages = imageArray
        
        //b.設置動畫時間,單位秒
        imageView.animationDuration = 1
        
        //c.設置動畫的重復次數(默認是0->無限循環)
        imageView.animationRepeatCount = 0
        
        //d.開始動畫
        imageView.startAnimating()
        
    }

    

UIButton基礎以及自制UIButton

Button有很多種,有圖片按鈕、文字按鈕、圖片文字按鈕
1.圖片按鈕

func imageButton() {
        
        //1.創建一個按鈕對象
        let imageBtn = UIButton.init(frame: CGRectMake(100, 200, 80, 80))
        //2.添加到界面上
        self.view.addSubview(imageBtn)
        
        //3.設置圖片
        //參數1:圖片
        //參數2:狀態(正常、高亮、選中、不可用)
        imageBtn.setImage(UIImage.init(named: "luffy1"), forState: .Normal)
        
        //4.添加按鈕點擊事件
        imageBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
        
        
    }
    

上邊的btnAction是調用的下邊的方法,文字按鈕和圖片文字按鈕一樣是調用了這個方法

//MARK: - 按鈕點擊
    func btnAction(btn:UIButton) {
        
        //CGFloat(arc4random()%256)/255
        //設置按鈕的背景顏色是隨機色
        btn.backgroundColor = UIColor.init(red: CGFloat(arc4random()%256)/255, green: CGFloat(arc4random()%256)/255, blue: CGFloat(arc4random()%256)/255, alpha: 1)
    }

2.下邊是文字按鈕,詳細解釋寫在代碼里

//MARK: - 文字按鈕
    func titleButton() {
        //UIButton:UIControl:UIView
        //UIButton上有一個titleLabel專門負責按鈕上文字的顯示;有一個imageView專門負責按鈕上圖片的顯示
        //=========UIView的屬性和方法========
        //1.創建UIButton對象
       let titleBtn = UIButton.init(frame: CGRectMake(100, 100, 100, 50))
       //2.添加到界面上
        self.view.addSubview(titleBtn)
        //3.設置背景顏色
        titleBtn.backgroundColor = UIColor.redColor()
        
        //=========UIButton專有的屬性和方法======
        //1.設置按鈕上顯示的文字(給不同的狀態設置不一樣的文字)
        //參數1:想要在按鈕上顯示的文字
        //參數2:狀態
        //Normal -> 正常狀態(按鈕正常顯示,沒有被點擊或者按下的時候)
        //Highlighted ->高亮(按鈕被按下,沒有彈起來的時候的狀態)
        //Selected -> 選中狀態
        //Disabled -> 不可用狀態(按鈕不能被點擊)
        titleBtn.setTitle("正常", forState: .Normal)
        titleBtn.setTitle("高亮", forState: .Highlighted)
        titleBtn.setTitle("選中", forState: .Selected)
        titleBtn.setTitle("不可用", forState: .Disabled)
        
        //2.設置當前按鈕是否選中(默認是false->非選中)
        titleBtn.selected = false
        
        //3.設置當前按鈕是否可用(默認是true->可用)
        titleBtn.enabled = true
        
        //4.設置文字顏色(給不同的狀態設置不一樣的顏色)
        titleBtn.setTitleColor(UIColor.yellowColor(), forState: .Normal)
        titleBtn.setTitleColor(UIColor.lightGrayColor(), forState: .Disabled)
        
        //注意:按鈕上的文字和文字顏色,必須通過對應的set方法去根據狀態去設置。其他和文字相關的屬性可以通過拿到titleLabel去設置
        //5.設置按鈕上的文字字體
        titleBtn.titleLabel?.font = UIFont.systemFontOfSize(12)
        //6.設置按鈕上的文字的對齊方式
        titleBtn.titleLabel?.textAlignment = .Right
        
        //!!!7.給按鈕添加事件
        //參數1:調用方法的對象
        //參數2:指定事件發生后參數1要去調用的方法(這個方法可以不帶參,如果帶參只能帶一個,并且參數的類型是UIButton類型),實參就是當前添加事件的按鈕本身
        //參數3:事件
        //TouchDown -> 按下事件
        //功能:當按鈕被按下的時候,self會去調用btnAction方法
        //TouchUpInside ->按下彈起事件
        //功能:當按鈕被按下彈起來的時候,self會去調用btnAction方法
        titleBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
        
    }
    

3.最后講講圖片文字按鈕

 //MARK: - 圖片文字按鈕
    func imageTitleBtn() {
        
        //a.同時設置title和image屬性,顯示是圖片在左,文字在右
        //b.同時設置title和groundImage,顯示是圖片在下層,文字在上層
        //1.創建一個按鈕對象
        let btn1 = UIButton.init(frame: CGRectMake(100, 300, 100, 50))
        self.view.addSubview(btn1)
        
        //2.設置title
        btn1.setTitle("標題", forState: .Normal)
        btn1.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        //3.設置圖片
        //btn1.setImage(UIImage.init(named: "luffy1"), forState: .Normal)
        btn1.setBackgroundImage(UIImage.init(named: "luffy2"), forState: .Normal)
        
        //4.添加事件
        btn1.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
    }
    

UITextField基礎

textfield就是手機界面上要你輸入文字或者登錄帳號時出現的那個條形框
快捷鍵:command鍵 + k 彈出或者收起模擬器上的鍵盤

UITextField的屬性和方法

1.創建UITextField對象

let textField = UITextField.init(frame: CGRectMake(100, 100, 200, 50))

2.添加到界面上

self.view.addSubview(textField)

3.設置背景顏色

textField.backgroundColor = UIColor.yellowColor()

![屏幕快照 2016-08-27 下午2.51.21.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 下午2.51.21.png)

控件大集合

1.開關

import UIKit
//生命周期和屬性
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.creatSwitch()
    
    
    
    }


}
//創建控件
extension ViewController{
    //1.開關
    func creatSwitch(){
        //1.創建開關對象
        let sw = UISwitch.init(frame: CGRectMake(100, 100, 100, 50))
        //2.添加到界面上
        self.view.addSubview(sw)
        //3.核心屬性:開關狀態(默認是false)
        //設置開關的狀態
        sw.on = true
        sw.setOn(false, animated: true)//變成狀態的時候有動畫效果
        //拿到當前的狀態
        print(sw.on)
       //4.核心方法
        //參數1:調用方法的對象;參數2:指定的事件發生后參數1要去調用的方法對應的selector;參數3:事件
        // 功能:當開關的值(開關的狀態)發生改變的時候,self回去調用switchaction方法
        sw.addTarget(self, action: #selector(ViewController.switchAction(_:)), forControlEvents: .ValueChanged)
        //5.設置開關開的狀態的顏色
        sw.onTintColor = UIColor.redColor()
        //6.關的時候邊框的顏色
        sw.tintColor = UIColor.purpleColor()
        //7.開關滑塊的顏色
        sw.thumbTintColor = UIColor.yellowColor()
        //sw.onImage = UIImage.init(named: <#T##String#>)
    }
    
    
}
//事件響應
extension ViewController{
    //1.開關事件
    func switchAction(sw:UISwitch){
        
        if sw.on{
            print("開關打開")
        }
        else{
            print("開關關閉")
        }
    }
    
}

開關可以左右滑動
![屏幕快照 2016-08-27 下午2.55.12.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 下午2.55.12.png)

2.滑塊

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.creatSlider()
    }
    
}
extension ViewController{
   
    func creatSlider(){
        //1.創建對象
        let slider = UISlider.init(frame: CGRectMake(100, 100, 200, 50))
        //2.添加到界面上
        self.view.addSubview(slider)
        //3.核心屬性:值(滑塊位置對應的值)
        //value:滑塊位置對應的值(默認是0---1)
        //設置滑塊的最大最小值
        slider.minimumValue = 0
        slider.maximumValue = 100
        //滑塊剛開始的時候的位置
        slider.value = 50
        //4.核心方法
        slider.addTarget(self, action: #selector(ViewController.sliderAction(_:)), forControlEvents: .ValueChanged)
        //5.1滑塊右邊線條的顏色
        slider.maximumTrackTintColor = UIColor.blackColor()
        //5.2滑塊左邊線條的顏色
        slider.minimumTrackTintColor = UIColor.redColor()
        //5.3滑塊滑塊的顏色
        slider.thumbTintColor = UIColor.greenColor()
        //6.是否連續改變
        slider.continuous = false
//        //7.點擊牛眼睛后滑條滑塊的圖片
//        slider.setThumbImage(UIImage.init(named: "back2.jpg"), forState: .Normal)
//        
        
        
    }
    
    
}
extension ViewController{
    func sliderAction(slider:UISlider){
        print(slider.value)
        
    }
    
}

![屏幕快照 2016-08-27 下午2.59.19.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 下午2.59.19.png)

3.與滑塊相似但是不同的進度條

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.creatProgress()
        
    }
    


}
extension ViewController{
    func creatProgress(){
        //1.創建進度條對象
        let progress = UIProgressView.init(frame: CGRectMake(100, 300, 300, 20))
        progress.tag = 100
        //2.添加到界面
        self.view.addSubview(progress)
        //3.核心屬性
        //進度(0--1)
        //設置當前進度
        progress.progress = 0.5
        progress.setProgress(0.6, animated: true)
        //顏色相關
        progress.progressTintColor = UIColor.blackColor()
        progress.trackTintColor = UIColor.greenColor()
        //圖片相關
        
    }
    

}

![屏幕快照 2016-08-27 下午3.03.03.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 下午3.03.03.png)

4.下面是個自定義的一個分段選擇器,基本上所有手機上都有的


import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
//        //系統的分段選擇器
//        let segement = UISegmentedControl.init(items: ["1","2","3"])
//        segement.frame = CGRectMake(7, 100,400, 50)
//        self.view.addSubview(segement)
//        segement.selectedSegmentIndex = 1
//        segement.addTarget(self, action: #selector(ViewController.action), forControlEvents: .ValueChanged)
//        
//        
        
        //自己的分段選擇器
        let selfSegement = YTSegmentControl.init(items: ["海賊","路飛","火影忍者","名偵探柯南"])
        selfSegement.frame = CGRectMake(7, 0,400, 50)
        selfSegement.titleColor = UIColor.redColor()
        selfSegement.titleSelectedColor = UIColor.greenColor()
        selfSegement.selectedSegmentIndex = 1
        selfSegement.addTarget(self, action: #selector(ViewController.selfAction(_:)))
        
        self.view.addSubview(selfSegement)
        
    }
    
    func selfAction(segement:YTSegmentControl) {
        
        print("自己的選擇器在做切換")
        print(segement.selectedSegmentIndex)
    }

    
    func action() {
        
        print("系統的選擇器在做切換")
    }
    

}

import UIKit



let BtnTag = 100
//MARK:222 - 提供給外部使用的方法
extension YTSegmentControl{
    
    //保存target和action值
    func addTarget(target:AnyObject?, action:Selector) {
        
        self.target = target
        self.action = action
    }
}

class YTSegmentControl: UIView {
    
    ///111.items
    private var items:[String]
    ///5.滑塊
    private var slider = UIView()
    
    ///6.保存target
    private var target: AnyObject? = nil
    ///7.保存action
    private var action: Selector? = nil
    
    //MARK: - 構造方法
    init(items:[String]){
        self.items = items
        //CGRectZero ->坐標是(0,0),大小是(0,0)
        super.init(frame: CGRectZero)
        
        //創建items中的每個數組元素對應的按鈕
        self.creatSubView()
        
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
//    //MARK: - 屬性
    ///1.666當前被選中的按鈕的下標
    var selectedSegmentIndex = 0{
        
        
        
    
        //將要將新值賦給selectedSegmentIndex。這個selectedSegmentIndex還是原來
        willSet{
            //1.先將原來選中的按鈕變成非選中狀態
            let btn1 = self.viewWithTag(BtnTag
             + selectedSegmentIndex) as! UIButton
            btn1.selected = false
            //2.將指定的按鈕變成選中狀態
            //newValue -> 將要賦給當前屬性的那個新的值
            let btn2 = self.viewWithTag(BtnTag + newValue) as! UIButton
            btn2.selected = true
            
        }
        
        
        
        
        
        //777已經給selectedSegmentIndex賦值
        didSet{
        
            UIView.animateWithDuration(0.2) {
                
                self.slider.frame.origin.x = CGFloat(self.selectedSegmentIndex) * self.slider.frame.size.width
            }
        }
        
        
}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ///2.888文字選中的顏色
    var titleSelectedColor = UIColor.blueColor(){
    
        didSet{
            
            //更新滑塊的背景顏色
            self.slider.backgroundColor = self.titleSelectedColor
            
            for item in self.subviews {
                
                if item.tag >= BtnTag {
                    let btn = item as! UIButton
                    //改變按鈕的文字顏色
                    btn.setTitleColor(self.titleSelectedColor, forState: .Selected)
                }
            }
            
        }
    }
    
    ///3.999文字顏色
    var titleColor = UIColor.blackColor(){
    
        //每次從外部給titleColor屬性賦值的時候,都需要用最新的titleColor的值去更新按鈕的文字顏色
        didSet{
        
            for item in self.subviews {
                
                if item.tag >= BtnTag {
                    let btn = item as! UIButton
                    //改變按鈕的文字顏色
                    btn.setTitleColor(self.titleColor, forState: .Normal)
                }
            }
            
        }}
    
    
    
    
    
    
    
    
    

}

















//MARK:555 - 計算子視圖的frame
extension YTSegmentControl{
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        //當前分段選擇器的寬和高
        let segementW = self.frame.size.width
        let segementH = self.frame.size.height
        
        //1.計算按鈕的frame
        let btnW = segementW/CGFloat(self.items.count)
        let btnH = segementH
        let btnY: CGFloat = 0
        
        //遍歷所有的子視圖
        var i: CGFloat = 0
        for item in self.subviews {
            //找到其中的按鈕
            if item.tag >= BtnTag {
                
                let btnX = i * btnW
                item.frame = CGRectMake(btnX, btnY, btnW, btnH)
                //找到一個按鈕i加1
                i += 1
            }
            
        }
        
        //2.計算滑塊的frame
        let sliderX = CGFloat(self.selectedSegmentIndex) * btnW
        let sliderH: CGFloat = 2
        let sliderY = segementH - sliderH
        let sliderW = btnW
        self.slider.frame = CGRectMake(sliderX, sliderY, sliderW, sliderH)
        
    }
}















//MARK:333 - 創建子視圖
extension YTSegmentControl{

    func creatSubView() {
        
        //1.創建按鈕
        for (i,item) in self.items.enumerate() {
            //創建按鈕不設置frame屬性
            let btn = UIButton.init()
            //設置文字
            btn.setTitle(item, forState: .Normal)
            //設置tag值
            btn.tag = BtnTag + i
            
            //設置文字顏色
            btn.setTitleColor(self.titleColor, forState: .Normal)
            btn.setTitleColor(self.titleSelectedColor, forState: .Selected)
            //讓默認第0個按鈕處于選中狀態
            if i == 0 {
                
                btn.selected = true
            }
            
            //添加點擊事件
            btn.addTarget(self, action: #selector(YTSegmentControl.btnAction(_:)), forControlEvents: .TouchDown)
            
            
            //添加到界面上
            self.addSubview(btn)
        }
        
        //2.創建滑塊
        self.slider.backgroundColor = self.titleSelectedColor
        self.addSubview(self.slider)
        
    }
}








//MARK:444 - 按鈕點擊事件
extension YTSegmentControl{

    func btnAction(btn:UIButton) {
        
        if self.selectedSegmentIndex != btn.tag - BtnTag {
            //更新選中的下標
            self.selectedSegmentIndex = btn.tag - BtnTag
            
            //通知外部值改變了
            if self.target != nil {
                
                //讓target去調用action中的方法
                //參數1:需要調用的方法對應的Selecter
                //參數2:如果Selecter中方法帶參,那個這個參數的值就是Selecter中方法的實參
                self.target?.performSelector(self.action!, withObject:self)
            }
            
        }
        
        
        
    }
}



![屏幕快照 2016-08-27 下午3.08.52.png](/Users/macbook/Desktop/屏幕快照 2016-08-27 下午3.08.52.png)

以上就是我本周的總結!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Window : 一、UIView的基本屬性和方法 1.創建UIView的對象 說明:想要將視圖展示在屏幕上的兩個...
    老韓在簡書閱讀 732評論 0 0
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 有人覺得我強大無比,有人覺得我脆弱如紙;有人覺得我敏銳如刀,有人覺得我遲鈍如鐘;有人覺得我感情泛濫,有人覺得...
    從媯妤到瀾依閱讀 364評論 2 4
  • 入夏了,我就盼著雨。一場場的雨,小也好,大也好,都是對這個城市的一次次的洗禮。北京的天空總是灰灰的,甚至可以用蒼茫...
    四牧君閱讀 315評論 3 2