欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-13 19:06:34
本文实例为大家分享了ios滚动导航条效果展示的具体代码,供大家参考,具体内容如下 实现效果 效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动;下面的视图也可以滚...

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

实现效果

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

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

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

实现代码

1.首先实现main.storyboard

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

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

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

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

上一篇:

下一篇: