UIKit-UIStepper按鈕(文字轉數字)、Array換圖、UIPageControl、Button換圖、UISwipeGestureRecognizer、(Market01)

swift: Swipe滑動換圖、Stepper按鈕文字轉數字、數字再轉回文字、PageControl、Button

因為內容太多，決定分幾個部分寫功能，之後會出第二篇解釋其他功能用法。

先來看一下畫面吧：

動態展示：

Market

接下來我會把每個功能都獨立分別列出來，這樣看的時候才不會像大海撈針一樣痛苦，每個功能直接複製貼上就能直接使用，如果要整合，要記得把一樣的部分刪除。

1. PageControl ＆ Array

如圖，讓使用者可以按下去後換下一張或上一張圖。

    //建立一個圖片庫
    let pictureArray = ["changePic1","changePic2","changePic3"]
    var index = 0
    
    //建立要換圖的ImageView
    @IBOutlet weak var changePicture: UIImageView!
    
    //建立Page Control按鈕
    @IBOutlet weak var PageControl: UIPageControl!
    @IBAction func clickpagecontrol(_ sender: UIPageControl) {
        //currentPagey自己會判斷操作者點在哪個點上，所以index就會跟著改變值
        index = sender.currentPage
        //這時候就告訴要換的圖(changePicture)，跟著.currentPage改變index
        changePicture.image = UIImage(named: pictureArray[index])
    }

//下面是為了設定剛打開ＡＰＰ顯示的是哪一張圖，上面var index = 0，所以這樣設定出來會是第一張圖片"changePic1"
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //設定一開始圖案顯示哪一張，因為上面有宣告index=0所以這邊會index會從0開始
        changePicture.image = UIImage(named: pictureArray[index])
}

2. Button換圖

可以置換下一張圖片或上一張圖片。

//建立一個圖片庫
    let pictureArray = ["changePic1","changePic2","changePic3"]
    var index = 0
    
    //建立要換圖的ImageView
    @IBOutlet weak var changePicture: UIImageView!

    //之後很多功能都要點左邊右邊，為了省事，先把往左邊換圖跟把右邊換圖都寫func
    func right(){
        index = (index + 1) % 3
        changePicture.image = UIImage(named: pictureArray[index])
    }
    func left(){
        index = (index - 1)
        //讓index要<0的時候回到最後一張圖，也可寫成index = pictureArray - 1
        if index < 0{
            index = 2
        }
        changePicture.image = UIImage(named: pictureArray[index])
    }
//建立左右箭頭按鈕
    @IBOutlet weak var nextButton: UIButton!
    @IBAction func nextButtonAction(_ sender: UIButton) {
        right()
    }
    @IBOutlet weak var lastButton: UIButton!
    @IBAction func lastButtonAction(_ sender: UIButton) {
        left()
    }
//下面是為了設定剛打開ＡＰＰ顯示的是哪一張圖，上面var index = 0，所以這樣設定出來會是第一張圖片"changePic1"
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //設定一開始圖案顯示哪一張，因為上面有宣告index=0所以這邊會index會從0開始
        changePicture.image = UIImage(named: pictureArray[index])
}

3. Swipe換圖

觸控左右換圖效果。

感覺很厲害的功能，其實很多東西都寫好了，只要指定設定的感覺，比較特別的是，他左滑＆右滑是吃不同的指令，要拉兩個Swipe Gesture Recognizer放在同一個Action，如圖：

再來因為要顯示滑到哪個畫面，所以他的Outlet是跟著你要滑動的ImageView，如圖：

@IBOutlet weak var changePicture: UIImageView!
    @IBAction func swipeChangePage(_ sender: UISwipeGestureRecognizer) {
        if sender.direction == .left {
            left()
        }else if sender.direction == .right{
            right()
        }
    }


//之後很多功能都要點左邊右邊，為了省事，先把往左邊換圖跟把右邊換圖都寫func
    func right(){
        index = (index + 1) % 3
        changePicture.image = UIImage(named: pictureArray[index])
    }
    func left(){
        index = (index - 1)
        //讓index要<0的時候回到最後一張圖，也可寫成index = pictureArray - 1
        if index < 0{
            index = 2
        }
        changePicture.image = UIImage(named: pictureArray[index])
    }

//下面是為了設定剛打開ＡＰＰ顯示的是哪一張圖，上面var index = 0，所以這樣設定出來會是第一張圖片"changePic1"
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //設定一開始圖案顯示哪一張，因為上面有宣告index=0所以這邊會index會從0開始
        changePicture.image = UIImage(named: pictureArray[index])
}

4. UIStepper按鈕(文字轉數字)

點選+-按鈕更改數量，這部分比較複雜，先來拉連線：

圖一

圖二

//依照圖一把連線都拉好
    @IBOutlet weak var amount: UILabel!
      
    @IBOutlet weak var buleStonePrice: UILabel!//viewDidLoad設定價格
    @IBOutlet weak var buleStoneQuantity: UILabel!//紅圈
    @IBOutlet weak var buleStoneStepper: UIStepper!//籃框

//再來看圖二寫程式碼
    @IBAction func blueStoneStepperAction(_ sender: UIStepper) {
        //stepper本身是double，所以要改成Int
        let blueStepper = Int(buleStoneStepper.value)
        //要把結果印在label上，但label因為是文字，所以數字要轉文字
        buleStoneQuantity.text = String(blueStepper)
        
        //在viewDidLoad已經設定好價格，但是有一個總數要算，顯示在label裡面的都是字串，所以要把他改成數字，才能列公式計算，算好再把他改成文字顯示在label裡面
        let blueStoneP = Int(buleStonePrice.text!)!
        amount.text = String(blueStepper*blueStoneP)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    
        //商品價格設定
        buleStonePrice.text = "12" 
}

但是這樣只能運行一個商品的價格，如果要上架很多商品，很顯然這個用法不符合需求，會在第二篇寫第二種用法。

to be continued……