iOS14, UIPageControl의 변화 그리고 삽질.

지난 7월쯤 UIPageControl을 상속 받는 CustomPageControl이라는 클래스를 만들어 커스터마이징 하는 포스팅을 올린 적이 있다. 그 당시 포스팅을 보면 잘못된 점들이 있긴한데, 어찌되었던 결국 @available(iOS14, *)를 체크해서 사용해야하는 상황이 발생되었고 내가 원하는 UI는 도저히 만들수가 없어서 iOS14이전의 UIPageControl과 흡사(?)하게 만들게 되었다. 

iOS14에서 UIPageControl의 경우, 

Custom Indicator Image를 설정할 수 있으며, 특정 페이지에는 특정 이미지를 넣을 수 도 있다. background sytyle도 지정가능하고 다양한 프로퍼티와 메서드가 추가되었다. 자세한 내용은 SDK를 참고. 

 

별다른 기능이 있는 것이 아니라서 단순히 페이징되는 정도만 눈으로 확인이 가능한 기능을 하는 CustomPageControl을 만들었다. 이전 포스팅 내용과 거의 비슷하다. 다만 UIPageControl을 상속받는 것이 아니라 UIView를 상속받아 처리하도록 변경하였다. 

 

2020/07/29 - [Programming/iOS] - iOS UIPageControl Customizing of Objective-C

iOS UIPageControl Customizing of Objective-C

 

1. 선언부 

#import <UIKit/UIKit.h>

@interface CustomPageControl : UIView
@property(nonatomic, assign) NSInteger numberOfPages;
@property(nonatomic, assign) NSInteger currentPage;
@end

 

UIPageControl 의 numberOfPages와 currentPage를 프로퍼티로 선언하고 구현하였다. 

2. 구현부

#import "CustomPageControl.h"

@interface CustomPageControl()
@property(nonatomic, strong) UIView *pageContentView;
@end
@implementation CustomPageControl

/**
 * initWithFrame
 */
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        //
        self.backgroundColor = [UIColor clearColor];
        self.pageContentView = [[UIView alloc] initWithFrame:CGRectZero];
        self.pageContentView.backgroundColor = [UIColor clearColor];
        [self addSubview:self.pageContentView];
    }
    return self;
}


- (void)awakeFromNib {
    [super awakeFromNib];
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    // Drawing code
}

- (void)layoutSubviews {
    [super layoutSubviews];
}

- (void)removeAllSubView:(UIView *)view {
    for (UIView *v in [view subviews]) {
        [v removeFromSuperview];
    }
}

- (void)setNumberOfPages:(NSInteger)numberOfPages {
    _numberOfPages = numberOfPages;
    [self setCurrentPage:_currentPage];
}


- (void)setCurrentPage:(NSInteger)currentPage {
    _currentPage = currentPage;
    
    [self removeAllSubView:_pageContentView];
    
    CGFloat _x          = 0.0f;
    CGFloat _w          = 7.0f;
    CGFloat _h          = _w;
    CGFloat _sumWidth   = 0.0f;
    
    for (int i = 0; i < _numberOfPages; i++) {
        UIView *pageView = [[UIView alloc] initWithFrame:CGRectZero];
        pageView.layer.borderWidth  = 1.0f;
        pageView.layer.borderColor  = [[UIColor whiteColor] colorWithAlphaComponent:1.0f].CGColor;
        pageView.layer.cornerRadius = _h/2;
        
        if (_currentPage == i) {
            _w = 15.0f;
            [pageView setFrame:CGRectMake(_x, 0.0f, _w, _h)];
            [pageView setBackgroundColor:[[UIColor whiteColor] colorWithAlphaComponent:1.0f]];
            _x+= _w + 5.0f;
        } else {
            _w = 7.0f;
            [pageView setFrame:CGRectMake(_x, 0.0f, _w, _h)];
            [pageView setBackgroundColor:[UIColor clearColor]];
            _x+= _w + 5.0f;
        }
        
        _sumWidth += (i == (_numberOfPages-1)) ? _w : _w + 5; //전체 가로사이즈
        [_pageContentView addSubview:pageView];
    }
    
    [_pageContentView setFrame:CGRectMake(0.0f, 3.0f, _sumWidth, _h)];
    [_pageContentView setCenter:CGPointMake(self.center.x, 0.0f)];
    
}

@end

 

딱히, 코드에 부가적인 설명은 필요없고 다음은 해당 클래스를 사용하는 부분이다. 

3. 사용예

_pageControl = [[CustomPageControl alloc] initWithFrame:CGRectMake(0.0, self.frame.size.height - 15, SCREEN_WIDTH, 10)];
_pageControl.currentPage = 0;
_pageControl.numberOfPages = _size;
    
    
//페이징되는 시점에 
_pageControl.currentPage = page % _size;

 

의도한 바(?)는 아니지만, 기존에 사용하던 코드는 수정하지 않아도 되도록 구현을 한 경우이다.