iOS UIPageControl Customizing of Objective-C

의도하지 않은 기능들에 대해 학습하고 구현하고 하는 일들이 간헐적으로 나타난다. 이것은 주로 원하지 않았던 일을 하게 되는 현상인데 결과를 두고 보면 의외로 괜찮은 현상들 같다. 

 

요즘은 Objective-C 로 구현되는 소스들이 많지는 않지만 Swift로 만들어진 리소스를 보면서 Objective-C로 옮기는 작업들을 하는 것도 이제 제법 익숙해졌다. 하지만 곧 Swift로 넘어가긴 해야할 것 같다. 

UIPageControl은 비교적 간단하고 손쉽게 페이징을 표시해주는 iOS의 컴포넌트이다. 이 역시 내부적인 구조는 UIView로 만들어진 View객체에 Control기능을 포함하는데 점으로 표시되는 모양이 마음에 들지 않는다고 하여 아래 그림과 같이 디자인을 살짝 변경한 UI를 요청받게 되었다. 안드로이드와 아이폰 역시 동일한 개념으로 UI를 변경하도록 하였다. 

일반적이지 않은 UIPageControl 모습

 

보다 손쉽게 UI를 변경할 수 있었던 것은 검색 결과 Swift로 된 예시를 보고 별 고민없이 작업을 진행할 수 있었다. 

UIPageControl을 상속받는 CustomPageControl을 하나 만들었고 CustomPageControl에서 layoutSubView()을 재정의하면서 다음과 같은 코드로 처리가 가능하도록 했다. 

#import "CustomPageControl.h"

@interface CustomPageControl()
@property(nonatomic, assign) CGFloat defaultPosX;
@end
@implementation CustomPageControl


- (void)awakeFromNib {
    [super awakeFromNib];
    _defaultPosX = -3.5;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
}

- (void)layoutSubviews {
    NSArray *subViews = [self subviews];
    float x = _defaultPosX;
    
    for (int i=0; i < [subViews count]; i++) {
        UIView *v = subViews[i];
        v.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0];
        if (i == self.currentPage) {
            [v setFrame:CGRectMake(x, v.frame.origin.y, 15, 7)];
            
            x+= 15+5;
        } else {
            [v setFrame:CGRectMake(x, v.frame.origin.y, 7, 7)];
            [v setBackgroundColor:[UIColor clearColor]];
            v.layer.borderWidth = 1.0f;
            v.layer.borderColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0].CGColor;
            x+= 5 + 7;
        }
    }
}
@end

단순한 코드들이지만 얼마던지 페이징 UI/UX을 변형할 수 있는 방법이란 것을 명시하는 코드이고 응용할 수 있겠다. 

이 역시 기본적인 아이폰의 UI/UX의 가치를 훼손하는 일이라 썩 아름답지는 않지만 서로의 이해관계를 충족하기 위해 만들어진 코드들이라 볼 수 있겠다. 

특이한 점은 UIPageControl의 layoutSubviews가 호출 되고 subViews을 순환하면서 발견된 것은 그 모양을 크게 확장한것(currentPage)이 먼저 그려진다는 점이다. 기준이 되는 좌표점을 layoutSubview()가 실행될 때마다 초기화 하고 그 위치를 기준으로 현재 페이지의 UI와 그렇지 않은 페이지의 UI를 그려주면 된다.