1. 程式人生 > >swift中UIButton的簡單使用

swift中UIButton的簡單使用

UIButton是我們經常用的一個控制元件,它是繼承自UIControl的,下面就總結一下相關屬性及用法:

1.UIButton的建立

a.不帶樣式的:

let btn: UIButton = UIButton()

b.帶樣式的

let btns:UIButton =UIButton(type: UIButtonType);

其中UIButtonType是一個列舉如下所示:

publicenum UIButtonType :Int {
    case Custom // no button type 自定義樣式按鈕
    @available(iOS 7.0, *)
    case System // standard system button	//系統的樣式按鈕
    case DetailDisclosure
    case InfoLight
    case InfoDark
   case ContactAdd//聯絡人按鈕
    public staticvar RoundedRect: UIButtonType { get }// Deprecated, use UIButtonTypeSystem instead
}

用法如下:

let  btn: UIButton = UIButton(type: .Custom)

2.UIButton設定字內容和顏色

        btn.setTitle("按鈕", forState: .Normal)

        btn.setTitleColor(UIColor.whiteColor(), forState: .Normal)

3.UIButton設定背景顏色和背景圖片

        btn.backgroundColor =UIColor.blackColor()

        btn.setBackgroundImage(UIImage(named:

"1"), forState: .Normal)

4.UIButton設定字型大小

        btn.titleLabel?.font =UIFont.systemFontOfSize(20)

5.禁用UIButton

 btn.enabled =false//禁止按鈕,預設為true

6.設定圓角

btn.layer.cornerRadius = 8

7.設定背景圖片為圓角(因為我們直接設定UIButton圓角時,圖片不會變為圓角)

buttonImage.setImage(UIImage(named:"1") , forState: UIControlState.Normal)

//設定背景圖片為圓角

buttonImage.imageView?.layer.cornerRadius = 50

8.在UIButton上新增圖片和文字,有時需要我們調整,此時需要:

方向為逆時針方向,上、左、下、右依次去設定的

        btn.imageEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

        btn.titleEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

例子如下:

        //建立一個圖片一個文字的按鈕
        let btn2: UIButton = UIButton(type: .Custom)
        btn2.frame = CGRectMake(50, 100, 120, 35)
        btn2.setImage(UIImage(named: "1"), forState: .Normal)
        btn2.backgroundColor = UIColor.blackColor()
        btn2.titleLabel?.font = UIFont.systemFontOfSize(20)
        btn2.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
        btn2.setTitle("圖片按鈕", forState: .Normal)
        //偏移量,分別為上下左右
        btn2.imageEdgeInsets = UIEdgeInsetsMake(0, -50, 0, 0)
        btn2.titleEdgeInsets = UIEdgeInsetsMake(0, -80, 0, 5)
        btn2.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        btn2.adjustsImageWhenHighlighted = false
        self.view.addSubview(btn2)
9.新增按鈕的點選事件

第一種是不帶引數的,第二種是帶引數的

        btn.addTarget(self, action:"click", forControlEvents: .TouchUpInside)

  btn.addTarget(self, action:"clicks:", forControlEvents: .TouchUpInside)

第一種:

func click(){}

第二種:

func clicks(sender:UIButton){}

