效果圖如下
分析如下：
1.導航欄一開始是隱藏的,隨著scrollview滾動而漸變
2.導航欄左右兩邊的navigationitem是一直顯示的
3.導航欄參考了途家app,使用了毛玻璃效果,背景是一張圖片
4.下拉放大圖片效果
5.title文字動畫效果
通過簡單分析,系統的導航欄實現以上效果有點困難,直接自定義一個假的導航欄更容易點
分布拆解實現以上效果
一.下拉放大header圖片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
- (void)viewdidload { [super viewdidload]; [self.view addsubview:self.scaleimageview]; // 設置展示圖片的約束 [_scaleimageview mas_makeconstraints:^(masconstraintmaker *make) { make.top.mas_equalto(0); make.left.equalto(self.view.mas_left); make.right.equalto(self.view.mas_right); make.height.mas_equalto(kheardh); }];}// tableview懶加載-(uitableview *)tableview{ if(_tableview == nil){ _tableview = [[uitableview alloc]initwithframe:self.view.bounds style:uitableviewstyleplain]; _tableview.contentinset = uiedgeinsetsmake(kheardh-35, 0, 0, 0); _tableview.delegate = self; _tableview.datasource = self; _tableview.separatorstyle = uitableviewcellseparatorstylenone; } return _tableview;}// 圖片的懶加載- (uiimageview *)scaleimageview{ if (!_scaleimageview) { _scaleimageview = [[uiimageview alloc] init]; _scaleimageview.contentmode = uiviewcontentmodescaleaspectfill; _scaleimageview.clipstobounds = yes; _scaleimageview.image = [uiimage imagenamed:@"666"]; } return _scaleimageview;}// 導航欄高度#define knavbarh 64.0f// 頭部圖片的高度#define kheardh 260#pragma mark - uiscrollviewdelegate- (void)scrollviewdidscroll:(uiscrollview *)scrollview { // 計算當前偏移位置 cgfloat offsety = scrollview.contentoffset.y; cgfloat delta = offsety - _lastoffsety; dlog(@"delta=%f",delta); dlog(@"offsety=%f",offsety); cgfloat height = kheardh - delta; if (height < knavbarh) { height = knavbarh; } [_scaleimageview mas_updateconstraints:^(masconstraintmaker *make) { make.height.mas_equalto(height); }];} |
二.導航欄左右兩邊的navigationitem是一直顯示的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
- (void)viewdidload { [super viewdidload]; // 直接添加到控制器的view上面,注意添加順序,在添加導航欄之后,否則會被遮蓋住 [self confignavigationbar];}- (void)confignavigationbar{ //左邊返回按鈕 uibutton *backbtn = [[uibutton alloc]init]; backbtn.frame = cgrectmake(0, 20, 44, 44); [backbtn setimage:[uiimage imagenamed:@"special_back"] forstate:uicontrolstatenormal]; [backbtn addtarget:self action:@selector(back) forcontrolevents:uicontroleventtouchupinside]; //右邊分享按鈕 uibutton *shartbtn = [[uibutton alloc]init]; shartbtn.frame = cgrectmake(screenwidth-44, 20, 44, 44); [shartbtn setimage:[uiimage imagenamed:@"special_share"] forstate:uicontrolstatenormal]; [shartbtn addtarget:self action:@selector(sharebtnclick) forcontrolevents:uicontroleventtouchupinside]; [self.view addsubview:backbtn]; [self.view addsubview:shartbtn];}// 返回-(void)back{ [self.navigationcontroller popviewcontrolleranimated:yes];} |
三.自定義導航欄及毛玻璃效果及title文字動畫效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
// 隱藏系統導航欄- (void)viewwillappear:(bool)animated{ [super viewwillappear:animated]; self.navigationcontroller.navigationbar.hidden = yes;}- (void)viewdidload { [super viewdidload]; self.navigationcontroller.navigationbar.hidden = yes; self.lastoffsety = - kheardh+35; [self.view addsubview:self.tableview]; self.tableview.backgroundcolor = [uicolor clearcolor]; [self.view addsubview:self.navigationview]; self.navigationcontroller.navigationbar.barstyle = uibarstyleblack;}// 自定義導航欄-(uiview *)navigationview{ if(_navigationview == nil){ _navigationview = [[uiview alloc]init]; _navigationview.frame = cgrectmake(0, 0, screenwidth, knavbarh); _navigationview.backgroundcolor = [uicolor clearcolor]; _navigationview.alpha = 0.0; //添加子控件 [self setnavigationsubview]; } return _navigationview;}// 注意:毛玻璃效果api是ios8的,適配ios8以下的請用其他方法-(void)setnavigationsubview{ // 毛玻璃背景 uiimageview *bgimgview = [[uiimageview alloc] initwithframe:_navigationview.bounds]; bgimgview.image = [uiimage imagenamed:@"666"]; [_navigationview addsubview:bgimgview]; /** 毛玻璃特效類型 * uiblureffectstyleextralight, * uiblureffectstylelight, * uiblureffectstyledark */ uiblureffect * blureffect = [uiblureffect effectwithstyle:uiblureffectstyledark]; // 毛玻璃視圖 uivisualeffectview * effectview = [[uivisualeffectview alloc] initwitheffect:blureffect]; //添加到要有毛玻璃特效的控件中 effectview.frame = bgimgview.bounds; [bgimgview addsubview:effectview]; //設置模糊透明度 effectview.alpha = 0.9f; //中間文本框 uiview *centertextview = [[uiview alloc]init]; self.centertextview = centertextview; cgfloat centertextviewx = 0; cgfloat centertextviewy = 64; cgfloat centertextvieww = 0; cgfloat centertextviewh = 0; //文字大小 nsstring *title = @"pg.lostk開啟后搖滾的新圖景"; nsstring *desc = @"搖滾清心坊8套"; cgsize titlesize = [title sizewithattributes:@{nsfontattributename:[uifont systemfontofsize:12]}]; cgsize descsize = [desc sizewithattributes:@{nsfontattributename:[uifont systemfontofsize:11]}]; centertextvieww = titlesize.width > descsize.width ? titlesize.width : descsize.width; centertextviewh = titlesize.height + descsize.height +10; centertextviewx = (screenwidth - centertextvieww) / 2; centertextview.frame = cgrectmake(centertextviewx, centertextviewy, centertextvieww, centertextviewh); //文字label uilabel *titlelabel = [[uilabel alloc]init]; titlelabel.text = title; titlelabel.font = [uifont systemfontofsize:12]; titlelabel.textcolor = [uicolor whitecolor]; titlelabel.frame = cgrectmake(0,5, centertextvieww, titlesize.height); uilabel *desclabel = [[uilabel alloc]init]; desclabel.textalignment = nstextalignmentcenter; desclabel.text = desc; desclabel.font = [uifont systemfontofsize:11]; desclabel.textcolor = [uicolor whitecolor]; desclabel.frame = cgrectmake(0, titlesize.height + 5, centertextvieww, descsize.height); [centertextview addsubview:titlelabel]; [centertextview addsubview:desclabel]; [_navigationview addsubview:centertextview];}聲明控件@property(nonatomic,strong) uiview *navigationview; // 導航欄@property(nonatomic,strong) uiview *centertextview; // title文字@property (assign, nonatomic) cgfloat lastoffsety; // 記錄上一次位置@property (nonatomic,strong) uiimageview *scaleimageview; // 頂部圖片核心代碼#pragma mark - scrollviewdelegate- (void)scrollviewdidscroll:(uiscrollview *)scrollview { // 計算當前偏移位置 cgfloat offsety = scrollview.contentoffset.y; cgfloat delta = offsety - _lastoffsety; dlog(@"delta=%f",delta); dlog(@"offsety=%f",offsety); cgfloat height = kheardh - delta; if (height < knavbarh) { height = knavbarh; } cgfloat margin = 205; if (delta>margin && delta<margin+39) { self.centertextview.y = 64 - (delta-margin); self.centertextview.alpha = 1.0; } if (delta>margin+39) { self.centertextview.y = 25; self.centertextview.alpha = 1.0; } if (delta<=margin) { self.centertextview.alpha = 0; } if (delta<= 0) { self.centertextview.y =64; self.centertextview.alpha = 0.0; } [_scaleimageview mas_updateconstraints:^(masconstraintmaker *make) { make.height.mas_equalto(height); }]; cgfloat alpha = delta / (kheardh - knavbarh); if (alpha >= 1.0) { alpha = 1.0; } self.navigationview.alpha = alpha;} |
總結
以上就是這篇文章的全部內容，希望對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
