iOS 사용자 정의 UITabBar 와 레이아웃 설명

소 편 이 정리 한 글iOS 프로젝트 기본 프레임 워 크 구축에서 우 리 는 TabBarItem 의 이미지 속성 과 문자 속성 에 대해 사용자 정의 설정 을 하 는 방법 을 상세 하 게 설명 했다.그러나 TabBarItem 의 그림 과 문자 속성 을 수정 하 는 동시에 TabBarItem 의 위 치 를 사용자 정의 해 야 할 때 가 많 습 니 다.그러면 시스템 이 자체 적 으로 가지 고 있 는 TabBar 의 스타일 이 우리 의 프로젝트 수 요 를 만족 시 키 지 못 하기 때문에 우 리 는 시스템 의 UITabBar 를 사용자 정의 하여 우리 의 프로젝트 수 요 를 달성 해 야 합 니 다.예 를 들 어 시 나 닷 컴 웨 이 보 앱 의 아래쪽 tab 의 item 은 자체 테 이 프 를 가 진 Tab Baritem 으로 이 루어 질 수 없습니다.가장 중간 에 있 는[+]웨 이 보 는 tab 를 전환 하 는 것 이 아니 라 현재 페이지 에 편집 발표 페이지 를 덮어 서 발표 가 완료 되 거나 취소 한 후에 이전 페이지 로 돌아 가 전환 하지 않 았 습 니 다.이때 우 리 는 TabBar 에 대해 사용자 정의 가 필요 합 니 다.맨 중간 에 TabBar 공간 을 비 워 서 이[+]발표 단 추 를 배치 합 니 다.　　　　　


우리 의 프로젝트 는'백 번 생각해 도 누나 가 안 된다'는 앱 의 기능 모듈 을 모방 하여 학습 하고 향상 시 키 는 것 입 니 다.TabBar 의 스타일 은 웨 이 보 의 스타일 과 대체적으로 비슷 합 니 다(위의 그림 오른쪽 그림 참조).가장 중간 에 있 는 Tab 버튼 도 게시 기능 입 니 다.또한 현재 페이지 에 편집 발표 페이지 를 직접 덮어 서 발표 가 완료 되 거나 취소 한 후에 다시 이전 페이지 로 돌아 갑 니 다.전환 이 진행 되 지 않 았 습 니 다.
해결 방안
시 나 웨 이 보 와 우리 프로젝트 의 이런 상황 에 대해 두 가지 해결 방향 이 있다.
TabBarItem 5 개 를 정의 한 다음 TabBar 에 TabBarItem 등 크기 의 게시 단 추 를 맨 가운데 에 추가 하고 클릭 이 벤트 를 추가 합 니 다.크기 가 같 기 때문에 새 단 추 는 맨 가운데 TabBarItem 을 완전히 덮어 씁 니 다.맨 가운데 TabBarItem 의 응답 이벤트 도 차 단 됩 니 다.단 추 를 누 르 면 사용자 정의 TabBar 에 응답 하고 다시 쓰기 때 문 입 니 다. layoutSubviews 방법 은 4 개의 TabBarItem 의 레이아웃 과 크기 를 수정 하고 중간 을 비 운 다음 사용자 정의[발표]단 추 를 추가 하여 이 벤트 를 클릭 하면 컨트롤 실현 방안 을 1 로 덮어 쓸 수 있 습 니 다.
이런 방안 의 사고방식 은 위 에서 이미 말 했 듯 이 먼저 한 자 리 를 차지 한 다음 에 하나의 버튼 으로 그 위 에 덮 는 것 이다.주요 단점 은 위치 와 컨트롤 러 를 먼저 신청 해 야 하 는 것 이 낭비 적 이 고 각 컨트롤 러 의 크기 가 균일 한 상황 에 만 적용 된다 는 것 이다.우리 가 필요 로 하 는 모든 TabBarItem 의 규격 과 사이즈 가 다 를 때 우 리 는 이런 방안 을 사용 하여 실현 할 수 없다.
몇 가지 설명 할 만 한 것 이 있다.
모든 UITab BarItem 의 문자 속성 을 설정 하 는 것 은 이전 글 에서 언급 되 었 습 니 다.[발표]버튼 의 초기 화 는 하나의 예 모드 로 만들어 야 합 니 다.저희 프로젝트 에[발표]버튼 이 하나 밖 에 없 기 때문에 하나의 예 모드 를 사용 하 는 것 이 합 리 적 입 니 다.본 고 는 게 으 른 로 딩 방식 으로 하나의 예 모드 를 만 듭 니 다. viewWillAppear: 버튼 추가 [self.tabBar addSubview:self.publishButton]; 。왜 viewWillAppear: [발표]버튼 을 추가 합 니 다. viewDidLoad 첨가근본 적 인 원인 은 TabBarItem 이 TabBar 에 불 러 온 것 입 니 다. viewDidLoad 그 후에 실 행 된 것 은 다음 두 번 째 부분 에서 이 점 을 검증 했다. 지난 글 에서 tabbarcontroller 는 컨트롤 러 를 만 들 때 view didLoad 를 불 러 옵 니 다.따라서[발표]단 추 를 추가 하면 view DidLoad 에서[발표]단 추 는 TabBar 에서 첫 번 째 로 추 가 됩 니 다.그러면[발표]단 추 는 TabBarItem 에 의 해 덮어 집 니 다.그러면 우 리 는 우리 의 목적 을 달성 할 수 있 습 니 다.

#import "XMGTabBarController.h"

@interface XMGTabBarController ()
/**         */
@property (nonatomic, strong) UIButton *publishButton;

@end

@implementation XMGTabBarController

#pragma mark -    
- (void)viewDidLoad {
 [super viewDidLoad];
 
 /****     UITabBarItem      ****/
 UITabBarItem *item = [UITabBarItem appearance];
 //           
 NSMutableDictionary *normalAttrs = [NSMutableDictionary dictionary];
 normalAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:14];
 normalAttrs[NSForegroundColorAttributeName] = [UIColor grayColor];
 [item setTitleTextAttributes:normalAttrs forState:UIControlStateNormal];
 //           
 NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
 selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
 [item setTitleTextAttributes:normalAttrs forState:UIControlStateSelected];
 
 /****        ****/
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
 
 //            
 [self setupOneChildViewController:[[UIViewController alloc] init] title:nil image:nil selectedImage:nil];
 
 [self setupOneChildViewController:[[UIViewController alloc] init] title:@"  " image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@" " image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
}

/**
 *      viewWillAppear:         ?
 *  viewWillAppear:        , tabBar       5 UITabBarButton
 *           : [    ]    UITabBarButton  
 */
- (void)viewWillAppear:(BOOL)animated
{
 [super viewWillAppear:animated];
 
 /****          ****/
 [self.tabBar addSubview:self.publishButton];
}
#pragma mark -    
/**      */
- (UIButton *)publishButton
{
 if (!_publishButton) {
 _publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
 _publishButton.backgroundColor = XMGRandomColor;
 [_publishButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
 [_publishButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
 _publishButton.frame = CGRectMake(0, 0, self.tabBar.frame.size.width / 5, self.tabBar.frame.size.height);
 _publishButton.center = CGPointMake(self.tabBar.frame.size.width * 0.5, self.tabBar.frame.size.height * 0.5);
 [_publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
 }
 return _publishButton;
}
#pragma mark -   
/**
 *       
 */
- (void)publishClick
{
 XMGLogFunc
 XMGTestViewController *test = [[XMGTestViewController alloc] init];
 [self presentViewController:test animated:YES completion:nil];
}
@end

 2 사용자 정의 TabBar
사용자 정의 TabBar 는 우리 의 요구 에 따라 TabBar 의 하위 컨트롤 의 속성 과 레이아웃 을 완전히 배치 하고 설정 할 수 있 습 니 다.

@interface XMGTabBarController ()
@end

@implementation XMGTabBarController
#pragma mark -    
- (void)viewDidLoad {
 [super viewDidLoad];
 
 /****     UITabBarItem      ****/
 //  
 
 /****        ****/
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@"  " image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
 [self setupOneChildViewController:[[UIViewController alloc] init] title:@"  " image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
 [self setupOneChildViewController:[[UITableViewController alloc] init] title:@" " image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
 
 /****   TabBar ****/
 [self setValue:[[XMGTabBar alloc] init] forKeyPath:@"tabBar"];
}
@end

다음 코드 는 TabBar 의.m 파일 을 사용자 정의 하 는 주요 내용 입 니 다.주로 다시 쓰 는 것 입 니 다. layoutSubviews 방법,이 방법 에서 우 리 는 네 개의 단추 의 크기 와 레이아웃 을 조정 한 다음 에 가장 중간 에[발표]단 추 를 추가 합 니 다.마찬가지 로 몇 가지 주의해 야 할 것 도 있다.
[발표]버튼 의 초기 화 는 위 와 같 습 니 다.단일 모드 로 초기 화 해 야 합 니 다.구체 적 으로 전개 되 지 않 습 니 다.다시 쓴다 layoutSubviews 방법 은 먼저 아버지 류 의 이 방법 을 사용 해 야 한다. [super layoutSubviews]; ，이렇게 하면 먼저 TabBarItem 을 배치 한 다음 에 이 구 조 를 바탕 으로 구 조 를 조정 할 수 있다.부모 클래스 레이아웃 방법 을 호출 하 는 문 구 는 뒤에 놓 을 수 없고 생략 할 수 없습니다.이 방법 은 TabBarItem 을 레이아웃 하 는 것 외 에 다른 설정 이 많 기 때 문 입 니 다.통과 하 다. self.subviews 현재 하위 컨트롤 을 가 져 옵 니 다.현재 하위 컨트롤 의 종류 와 수량 을 인쇄 한 다음 에 수정 해 야 할 컨트롤 을 적당 하 게 선별 하여 배치 할 수 있 습 니 다.저 희 는 보통 KVC 방법 으로 가 져 오고 수정 할 수 있 습 니 다.예 를 들 어 위 에서 현재 TabBar 를 수정 합 니 다. [self setValue:[[XMGTabBar alloc] init] forKeyPath:@"tabBar"]; ，속성 과 구성원 변 수 를 어떻게 얻 는 지 에 대해 참고 할 수 있 습 니 다iOS 프로젝트-기본 프레임 워 크 구축

#import "XMGTabBar.h"

@interface XMGTabBar()
/**         */
@property (nonatomic, weak) UIButton *publishButton;
@end

@implementation XMGTabBar

#pragma mark -    
/**      */
- (UIButton *)publishButton
{
 if (!_publishButton) {
 UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
 publishButton.backgroundColor = XMGRandomColor;
 [publishButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
 [publishButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
 [publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
 [self addSubview:publishButton];
 _publishButton = publishButton;
 }
 return _publishButton;
}

#pragma mark -    
/**
 *      
 */
- (void)layoutSubviews
{
 [super layoutSubviews];
 
 /****     UITabBarButton frame ****/
 //      
 CGFloat buttonW = self.frame.size.width / 5;
 CGFloat buttonH = self.frame.size.height;
 CGFloat buttonY = 0;
 //     
 int buttonIndex = 0;
 
 for (UIView *subview in self.subviews) {
 //     UITabBarButton
// if (![@"UITabBarButton" isEqualToString:NSStringFromClass(subview.class)]) continue;
 if (subview.class != NSClassFromString(@"UITabBarButton")) continue;
 
 //   frame
 CGFloat buttonX = buttonIndex * buttonW;
 if (buttonIndex >= 2) { //    2 UITabBarButton
 buttonX += buttonW;
 }
 subview.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
 
 //     
 buttonIndex++;
 }
 
 /****           frame ****/
 self.publishButton.frame = CGRectMake(0, 0, buttonW, buttonH);
 self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
}

#pragma mark -   
- (void)publishClick
{
 XMGLogFunc
}
@end

현재 1 에서 TabBar 가 언급 되 어 있 는 TabBar Item 을 불 러 오 는 것 을 검증 하기 위해 서 는 viewDidLoad 그 다음 에 실 행 했 습 니 다.TabBar 를 사용자 정의 할 때 정지점 디 버 깅 을 했 는데 XMG tabar Controller 를 먼저 실행 한 것 이 확실 합 니 다. viewdLoad 방법,그리고 사용자 정의 TabBar 를 실행 합 니 다. layoutSubviews 방법
3 붉 은 점 알림 추가
현재 많은 App 의 Tab BarItem 은 새로운 소식 이 있 을 때 오른쪽 상단 에 빨 간 점 알림 이 있 습 니 다.어떤 것 은 구체 적 인 숫자 알림 도 있 습 니 다.우리 가 자주 사용 하 는 QQ,위 챗,웨 이 보,톱기사 등 과 비슷 한 기능 이 있 습 니 다.이 힌트 는 iOS 에서 학명 을 badge 라 고 합 니 다.iOS 의 TabBarItem 은 이 속성 과 컨트롤 을 자체 적 으로 가지 고 있 습 니 다.저 희 는 자신의 수요 에 따라 설정 할 수 있 습 니 다.아래 그림 은 iOS 11 의 설정 문서 입 니 다.알림 수량,색상 을 사용자 정의 로 설정 할 수 있 고 알림 문자 의 속성 을 서로 다른 상태 에서 설정 할 수 있 습 니 다.

iOS 10 이전에 badge 의 알림 색상 을 설정 할 수 없다 고 합 니 다.이 럴 때 필요 하 다 면 TabBarItem 을 사용자 정의 한 다음 에 사용자 정의 badge 를 설정 할 수 밖 에 없습니다.본 고 는 이 점 에 대해 상세 하 게 설명 하지 않 고 필요 한 동료 가 있 으 면 스스로 어머니 에 게 도움 을 청 할 수 있다.