宽带三晋2,手机百分网,搜搜音乐网
本文实例为大家分享了ios滚动导航条效果展示的具体代码，供大家参考，具体内容如下
实现效果
效果：选择不同的栏目，下面出现不同的视图，栏目条可以滚动；下面的视图也可以滚动，滚动时上面对应的栏目要选中颜色为红色；
滚动的导航条包括两部分：标题滚动视图(uiscrollview)，内容滚动视图(uiscrollview)
实现代码
1.首先实现main.storyboard
2.创建多个子控制器:头条、科技、汽车、体育、视频、图片、热点
我要评论
// 头条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
#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
以上代码即可实现网易新闻 滚动的导航条， 因该功能可能在其它地方使用，所以最好可以将该功能抽出来，便于其它控制器集成，暂时还没做。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论