북극곰의 개발일기

간단하게 image를 버튼 이용해서 넘길 수 있는 Application 만들기





posted by purplebeen on Thu Aug 23 2018 15:40:50 GMT+0900 (KST) in iOS


시작하기 전에

본 포스트는 2018년에 숭실대학교 / 산업기술대학교 / 한국기술교육대학교에서 주관한 iOS를 위한 Swift 프로그래밍 특강의 과제임을 알려드립니다.

현재 몇번째 사진인지 보여주는 레이블과 이전 / 다음 버튼, 그리고 실제 이미지를 보여줄 UIImageView가 필요하다.
물론 해상도를 대응하기 위해 AutoLayout 기능을 사용하였다.

StoryBoard 스크린샷

필요한 이미지들은 Assets.xcassets에 넣어둔다.

구현에 필요한 아울렛들을 먼저 연동시켜준다.
이미지의 카운트를 위해 사용하는 imageIndex의 값이 변경된 후의 과정을 단순화 시키기 위해서 didSet observer를 사용하였다.

    @IBOutlet weak var prevButton: UIButton!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var nextButton: UIButton!

또한 앱이 꺼진 후에도 값을 가져올 수 있도록 UserDefaults를 이용하여 인덱스 값을 저장하였다.

    var imageIndex : Int = 1 {
        didSet {
            label.text = "\(imageIndex) / 5"
            imageView.image = UIImage(named : "Cat\(imageIndex)")
            prevButton.isEnabled = imageIndex > 1
            nextButton.isEnabled = imageIndex < 5
            UserDefaults.standard.set(imageIndex, forKey: Keys.index)
        }
    }

뷰가 생성되는 과정에서 과거에 저장했었던 imageIndex를 가져와 index를 그 값으로 설정해준다.

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        let idx = UserDefaults.standard.integer(forKey: Keys.index)
        print("idx = \(idx)")
        if 1 <= idx && idx <= 5 {
            imageIndex = idx
        } else {
            imageIndex = 1
        }
    }

마지막으로 버튼을 눌렀을 때의 행동을 제어하기 위해 각 버튼에 Action을 달아준다.

    @IBAction func onButtonPrev(_ sender: UIButton) {
        imageIndex -= 1
    }
    
    @IBAction func onButtonNext(_ sender: UIButton) {
        imageIndex += 1
    }

보다 더 자세하게 확인하고 싶다면 깃허브 링크 에서 확인할 수 있다.