오늘은 UICollectionView Cell 마다 Checkbox 기능을 추가 할 예정이다.
일단 Checkbox를 넣는 이유는 Poster라이브러리에서 자신이 선택하고 싶은 사진들을 표시하기
위해서이다.
내가 가지고 있는 교재에선 참고할만한 예제가 없어 구글링을 하여 코딩했다.
무슨 이유인지 아직 모르지만 아래코딩은 Checkbox가 중복체크가 된다.(첫 화면에 Checkbox를 체크 하고 스크롤 하여 아래로 내리면 체크하지 않았던 Checkbox에 체크 표시가되어있는 문제가 발생)
그래도 일단 코딩을 정리하고 이슈를 해결 할 예정이다.
----------------------------------------------------------------------------------------------
class CheckBox: UIButton {
// Images
let checkedImage = UIImage(named: "photoSelect_active.png")! as UIImage
let uncheckedImage = UIImage(named: "photoSelect_deactive.png")! as UIImage
// Bool property
var isChecked: Bool = false {
didSet{
if isChecked == true {
self.setImage(checkedImage, forState: .Normal)
} else if isChecked == false {
print("test2!!")
self.setImage(uncheckedImage, forState: .Normal)
}
}
}
override func awakeFromNib() {
self.addTarget(self, action: #selector(CheckBox.buttonClicked(_:)), forControlEvents: UIControlEvents.TouchUpInside)
self.isChecked = false
}
func buttonClicked(sender:UIButton) {
if(sender == self){
if isChecked == true{
isChecked = false
}else{
isChecked = true
}
}
}
}
=============================================================================
위 코딩은 구글링을 통해서 체크버튼 클릭 마다 isChecked 값에 따라 이미지를 바꿀수 있도록 한다.
스토리보드 버튼에 위 클래스 값을 넣었다. 참고로 버튼 타입을 "Custom"으로 해주어야만
이미지가 제대로 나온다.
체크 이미지와 미체크 이미지를 설정 해주고
----------------------------------------------------------------------------------------------
let checkedImage = UIImage(named: "photoSelect_active")! as UIImage
let uncheckedImage = UIImage(named: "photoSelect_deactive")! as UIImage
=============================================================================
속성 값에 따른 이미지 배치
----------------------------------------------------------------------------------------------
// Bool property
var isChecked: Bool = false {
didSet{
if isChecked == true {
self.setImage(checkedImage, forState: .Normal)
} else if isChecked == false {
self.setImage(uncheckedImage, forState: .Normal)
}
}
=============================================================================
클래스 시작 시 처음 실행되는 함수 버튼에 터치 함수를 넣어주고 버튼의 속성값을 false 로 설정
----------------------------------------------------------------------------------------------
// Bool property
override func awakeFromNib() {
self.addTarget(self, action: #selector(CheckBox.buttonClicked(_:)), forControlEvents: UIControlEvents.TouchUpInside)
self.isChecked = false
}
=============================================================================
체크버튼에 들어간 클릭 함수, 클릭마다 속성이 바뀐다
----------------------------------------------------------------------------------------------
func buttonClicked(sender:UIButton) {
if(sender == self){
if isChecked == true{
isChecked = false
}else{
isChecked = true
}
}
}
=============================================================================
스토리보드의 버튼의 클래스 값에 적용 후 테스트를 해보면
체크버튼이 클릭 될때마다 이미지가 바뀌는것을 확인 할 수 있으나 이슈가 발생한다.
[이슈 정리]
1. 선택된 체크박스가 중복되어 나타난다, 즉 아래로 스크롤 시 체크하지 않았던 체크박스도 체크가 된 상태로 나타나는 경우
2. 스크롤 후 다시 원위치 시 체크박스된 박스가 위치가 바뀌는 현상
