正文

iOS仿网易新闻滚动导航条效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0713

这篇文章主要为大家详细介绍了iOS仿网易新闻滚动导航条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了ios滚动导航条效果展示的具体代码，供大家参考，具体内容如下

实现效果

效果：选择不同的栏目，下面出现不同的视图，栏目条可以滚动；下面的视图也可以滚动，滚动时上面对应的栏目要选中颜色为红色；

滚动的导航条包括两部分：标题滚动视图(uiscrollview)，内容滚动视图(uiscrollview)

iOS仿网易新闻滚动导航条效果

实现代码

1.首先实现main.storyboard

iOS仿网易新闻滚动导航条效果

2.创建多个子控制器:头条、科技、汽车、体育、视频、图片、热点

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 头条viewcontroller, 其它控制器和这个控制器都一样，只是背景颜色不同而已
#import <uikit/uikit.h>
@interface toplineviewcontroller : uiviewcontroller
 
@end
//----------------------------------------------------------------
#import "toplineviewcontroller.h"
@interface toplineviewcontroller ()
 
@end
 
@implementation toplineviewcontroller
- (void)viewdidload {
  [super viewdidload];
 
  self.view.backgroundcolor = [uicolor blackcolor];
}
@end

实现main.storyboard对应的视图控制器viewcontroller

?
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
#import <uikit/uikit.h>
@interface viewcontroller : uiviewcontroller
 
@end
//----------------------------------------------------------------
#import "viewcontroller.h"
#import "toplineviewcontroller.h"
#import "technologyviewcontroller.h"
#import "carviewcontroller.h"
#import "sportsviewcontroller.h"
#import "videoviewcontroller.h"
#import "imageviewcontroller.h"
#import "hotviewcontroller.h"
 
#define screenwidth [uiscreen mainscreen].bounds.size.width
#define screenheight [uiscreen mainscreen].bounds.size.height
 
@interface viewcontroller () <uiscrollviewdelegate>
 
@property (weak, nonatomic) iboutlet uiscrollview *titlescrollview;
 
@property (weak, nonatomic) iboutlet uiscrollview *contentscrollview;
 
@property (strong, nonatomic) nsmutablearray *buttons;
@property (strong, nonatomic) uibutton *selectedbutton;
 
@end
 
@implementation viewcontroller
 
- (void)viewdidload {
  [super viewdidload];
  self.navigationitem.title = @"网易新闻";
  // 1. 初始化标题滚动视图上的按钮
  [self initbuttonsforbuttonscrollview];
 
 
}
 
 
- (void) initbuttonsforbuttonscrollview {
  // 初始化子控制器
  [self initchildviewcontrollers];
  cgfloat buttonwidth = 100;
  cgfloat buttonheight = 40;
  nsinteger childviewcontrollercount = self.childviewcontrollers.count;
  for (nsinteger i = 0; i < childviewcontrollercount; i++) {
    uiviewcontroller *childviewcontroller = self.childviewcontrollers[i];
    uibutton *titlebutton = [uibutton buttonwithtype:uibuttontypecustom];
    titlebutton.tag = i;
    cgfloat x = i * buttonwidth;
    titlebutton.frame = cgrectmake(x, 0, buttonwidth, buttonheight);
    [titlebutton settitle:childviewcontroller.title forstate:uicontrolstatenormal];
    [titlebutton settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];
    [titlebutton addtarget:self action:@selector(titlebuttononclick:) forcontrolevents:uicontroleventtouchupinside];
    [self.titlescrollview addsubview:titlebutton];
 
    [self.buttons addobject:titlebutton];
  }
 
  self.titlescrollview.contentsize = cgsizemake(buttonwidth * childviewcontrollercount, 0);
  self.titlescrollview.showshorizontalscrollindicator = no;
  self.titlescrollview.bounces = no;
 
  self.contentscrollview.contentsize = cgsizemake(screenwidth * childviewcontrollercount, 0);
  self.contentscrollview.showshorizontalscrollindicator = no;
  self.contentscrollview.pagingenabled = yes;
  self.contentscrollview.delegate = self;
 
  // 禁止额外滚动区域
  self.automaticallyadjustsscrollviewinsets = no;
 
  // 初始化时默认选中第一个
  [self titlebuttononclick:self.buttons[0]];
}
 
 
- (void)titlebuttononclick:(uibutton *)button {
  // 1. 选中按钮
  [self selectingbutton:button];
 
  // 2. 显示子视图
  [self addviewtocontentscrollview:button];
}
 
