우리가 흔히 아는 좋아요 버튼이나 구독 버튼과 같이 클릭 할 때 이미지가 변환하는 것을 구현해보겠다. (밑에는 게시글을 비공개 할지 안할지 체크를 하는 기능을 예시로 보여준다.)
과정
- 이미지를 2개 준비해주고 UIImageView를 만들고 이미지 중 한개로 지정해준다
- 바뀔 이미지 이름을 배열에 넣고 그 순서를 추적할 index를 선언해준다
- 만들어준 UIImageView안에 gesture를 추가해준다 (gesture는 아래 선언)
- 클릭 gesture가 나왔을 때 index를 1씩 늘려주고 배열 길이보다 길어질 시 다시 0으로 초기화 해주는 코딩을 한다.
- 위에서 구한 index를 가지고 image를 변경해준다
코드
이미지를 2개 준비해주고 UIImageView를 만들고 이미지 중 한개로 지정해준다
let anonymousCheck = UIImageView().then{
$0.image = UIImage(named: "anonymousCheck")?.withRenderingMode(.alwaysOriginal)
}바뀔 이미지 이름을 배열에 넣고 그 순서를 추적할 index를 선언해준다
let checkArray = ["anonymousCheck","anonymousCheckOff"]
var index = 0- ON, OFF 두가지 이미지가 있으니 배열에 2개의 이미지 이름을 넣어준다
- index는 0에서 부터 시작하게끔 만든다
만들어준 UIImageView안에 gesture를 추가해준다 (gesture는 아래 선언)
let ImgBtn = UITapGestureRecognizer(target: self, action: #selector(didClickAnonymous))
anonymousCheck.isUserInteractionEnabled = true
anonymousCheck.addGestureRecognizer(ImgBtn)
}- ImgBtn에 gesture를 넣어주는 작업이다
- 이 때 UIImageView이니 isUserInteractionEnabled를 true를 해서 터치에 반응을 하게끔 만들어 준다
- ImageView에 유저 클릭 시 제스처를 하게끔 만든다
클릭 gesture가 나왔을 때 index를 1씩 늘려주고 배열 길이보다 길어질 시 다시 0으로 초기화 해주는 코딩을 한다.
@objc func didClickAnonymous(sender: UITapGestureRecognizer) {
self.index = (self.index >= self.checkArray.count-1) ? 0 : self.index+1
self.anonymousCheck.image = UIImage(named:checkArray[index])
}- 클릭을 하게 되면 index가 array길이보다 크거나 같을 시 0으로 초기화 시켜주고 아니면 1을 기존값에서 더해준다
- 이 후 배열의 해당 index 자리의 이미지를 출력해준다.
- 현재 코드같은 경우 체크와 체크 안되어있는 동그라미를 누를 때 계속 변경되게끔 만들어 진 것 이다.
PM/PO