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

本文实例为大家分享了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

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

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