다각형의 버튼들 배치

스크린샷 2013-09-16 15.47.33

일반적으로 버튼은 rectangle. 즉, 사각형의 영역으로 범위를 정의한다.
하지만 위 스크린샷(노란색과 파란색이 각각 버튼이다.)처럼 종종 다각형(polygon) 형태의 버튼 모양이 디자인으로 나올 수 있고 이를 무조건 rectangle로 만들라고 디자이너에게 요구할 수도 없다.

다각형 버튼 각자의 영역이 겹치지 않는다면 큰 문제가 되지 않지만
여기서 문제는 겹칠 때. 이 때는 respond가 addSubview 메소드를 나중에 호출한 버튼이 호출된다.
당연하다. iOS의 UIView 구조는 포토샵의 레이어와 유사한 구조이다.

이를 해결하기 위해서는 여러가지 방법이 있을 수 있지만 가장 효율적인 방법은

터치한 지점에 해당하는 버튼 이미지의 alpha 값을 가지고와
미리 정해놓은 threshold와 비교해서 response를 return값으로 판단할 수 있다.

이를 충실하게 구현해놓은 Open Source가 있어서 소개한다.

https://github.com/ole/OBShapedButton

위 코드는 UIButton을 상속받은 OBShapedButton 클래스와 특정 지점의 Alpha값을 가지고 올 수 있도록 메소드가 정의된
UIImage의 category 클래스가 전부이다.

사용법은
두 클래스를 프로젝트에 추가하고
UIButton으로 정의하던 클래스를 OBShapedButton으로 정의하면 된다.

이 코드는 대부분의 iOS에서 사용할 수 있다.

추가적인 팁으로
화면에 여러 개의 버튼이 배치되었을 때 동시에 버튼들을 누르면 모두 눌러지는 것을 확인할 수 있다.
만약, 버튼의 기능이 네비게이션에서 특정 view controller의 push나 pop일 경우에는 오류의 주 원인이 된다.
이럴 때는 버튼 인스턴스에 exclusiveTouch 프로퍼티 값을 YES로 설정하여주면 쉽게 해결된다.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.