iOS 간단 한 네 비게 이 션 표시 줄 색상 그 라 데 이 션 인 스 턴 스 코드 구현

머리말
많은 앱 의 첫 페이지 는 티몰 과 징 둥 과 비슷 한 네 비게 이 션 바 를 만들어 페이지 가 미 끄 러 지 는 과정 에서 네 비게 이 션 바 가 그 라 데 이 션 되 는 효 과 를 실현 해 야 한다.필 자 는 이전에 프로젝트 에서 세 가지 방법 을 사용 한 적 이 있 는데 나중에 업데이트 버 전이 효력 을 잃 었 기 때문에 내 비게 이 션 표시 줄 에 대한 자신의 인식 을 결합 시 켜 이 기능 을 실현 하기 로 결정 했다.간단 하고 쉬 운 iOS 네 비게 이 션 표시 줄 색상 그 라 데 이 션 방안 을 완성 합 니 다.
[문 말 부 운행 효과 및 demo]다음 말 은 더 이상 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
사고 와 원리
어떻게 탐색 표시 줄 에 색 을 설정 합 니까?

//   
self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

//   
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"red.png"] forBarMetrics:UIBarMetricsDefault];

상기 두 가지 방법 은 모두 네 비게 이 션 표시 줄 에 색 을 추가 할 수 있 지만 방법 1 의 효 과 는 여기에 필요 한 것 이 아니다.

배경 색 효과 직접 설정
UINavigationBar 의 구조 에 UIView,UIImageView,UILabel 등 컨트롤 이 추가 되 어 UINavigationBar 를 덮 었 기 때문이다.
방법 2 의 효 과 는 기대 에 부합된다.

UINavigationBar 구성 도
어떻게 색 을 그림 으로 바 꿉 니까?
코드 를 직접 붙 이 고 설명 을 첨부 합 니 다:

- (UIImage *)imageWithColor:(UIColor *)color {

 //  1           
 CGRect rect = CGRectMake(0, 0, 1, 1);
 UIGraphicsBeginImageContext(rect.size);

 //            
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetFillColorWithColor(context, [color CGColor]);
 CGContextFillRect(context, rect);

 //               
 UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();

 return image;
}

어떻게 미끄럼 할 때 네 비게 이 션 표시 줄 에 배경 을 설정 합 니까?
일반적으로 보 여 주 는 정보 페이지 에는 미끄럼 보기(UITableview,UICollection View 등)가 존재 합 니 다.미끄럼 보기 의 scrollView Did Scroll 이라는 방법 에서 미끄럼 보기 의 세로 오프셋 에 따라 색상 의 투명 도 를 계산 할 수 있 을 것 이 라 고 생각 하기 어렵 지 않 습 니 다.
이루어지다
이상 의 문제 사고 와 기본 원 리 를 제외 하고 실제 실현 과정 에서 주의해 야 할 내용 도 있다.
탐색 표시 줄 숨 기기 및 표시
페이지 를 끌 어 내 릴 때 네 비게 이 션 표시 줄 을 숨 기 는 방법 은 두 가지 가 있 습 니 다.

//   ：
[self.navigationController setNavigationBarHidden:YES];

//   ：
self.navigationController.navigationBar.hidden = YES;

상기 두 가지 방법 은 효과 가 같 습 니 다.하 나 는 navigationController 를 조작 하 는 속성(navigationBar 는 navigationController 의 속성)이 고 하 나 는 navigationBar 를 조작 하 는 속성 입 니 다.
그러나 방법 은 곧 bug 가 나타 날 것 입 니 다.즉,페이지 의 초기 상태 에서 setNavigation BarHidden 이 YES 이 고 navigation Bar 가 존재 하지 않 는 순간 에 해당 합 니 다.그러면 네 비게 이 션 표시 줄 의 컨트롤 도 자 연 스 럽 게 보이 지 않 고 navigation Bar 의 등장 과 사라 짐 이 매우 갑 작 스 럽 습 니 다.
방법 을 사용 하면 두 가지 효과 가 훨씬 좋 을 것 입 니 다.navigation Bar 자체 가 존재 하기 때문에 디 스 플레이 와 숨겨 진 조작 만 했 을 뿐 과도 도 상대 적 으로 원활 합 니 다.
페이지 전환 처리
네 비게 이 션 바 는 공공 구역 으로서 사용자 정의 할 수 있 으 며 현재 페이지 의 네 비게 이 션 바 와 다른 페이지 네 비게 이 션 바 간 의 상호 영향 도 고려 해 야 합 니 다.
4.567917.네 비게 이 션 표시 줄 아래 에 있 는 선 은 사실 shadow Image 라 는 그림 입 니 다.view WillAppear 에서 숨 기 고 view WillDisappear 에서 복원 되 었 습 니 다4.567917.페이지 가 나타 날 때 다른 페이지 가 돌아 오 는 것 을 방지 하기 위해 다른 페이지 에 설 치 된 네 비게 이 션 표시 줄 배경 색 이 이 페이지 에 영향 을 주 고 view WillAppear 에서 네 비게 이 션 표시 줄 배경 색 을 먼저 비 워 두 었 습 니 다

이 페이지 로 돌아 갈 때 네 비게 이 션 표시 줄 의 색상 과 떠 날 때 일치 하도록 페이지 가 나타 날 때 scrollViewDid Scroll 방법 을 수 동 으로 조정 하여 현재 나타 날 색상 을 계산 합 니 다

포장 하 다
사용 하기 편 하도록 UINavigationBar 의 category:UINavigationBar+ChangeColor 를 패키지 합 니 다.

//UINavigationBar+ChangeColor.m  

//    
- (void)changeColor:(UIColor *)color withOffsetY:(CGFloat)offsetY {

 if (offsetY < 0) {

 //        
 self.hidden = YES;
 }else {

 self.hidden = NO;
 //     ，180            
 CGFloat alpha = offsetY / 180 > 1.0f ? 1 : (offsetY / 180);

 //            
 UIImage *image = [self imageWithColor:[color colorWithAlphaComponent:alpha]];
 [self setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

 self.translucent = alpha >= 1.0f ? NO : YES;
 }
}

사용 방법:

star:네 비게 이 션 표시 줄 아래 의 횡선 을 숨 기 고 배경 색 을 비 웁 니 다.보통 view WillAppear 에서 호출 합 니 다

changeColor:WithScrollView:AndValue:색상,미끄럼 보기,임계값 을 입력 하여 구현 합 니 다.일반적으로 scrollView Did Scroll 에서 호출 됩 니 다

reset:네 비게 이 션 표시 줄 아래 횡선 을 표시 하고 네 비게 이 션 표시 줄 을 복원 하 며 보통 view WillDisappear 에서 호출 합 니 다

//VC.m  

/*        */
- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];

 [self.navigationController.navigationBar start];

 //                        
 [self scrollViewDidScroll:_tableview];
}

/*        */
- (void)viewWillDisappear:(BOOL)animated {
 [super viewWillDisappear:animated];

 [self.navigationController.navigationBar reset];
}

/*          */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 [self.navigationController.navigationBar changeColor:[UIColor redColor] withOffsetY:scrollView.contentOffset.y];
}

효과 전시
전체 데모 （ 로 컬 다운로드 ）
총결산
4.567917.시스템 자체 의 네 비게 이 션 바 가 수 요 를 만족 시 키 지 못 하기 때문에 개발 과정 에서 네 비게 이 션 바 는 배경 색 만 수정 하 더 라 도 사용자 정의 가 필요 하 다4.567917.네 비게 이 션 바 의 구 조 를 이해 하 는 것 이 더욱 쉽다4.567917.사용자 정의 네 비게 이 션 표시 줄 도 다른 페이지 의 네 비게 이 션 표시 줄 과 의 상호 영향 을 고려 해 야 한다자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.