- (void)selectingbutton:(uibutton *)button {
  [_selectedbutton settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];
  _selectedbutton.transform = cgaffinetransformmakescale(1.0, 1.0);
  [button settitlecolor:[uicolor redcolor] forstate:uicontrolstatenormal];
  button.transform = cgaffinetransformmakescale(1.3, 1.3); // 选中字体变大，按钮变大，字体也跟着变大
  _selectedbutton = button;
 
  // 选中按钮时要让选中的按钮居中
  cgfloat offsetx = button.frame.origin.x - screenwidth * 0.5;
  cgfloat maxoffsetx = self.titlescrollview.contentsize.width - screenwidth;
 
  if (offsetx < 0) {
    offsetx = 0;
  } else if (offsetx > maxoffsetx) {
    offsetx = maxoffsetx;
  }
 
  [self.titlescrollview setcontentoffset:cgpointmake(offsetx, 0) animated:yes];
}
 
- (void)addviewtocontentscrollview:(uibutton *)button {
  nsinteger i = button.tag;
  uiviewcontroller *childviewcontroller = self.childviewcontrollers[i];
  cgfloat x = i * screenwidth;
 
  // 防止添加多次
  if (childviewcontroller.view.subviews != nil) {
    childviewcontroller.view.frame = cgrectmake(x, 0, screenwidth, screenheight);
    [self.contentscrollview addsubview:childviewcontroller.view];
  }
  self.contentscrollview.contentoffset = cgpointmake(x, 0);
}
 
#pragma mark - uiscrollviewdelegate
- (void)scrollviewdidscroll:(uiscrollview *)scrollview {
 
 
}
 
// 滚动结束时，将对应的视图控制器的视图添加到内容滚动视图中
- (void)scrollviewdidenddecelerating:(uiscrollview *)scrollview {
  nsinteger i = self.contentscrollview.contentoffset.x / screenwidth;
  [self addviewtocontentscrollview:_buttons[i]];
 
  // 内容滚动视图结束后选中对应的标题按钮
  [self selectingbutton:_buttons[i]];
}
 
- (void)initchildviewcontrollers {
  // 0.头条
  toplineviewcontroller * topviewcontroller = [[toplineviewcontroller alloc] init];
  topviewcontroller.title = @"头条";
  [self addchildviewcontroller:topviewcontroller];
 
  // 1.科技
  technologyviewcontroller * technologyviewcontroller = [[technologyviewcontroller alloc] init];
  technologyviewcontroller.title = @"科技";
  [self addchildviewcontroller:technologyviewcontroller];
 
  // 2.汽车
  carviewcontroller * carviewcontroller = [[carviewcontroller alloc] init];
  carviewcontroller.title = @"汽车";
  [self addchildviewcontroller:carviewcontroller];
 
  // 3.体育
  sportsviewcontroller * sportsviewcontroller = [[sportsviewcontroller alloc] init];
  sportsviewcontroller.title = @"体育";
  [self addchildviewcontroller:sportsviewcontroller];
 
  // 4.视频
  videoviewcontroller * videoviewcontroller = [[videoviewcontroller alloc] init];
  videoviewcontroller.title = @"视频";
  [self addchildviewcontroller:videoviewcontroller];
 
  // 5.图片
  imageviewcontroller * imageviewcontroller = [[imageviewcontroller alloc] init];
  imageviewcontroller.title = @"图片";
  [self addchildviewcontroller:imageviewcontroller];
 
  // 6.热点
  hotviewcontroller * hotviewcontroller = [[hotviewcontroller alloc] init];
  hotviewcontroller.title = @"热点";
  [self addchildviewcontroller:hotviewcontroller];
}
 
- (nsmutablearray *)buttons {
  if (_buttons == nil) {
    _buttons = [nsmutablearray array];
  }
 
  return _buttons;
}
@end

以上代码即可实现网易新闻 滚动的导航条， 因该功能可能在其它地方使用，所以最好可以将该功能抽出来，便于其它控制器集成，暂时还没做。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/vbirdbest/article/details/52449698