寫的程式碼如下:
func initButtonView() {
        //建立有狀態的按鈕
        let btn: UIButton = UIButton(type: .Custom)
        btn.frame = CGRectMake(50, 20, 100, 30)
        btn.setTitle("點選按鈕", forState: .Selected)
        btn.setTitle("未點選", forState: .Normal)
        btn.backgroundColor = UIColor.blackColor()
        btn.addTarget(self, action: "clickBtn:", forControlEvents: .TouchUpInside)
        self.view .addSubview(btn)
        
        //建立無狀態的按鈕
        let btn1: UIButton = UIButton()
        btn1.frame = CGRectMake(50, 60, 100, 30)
        btn1.setTitle("Normal", forState: .Normal)
        btn1.backgroundColor = UIColor.blueColor()
        self.view.addSubview(btn1)
        
        //建立一個圖片一個文字的按鈕
        let btn2: UIButton = UIButton(type: .Custom)
        btn2.frame = CGRectMake(50, 100, 120, 35)
        btn2.setImage(UIImage(named: "1"), forState: .Normal)
        btn2.backgroundColor = UIColor.blackColor()
        btn2.titleLabel?.font = UIFont.systemFontOfSize(20)
        btn2.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
        btn2.setTitle("圖片按鈕", forState: .Normal)
        //偏移量,分別為上下左右
        btn2.imageEdgeInsets = UIEdgeInsetsMake(0, -50, 0, 0)
        btn2.titleEdgeInsets = UIEdgeInsetsMake(0, -80, 0, 5)
        btn2.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        btn2.adjustsImageWhenHighlighted = false
        self.view.addSubview(btn2)
        
        //建立禁止按鈕
        let btn3: UIButton = UIButton(type: .Custom)
        btn3.frame = CGRectMake(50, 140, 100, 35)
        btn3.setTitle("點選按鈕", forState: .Highlighted)
        btn3.setTitle("禁止按鈕", forState: .Normal)
        btn3.enabled = false    //禁止按鈕,預設為true
        btn3.setTitleColor(UIColor.redColor(), forState: .Disabled)
        btn3.backgroundColor = UIColor.purpleColor()
        self.view.addSubview(btn3)
        
        //建立圓角按鈕
        let btn4: UIButton = UIButton(type: .Custom)
        btn4.frame = CGRectMake(50, 180, 100, 35)
        btn4.backgroundColor = UIColor.blackColor()
        btn4.setTitle("圓角按鈕 ", forState: .Normal)
        btn4.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        btn4.layer.cornerRadius = 8
        self.view.addSubview(btn4)
        
        //部分圓角按鈕,主要利用layer的mask屬性,在tongguoCAShaperLayer和UIBezierPath來畫
        let btn5: UIButton = UIButton(type: .Custom)
        btn5.frame = CGRectMake(50, 220, 100, 35)
        btn5.backgroundColor = UIColor.blackColor()
        btn5.setTitle("部分圓角按鈕", forState: .Normal)
        btn5.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        let shape: CAShapeLayer = CAShapeLayer()
        let bepath: UIBezierPath = UIBezierPath(roundedRect: btn5.bounds, byRoundingCorners: [UIRectCorner.TopRight,UIRectCorner.TopLeft,UIRectCorner.BottomLeft], cornerRadii: CGSize(width: 8, height: 8))
        UIColor.blackColor().setStroke()
        shape.path = bepath.CGPath
        btn5.layer.mask = shape
        self.view.addSubview(btn5)
        
        //建立帶邊框的按鈕
        let btn6: UIButton = UIButton(type: .Custom)
        btn6.frame = CGRectMake(50, 260, 100, 35)
        btn6.setTitle("邊框按鈕", forState: .Normal)
        btn6.setTitleColor(UIColor.blackColor(), forState: .Normal)
        btn6.layer.borderColor = UIColor.blackColor().CGColor
        btn6.layer.borderWidth = 1
        btn6.layer.cornerRadius = 8
        self.view.addSubview(btn6)
        
        //顯示提示資訊的UILabel
        labelText = UILabel()
        labelText.frame = CGRectMake(50, 300, 100, 44)
        labelText.textColor = UIColor.orangeColor()
        self.view.addSubview(labelText)
        
        let btns: UIButton = UIButton(type: .Custom)
        btns.frame = CGRectMake(<#T##x: CGFloat##CGFloat#>, <#T##y: CGFloat##CGFloat#>, <#T##width: CGFloat##CGFloat#>, <#T##height: CGFloat##CGFloat#>)
        btn.setTitle("按鈕", forState: .Normal)
        btn.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        btn.backgroundColor = UIColor.blackColor()
        btn.setBackgroundImage(UIImage(named: "1"), forState: .Normal)
        btn.imageEdgeInsets = UIEdgeInsetsMake(<#T##top: CGFloat##CGFloat#>, <#T##left: CGFloat##CGFloat#>, <#T##bottom: CGFloat##CGFloat#>, <#T##right: CGFloat##CGFloat#>)
        btn.titleEdgeInsets = UIEdgeInsetsMake(<#T##top: CGFloat##CGFloat#>, <#T##left: CGFloat##CGFloat#>, <#T##bottom: CGFloat##CGFloat#>, <#T##right: CGFloat##CGFloat#>)
        
        btn.addTarget(self, action: "click", forControlEvents: .TouchUpInside)
    }
    
    func clickBtn(sender: UIButton){
        
        sender.selected = !sender.selected
        labelText.text = "點選了按鈕"
    }

效果圖如下: