由于項(xiàng)目需求要做一個(gè)這樣的功能旨怠,所以做好之后拷泽,抽取出來夹姥,封裝了下,希望能幫到有需要的朋友儡陨。
一.效果圖
二.思路
A. 設(shè)置tableView
a.因?yàn)楫?dāng)UINavigationBar和UITabBar隱藏的時(shí)候褪子,tableView要完全占據(jù)整個(gè)屏幕,當(dāng)UINavigationBar和UITabBar顯示的時(shí)候骗村,tableView又要顯示在UINavigationBar下方嫌褪,所以需要設(shè)置tablewView的frame和contentInset:
self.tableView.frame = CGRectMake(0, -kNavigationBarHeight,kScreenWidth,kScreenHeight+kNavigationBarHeight);
self.tableView.contentInset = UIEdgeInsetsMake(kNavigationBarHeight,0,0,0);
B.設(shè)置UINavigationBar和UITabBar的位移
當(dāng)tableView向上移動(dòng)一個(gè)屬性,UINavigationBar要向上移動(dòng)一個(gè)屬性,UITabBar要向下移動(dòng)一個(gè)像素胚股,所以需要在- (void)scrollViewDidScroll:(UIScrollView*)scrollView方法中獲取每一次tableView滾動(dòng)的距離笼痛,因此需要記住上次tableView的偏移量距離:CGFloat_originalOffsetY;//上一次偏移量
CGFloat offsetY = scrollView.contentOffset.y-_originalOffsetY;//獲取每次滾動(dòng)偏移的距離
_originalOffsetY = scrollView.contentOffset.y;//將這次tableView偏移量重新賦值給_originalOffsetY
又因?yàn)楫?dāng)UINavigationBar和UITabBar已經(jīng)隱藏,繼續(xù)向上滾動(dòng)琅拌,已經(jīng)不需要隱藏缨伊,同樣的當(dāng)tableView滾動(dòng)到最后滾不動(dòng)的時(shí)候UINavigationBar和UITabBar也不需要移動(dòng),所以添加判斷條件
//判斷是否滾動(dòng)到底部
CGFloat bottomOffset = scrollView.contentSize.height - scrollView.contentOffset.y - scrollView.frame.size.height;
//判斷UINavigationBar是否已經(jīng)隱藏
scrollView.contentOffset.y > - (2*kNavigationBarHeight)
//UIScrollView 函數(shù)
- (void)scrollViewDidScroll:(UIScrollView*)scrollView {
CGFloat bottomOffset = scrollView.contentSize.height- scrollView.contentOffset.y- scrollView.frame.size.height;
if(scrollView.contentOffset.y> - kNavigationBarHeight && bottomOffset >0) {
CGFloat offsetY = scrollView.contentOffset.y-_originalOffsetY;
[self moveNavigationBarAndStatusBarByOffsetY:offsetY];
}
_originalOffsetY= scrollView.contentOffset.y;
}
C.設(shè)置UINavigationBar和UITabBar相關(guān)transform.ty
moveNavigationBarAndStatusBarByOffsetY函數(shù)設(shè)置UINavigationBar和UITabBar相關(guān)transform.ty位置的值进宝,同時(shí)設(shè)置相關(guān)背景圖片的透明度
// 通過偏移量移動(dòng)NavigationBar和StatusBar
- (void)moveNavigationBarAndStatusBarByOffsetY:(CGFloat)offsetY {
CGFloat transformTy = self.navigationController.navigationBar.transform.ty;
CGFloat tabbarTransformTy = self.tabBarController.tabBar.transform.ty;
// 向上滾動(dòng)
if (offsetY > 0) {
if (fabs(transformTy) >= kNavigationBarHeight) {
//當(dāng)NavigationBar的transfrom.ty大于NavigationBar高度刻坊,導(dǎo)航欄離開可視范圍,設(shè)置NavigationBar隱藏
[self setNavigationBarTransformProgress:1 navigationBarStatusType:NavigationBarStatusOfTypeHidden];
} else {
//當(dāng)NavigationBar的transfrom.ty小于NavigationBar高度党晋,導(dǎo)航欄在可視范圍內(nèi)谭胚,設(shè)置NavigationBar偏移位置和背景透明度
[self setNavigationBarTransformProgress:offsetY navigationBarStatusType:NavigationBarStatusOfTypeNormal];
}
if (fabs(tabbarTransformTy) >= kStatusBarHeight) {
//當(dāng)StatusTabBar的transfrom.ty大于StatusTabBar高度徐块,導(dǎo)航欄離開可視范圍,設(shè)置StatusTabBar隱藏
[self setStatusBarTransformProgress:1 statusBarStatusType:StatusBarStatusTypeOfHidden];
} else {
//當(dāng)當(dāng)StatusTabBar的transfrom.ty小于StatusTabBar高度灾而,導(dǎo)航欄在可視范圍內(nèi)胡控,設(shè)置StatusTabBar偏移位置和背景透明度
[self setStatusBarTransformProgress:offsetY statusBarStatusType:StatusBarStatusTypeOfNormal];
}
// 向下滾動(dòng)
} else if(offsetY < 0){
if (transformTy < 0 && fabs(transformTy) <= kNavigationBarHeight) {
//當(dāng)NavigationBar的transfrom.ty小于NavigationBar高度,導(dǎo)航欄進(jìn)入可視范圍內(nèi)绰疤,設(shè)置NavigationBar偏移位置和背景透明度
[self setNavigationBarTransformProgress:offsetY navigationBarStatusType:NavigationBarStatusOfTypeNormal];
} else {
//當(dāng)NavigationBar的transfrom.ty超過NavigationBar原來位置铜犬,設(shè)置NavigationBar顯示
[self setNavigationBarTransformProgress:0 navigationBarStatusType:NavigationBarStatusOfTypeShow];
}
if (tabbarTransformTy <= kStatusBarHeight && tabbarTransformTy > 0) {
//當(dāng)StatusTabBar的transfrom.ty小于StatusTabBar高度舞终,導(dǎo)航欄進(jìn)入可視范圍內(nèi)轻庆,設(shè)置StatusTabBar偏移位置和背景透明度
[self setStatusBarTransformProgress:offsetY statusBarStatusType:StatusBarStatusTypeOfNormal];
} else {
//當(dāng)StatusTabBar的transfrom.ty超過StatusTabBar原來位置,設(shè)置StatusTabBar顯示
[self setStatusBarTransformProgress:0 statusBarStatusType:StatusBarStatusTypeOfShow];
}
}
}
D. UINavigationBar和UITabBar背景圖透明度和顏色
通過這兩個(gè)函數(shù)
- (void)setStatusBarTransformProgress:(CGFloat)progress statusBarStatusType:(StatusBarStatusType)statusBarStatusType
和
- (void)setNavigationBarTransformProgress:(CGFloat)progress navigationBarStatusType:(NavigationBarStatusType)navigationBarStatusType
改變NavigationBarStatusTabBar背景圖透明圖和顏色
// 根據(jù)傳入的類型和漸變程度,改變StatusBar的顏色和位置
- (void)setStatusBarTransformProgress:(CGFloat)progress statusBarStatusType: (StatusBarStatusType)statusBarStatusType{
CGFloat transfromTy = self.tabBarController.tabBar.transform.ty;
if (statusBarStatusType == StatusBarStatusTypeOfHidden) {
if (transfromTy != kStatusBarHeight) {
[self.tabBarController.tabBar fj_moveByTranslationY:kStatusBarHeight * progress];
[self.tabBarController.tabBar fj_setImageViewAlpha:progress];
}
}else if(statusBarStatusType == StatusBarStatusTypeOfNormal) {
[self.tabBarController.tabBar fj_setTranslationY:-progress];
CGFloat alpha = 1 - fabs(self.tabBarController.tabBar.transform.ty)/kStatusBarHeight;
[self.tabBarController.tabBar fj_setImageViewAlpha:alpha];
}else if(statusBarStatusType == StatusBarStatusTypeOfShow) {
if (transfromTy != 0) {
[self.tabBarController.tabBar fj_moveByTranslationY: -kStatusBarHeight * progress];
[self.tabBarController.tabBar fj_setImageViewAlpha:(1-progress)];
}
}
}
// 根據(jù)傳入的類型和漸變程度,改變NavigationBar的顏色和位置
- (void)setNavigationBarTransformProgress:(CGFloat)progress navigationBarStatusType:(NavigationBarStatusType)navigationBarStatusType{
CGFloat transfromTy = self.navigationController.navigationBar.transform.ty;
if (navigationBarStatusType == NavigationBarStatusOfTypeHidden) {
if(transfromTy != -kNavigationBarHeight){
[self.navigationController.navigationBar fj_moveByTranslationY:-kNavigationBarHeight * progress];
[self.navigationController.navigationBar fj_setImageViewAlpha:progress];
}
}else if(navigationBarStatusType == NavigationBarStatusOfTypeNormal) {
[self.navigationController.navigationBar fj_setTranslationY: - progress];
CGFloat alpha = 1 - fabs(self.navigationController.navigationBar.transform.ty)/kNavigationBarHeight;
[self.navigationController.navigationBar fj_setImageViewAlpha:alpha];
}else if(navigationBarStatusType == NavigationBarStatusOfTypeShow) {
if(transfromTy != 0){
[self.navigationController.navigationBar fj_moveByTranslationY:-kNavigationBarHeight * progress];
[self.navigationController.navigationBar fj_setImageViewAlpha:(1-progress)];
}
}
}
E.設(shè)置UITabBar和UINavigationBar類方法
// 設(shè)置背景圖透明度
- (void)fj_setImageViewAlpha:(CGFloat)alpha;
// 根據(jù)translationY在原來位置上偏移
- (void)fj_setTranslationY:(CGFloat)translationY;
// 設(shè)置偏移translationY
- (void)fj_moveByTranslationY:(CGFloat)translationY;
**F.停止時(shí)刻處理 **
在- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate函數(shù)里面判斷當(dāng)前NavigationBar偏移是否超過一半敛劝,如果一半則動(dòng)畫隱藏余爆,如果沒有則動(dòng)畫顯示:
//恢復(fù)或隱藏navigationBar和statusBar
- (void)restoreNavigationBarAndStatusBarWithContentOffset:(CGPoint)contentOffset {
CGFloat navigationBarCenterHeight = kNavigationBarHeight/2.0;
CGFloat transformTy = self.navigationController.navigationBar.transform.ty;
if (transformTy < 0 && transformTy > -kNavigationBarHeight) {
if (transformTy < -navigationBarCenterHeight && contentOffset.y > -navigationBarCenterHeight) {
[UIView animateWithDuration:kDefaultAnimationTime animations:^{
[self hideNavigationBarAndStatusBar];
}];
}else {
[UIView animateWithDuration:kDefaultAnimationTime animations:^{
[self showNavigationBarAndStatusBar];
}];
}
}
}
三.最后:
送上一張喜歡的圖片:
這是gitHub鏈接,大家有興趣可以看一下夸盟,如果覺得不錯(cuò)蛾方,麻煩給個(gè)喜歡或星,謝謝上陕!