UIImageView 실습: Index 활용법, 버튼 이미지 삽입, Refactor,

 

1. Button 내 이미지 크기 조절

Preferred Symbol Config에서 Config를 Point Size로 설정 후 크기를 설정한다.

 

2. index 범위를 벗어나면 버튼이 비활성화되도록 만들기

1) hardcode 모드

  // Button Action
    @IBAction func leftBtnTouched(_ sender: Any) {
        if index < 0 {index = 0}
        imageView.image = UIImage(named: btsImages[index])
    }
    
    @IBAction func rightBtnTouched(_ sender: Any) {
        index += 1
        if index >= btsImages.count { index = btsImages.count - 1}
        imageView.image = UIImage(named: btsImages[index])
    }

 

 

3. PageControl

        pageControl.numberOfPages = btsImages.count

        pageControl.currentPage = index

로 해줌.

 

 

HardCoded

//  BTSViewController.swift

import UIKit

class BTSViewController: UIViewController {
    // Properties
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var leftBtn: UIButton!
    @IBOutlet weak var rightBtn: UIButton!
    @IBOutlet weak var cardCount: UILabel!
    @IBOutlet weak var pageControl: UIPageControl!
    
    var btsImages = ["bts1","bts2","bts3","bts4","bts5","bts6","bts7"]
    var index = 0
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.image = UIImage(named: btsImages[index])
        leftBtn.isEnabled = false
        // page control
        pageControl.numberOfPages = btsImages.count
        pageControl.currentPage = index
    }
    
    // Button Action
    @IBAction func leftBtnTouched(_ sender: Any) {
        leftBtn.isEnabled = true
        rightBtn.isEnabled = true
        index -= 1
        
        // show index number on label
        cardCount.text =  "\(index + 1)/\(btsImages.count)"
        
        if index == 0 {
            leftBtn.isEnabled = false
        }
        imageView.image = UIImage(named: btsImages[index])
        
        // page control
        pageControl.currentPage = index
       

    }
    
    @IBAction func rightBtnTouched(_ sender: Any) {
        leftBtn.isEnabled = true
        rightBtn.isEnabled = true
        index += 1
        
        // show index number on label
        cardCount.text =  "\(index + 1)/\(btsImages.count)"
        
        // pageControl
        pageControl.currentPage = index
        
        if index >= btsImages.count - 1 {
            rightBtn.isEnabled = false
            }
        imageView.image = UIImage(named: btsImages[index])
        
    }
    
 

}

 

 

Refactoring

통해서 하나의 함수로 만든다. -> changeImage ()

 

 func changeImage() {
        leftBtn.isEnabled = true
        rightBtn.isEnabled = true
        
        // show index number on label
        cardCount.text =  "\(index + 1)/\(btsImages.count)"
        // pageControl
        pageControl.currentPage = index
        
        if index == btsImages.count - 1 {
            rightBtn.isEnabled = false
        }
        if index == 0 {
            leftBtn.isEnabled = false
        }
        imageView.image = UIImage(named: btsImages[index])
    }

 

 

 

3. Property Observer

index에 didset을 설정해서 index가 바뀌고 나서 index변수에 changeImage()함수를 적용한다.

   var index = 0 { didSet { changeImage() }}

 

 

Clean Code

import UIKit

class BTSViewController: UIViewController {
    // Properties
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var leftBtn: UIButton!
    @IBOutlet weak var rightBtn: UIButton!
    @IBOutlet weak var cardCount: UILabel!
    @IBOutlet weak var pageControl: UIPageControl!
    
    var btsImages = ["bts1","bts2","bts3","bts4","bts5","bts6","bts7"]
    var index = 0 { didSet { changeImage() }}
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // pageControl
        pageControl.numberOfPages = btsImages.count
        pageControl.currentPage = index

    }
    
    // Button Action
    @IBAction func leftBtnTouched(_ sender: Any) {
        index -= 1
    }
     
    @IBAction func rightBtnTouched(_ sender: Any) {
        index += 1
    }
    
    func changeImage() {
        leftBtn.isEnabled = true
        rightBtn.isEnabled = true
        
        // show index number on label
        cardCount.text =  "\(index + 1)/\(btsImages.count)"
        // pageControl
        pageControl.currentPage = index
        
        if index == btsImages.count - 1 {
            rightBtn.isEnabled = false
        }
        if index == 0 {
            leftBtn.isEnabled = false
        }
        imageView.image = UIImage(named: btsImages[index])
    }
    
}