iOS仿热门话题热点轮播界面tableView

废话不多说直接上代码：

这个功能应该是挺常见的, 一个tableview到另一个tableview, 类似segment的一个东西, 我把它封装起来了:

//
// viewcontroller.m
//
//
// created by 高雅馨 on 16/6/3.
// copyright © 2016年 高雅馨. all rights reserved.
//

#import "dcnavtabbarcontroller.h"
#import "htmacro.h"

@interface dcnavtabbarcontroller ()<uiscrollviewdelegate>
@property (nonatomic, weak) uibutton *oldbtn;
@property(nonatomic,strong) nsarray *vcarr;
@property (nonatomic, weak) uiscrollview *contentview;
@property (nonatomic, weak) uiscrollview *topbar;
@property(nonatomic,assign) cgfloat btnw ;
@property (nonatomic, weak) uiview *slider;

@end

@implementation dcnavtabbarcontroller
-(uicolor *)slidercolor
{
 if(_slidercolor == nil)
 {
  _slidercolor = [uicolor colorwithred:1.00 green:0.36 blue:0.25 alpha:1.00];
 }
 return _slidercolor;
}
-(uicolor *)btntextnomalcolor
{
 if(_btntextnomalcolor == nil)
 {
  _btntextnomalcolor = [uicolor colorwithwhite:0.205 alpha:1.000];
 }
 return _btntextnomalcolor;
}
-(uicolor *)btntextseletedcolor
{
 if(_btntextseletedcolor == nil)
 {
  _btntextseletedcolor = [uicolor colorwithred:1.00 green:0.36 blue:0.25 alpha:1.00];
 }
 return _btntextseletedcolor;
}
-(uicolor *)topbarcolor
{
 if(_topbarcolor == nil)
 {
  _topbarcolor = [uicolor whitecolor];
 }
 return _topbarcolor;
}
-(instancetype)initwithsubviewcontrollers:(nsarray *)subviewcontrollers
{
 if(self = [super init])
 {
  _vcarr = subviewcontrollers;
 }
 return self;
}
- (void)viewdidload {
 [super viewdidload];
 //添加上面的导航条
 [self addtopbar];
 //添加子控制器
 [self addvcview];
 //添加滑块
 [self addsliderview];
}
-(void)addsliderview
{
 if(self.vcarr.count == 0) return;
 uiview *slider = [[uiview alloc]initwithframe:cgrectmake(25,41,self.btnw - 50, 3)];
 slider.backgroundcolor = self.slidercolor;
 [self.topbar addsubview:slider];
 self.slider = slider;
}
-(void)addtopbar
{
 if(self.vcarr.count == 0) return;
 nsuinteger count = self.vcarr.count;
 uiscrollview *scrollview = [[uiscrollview alloc]initwithframe:cgrectmake(0, 0, screen_width, 44)];
 scrollview.backgroundcolor = self.topbarcolor;
 self.topbar = scrollview;
 self.topbar.bounces = no;
 [self.view addsubview:self.topbar];
 if(count <= 5) {
   self.btnw = screen_width / count;
 } else {
   self.btnw = screen_width / 5.0;
 }
 //添加button
 for (int i = 0; i<count; i++) {
  uiviewcontroller *vc = self.vcarr[i];
  uibutton *btn = [[uibutton alloc]initwithframe:cgrectmake(i*self.btnw, 0, self.btnw, 44)];
  btn.titlelabel.font = [uifont systemfontofsize:15];
  btn.titlelabel.numberoflines = 0;
  btn.titlelabel.textalignment = 1;
  btn.tag = 10000+i;
  [btn settitlecolor:self.btntextnomalcolor forstate:uicontrolstatenormal];
  [btn settitlecolor:self.btntextseletedcolor forstate:uicontrolstateselected];
  [btn settitle:vc.title forstate:uicontrolstatenormal];
  [btn addtarget:self action:@selector(click:) forcontrolevents:uicontroleventtouchupinside];
  [self.topbar addsubview:btn];
  if(i == 0)
  {
   btn.selected = yes;
   self.oldbtn = btn;
  }
}
 self.topbar.contentsize = cgsizemake(self.btnw *count, -64);
}
-(void)addvcview
{
 uiscrollview *contentview = [[uiscrollview alloc]initwithframe:cgrectmake(0, 0+44, screen_width, screen_height -44)];
 self.contentview = contentview;
 self.contentview.bounces = no;
 contentview.delegate = self;
 contentview.backgroundcolor = [uicolor colorwithwhite:0.859 alpha:1.000];
 [self.view addsubview:contentview];

 nsuinteger count = self.vcarr.count;
 for (int i=0; i<count; i++) {
  uiviewcontroller *vc = self.vcarr[i];
  [self addchildviewcontroller:vc];
  vc.view.frame = cgrectmake(i*screen_width, 0, screen_width, screen_height -44);
  [contentview addsubview:vc.view];
 }
 contentview.contentsize = cgsizemake(count*screen_width, screen_height - 44);
 contentview.pagingenabled = yes;
}
-(void)click:(uibutton *)sender
{
 if(sender.selected) return;
 self.oldbtn.selected = no;
 sender.selected = yes;
 self.contentview.contentoffset = cgpointmake((sender.tag - 10000) *screen_width, 0);
  self.oldbtn.transform = cgaffinetransformidentity;
 self.oldbtn = sender;

 //判断导航条是否需要移动
 cgfloat maxx = cgrectgetmaxx(self.slider.frame);
 if(maxx >=screen_width && sender.tag != self.vcarr.count + 10000 - 1)
 {
  [uiview animatewithduration:0.3 animations:^{
   self.topbar.contentoffset = cgpointmake(maxx - screen_width + self.btnw, -64);
  }];
 }else if(maxx < screen_width)
 {
  [uiview animatewithduration:0.3 animations:^{
   self.topbar.contentoffset = cgpointmake(0, 0);
  }];
 }
}
-(void)scrollviewdidscroll:(uiscrollview *)scrollview
{
 //滑动导航条
 self.slider.frame = cgrectmake(scrollview.contentoffset.x / screen_width *self.btnw + 25 , 41, self.btnw - 50, 3);
}
//判断是否切换导航条按钮的状态
-(void)scrollviewdidenddecelerating:(uiscrollview *)scrollview
{
 cgfloat offx = scrollview.contentoffset.x;
 int tag = (int)(offx /screen_width + 0.5) + 10000;
 uibutton *btn = [self.view viewwithtag:tag];
 if(tag != self.oldbtn.tag)
 {
  [self click:btn];
 }
}
- (void)didreceivememorywarning {
 [super didreceivememorywarning];
}
@end

这个很容易看懂的, 是不是, 就不在这里多解释.

上面这张呢, 则是把导航栏隐藏, 自定义一个小uiview截取网络图片作为导航栏, 又自定义一个大view作为tableview头视图.并且我还运用了观察者注册消息通知, 代码有点长, 不过我写注释了哦, 可以看懂的.

//
// bookmarksviewcontroller.m
// hottopic
//
// created by dllo on 16/9/7.
// copyright © 2016年 高雅馨. all rights reserved.
//

#import "bookmarksviewcontroller.h"
#import "htmacro.h"
#import "uiview+extension.h"
#import "booktableviewcell.h"
#import "essayviewcontroller.h"
#import "subscriberviewcontroller.h"
#import "umsocial.h"
#import "dcnavtabbarcontroller.h"
#import "uiimageview+webcache.h"
#import "afnetworking.h"
#import "hottopicsmodel.h"
#import "topicmodel.h"
#import "nodemodel.h"
#import "usermodel.h"
#import "source.h"
#import "disposeviewcontroller.h"
#import "headimageview.h"
static cgfloat const headviewheight = 280;
@interface bookmarksviewcontroller ()<uitableviewdelegate,uitableviewdatasource>
@property (nonatomic, strong) booktableviewcell * maintableview;
@property (nonatomic, strong) headimageview * headimageview;//头部图片
@property (nonatomic, strong) uiimageview * avatarimage;
@property (nonatomic, strong) uilabel * countentlabel;
@property (nonatomic, strong) uiimageview *img;
@property (nonatomic, strong) hottopicsmodel *hottopic;
@property (nonatomic, strong) uilabel *titlelabel;
@property (nonatomic, assign) bool canscroll;
@property (nonatomic, assign) bool istopiscannotmovetabview;
@property (nonatomic, assign) bool istopiscannotmovetabviewpre;
@property (nonatomic, strong) uiview *barview;
@property (nonatomic, strong) uilabel *titletext;

@end

@implementation bookmarksviewcontroller
@synthesize maintableview;

- (void)viewwillappear:(bool)animated {
 [super viewwillappear:animated];
 [self.navigationcontroller setnavigationbarhidden:yes];
}
- (void)viewdidload {
 [super viewdidload];
// 这个api功能就是在navigationcontroller堆栈内的uiviewcontroller可以支持右滑手势，也就是不用点击右上角的返回按钮，轻轻在屏幕左边一
滑，屏幕就会返回，随着ios设备屏幕的增大，这个小功能让手指短，拇指大和手残人士看到了福音。
 self.navigationcontroller.interactivepopgesturerecognizer.delegate = (id)self;
 [self.navigationcontroller setnavigationbarhidden:yes];
 self.automaticallyadjustsscrollviewinsets = no;
 [self.view addsubview:self.maintableview];
 // 设置tableview头视图
 self.maintableview.tableheaderview = self.headimageview;
 // 将导航栏隐藏使其变为透明
 [self.navigationcontroller.navigationbar setbackgroundimage:[uiimage new] forbarmetrics:uibarmetricsdefault];
 // 将导航栏那条黑线隐藏
 [self.navigationcontroller.navigationbar setshadowimage:[uiimage new]];
 /** 观察者注册消息通知 */
 [[nsnotificationcenter defaultcenter] addobserver:self selector:@selector(leavetop:) name:@"leavetop" object:nil];
 [self creatview];
}
// 把导航栏写成自定义view
- (void)creatview {
 _barview = [[uiview alloc] initwithframe:cgrectmake(0, 0, screen_width, 64)];
 uibutton *backbutton = [uibutton buttonwithtype:uibuttontypecustom];
 backbutton.frame = cgrectmake(10, 30, 30, 30);
 [backbutton setimage:[uiimage imagenamed:@"backbar"] forstate:uicontrolstatenormal];
 [backbutton addtarget:self action:@selector(clickbackbtn:) forcontrolevents:uicontroleventtouchupinside];
 uibutton *sharebtn = [uibutton buttonwithtype:uibuttontypecustom];
 sharebtn.frame = cgrectmake(screen_width - 50, 30, 30, 30);
 [sharebtn setimage:[uiimage imagenamed:@"sharebar"] forstate:uicontrolstatenormal];
 [sharebtn addtarget:self action:@selector(clicksharebtn:) forcontrolevents:uicontroleventtouchupinside];
 _titletext = [[uilabel alloc] initwithframe:cgrectmake(50, 30, screen_width - 100, 30)];
 _titletext.text = @"收藏夹";
 _titletext.textalignment = 1;
 _titletext.textcolor = [uicolor whitecolor];
 // 毛玻璃效果
 uiblureffect *blur = [uiblureffect effectwithstyle:uiblureffectstyleextralight];
 uivisualeffectview *effectview = [[uivisualeffectview alloc] initwitheffect:blur];
 effectview.backgroundcolor = [uicolor colorwithwhite:0.508 alpha:1.000];
 effectview.alpha = 0.65;
 effectview.frame = cgrectmake(0, 0, screen_width, 64);
 [_barview addsubview:effectview];
 [_barview addsubview:backbutton];
 [_barview addsubview:sharebtn];
 [_barview addsubview:_titletext];
 [self.view addsubview:_barview];
}
/**
 * notificationobserver 观察者 : self
 * notificationselector 处理消息的方法名: getuserprofilesuccess
 * notificationname 消息通知的名字: notification_getuserprofilesuccess
 * notificationsender 消息发送者 : 表示接收哪个发送者的通知，如果第四个参数为nil,接收所有发送者的通知
 */
- (void)leavetop:(nsnotification *)notification{
 nsdictionary *userinfo = notification.userinfo;
 nsstring *canscroll = userinfo[@"canscroll"];
 if ([canscroll isequaltostring:@"1"]) {
  _canscroll = yes;
 }
}
/** 将自定义view的背景图设置tableview头视图的背景图*/
- (uiimage *)clipimageinoffsety:(cgfloat)y
{
 if (_headimageview.image == nil) {
  return [uiimage new];
 }
 cgrect rect = cgrectmake(0, y, screen_width, 64);
 cgimageref imageref = cgimagecreatewithimageinrect([_headimageview.image cgimage], rect);
 self.blurview.frame = cgrectmake(0, 0, screen_width, 64);
 self.blurview.alpha = 0.7;
 [self.navigationcontroller.navigationbar addsubview:_blurview];
 uiimage *thumbscale = [uiimage imagewithcgimage:imageref];
 return thumbscale;
}
// 用scrollview的偏移量来判断
- (void)scrollviewdidscroll:(uiscrollview *)scrollview{
 cgfloat yoffset = scrollview.contentoffset.y;
 if (yoffset >= _headimageview.height - 64) {
  yoffset = _headimageview.height - 64;
 }
 uiimage *image = [self clipimageinoffsety:yoffset];
 _barview.backgroundcolor = [uicolor colorwithpatternimage:image];
 //获取滚动视图y值的偏移量
 self.navigationcontroller.navigationbar.alpha = (headviewheight+yoffset)/(headviewheight-64);
 cgfloat taboffsety = [maintableview rectforsection:0].origin.y - 64.0f;
 cgfloat offsety = scrollview.contentoffset.y;
 _istopiscannotmovetabviewpre = _istopiscannotmovetabview;
 if (offsety >= taboffsety) {
  //不能滑动
  scrollview.contentoffset = cgpointmake(0, taboffsety);
  _istopiscannotmovetabview = yes;
  _titletext.text = self.urltitle;
 }else{
  //可以滑动
  _istopiscannotmovetabview = no;
  _titletext.text = @"收藏夹";
 }
 if (_istopiscannotmovetabview != _istopiscannotmovetabviewpre) {
  if (!_istopiscannotmovetabviewpre && _istopiscannotmovetabview) {
   [[nsnotificationcenter defaultcenter] postnotificationname:@"gotop" object:nil userinfo:@{@"canscroll":@"1"}];
   _canscroll = no;
  }
  if(_istopiscannotmovetabviewpre && !_istopiscannotmovetabview){
   if (!_canscroll) {
    scrollview.contentoffset = cgpointmake(0, taboffsety);
   }
  }
 }

}
// 头视图
- (uiimageview *)headimageview
{
 if (_headimageview == nil)
 {
  _headimageview = [[headimageview alloc]initwithframe:cgrectmake(0, 0,screen_width,headviewheight)];
  _headimageview.userinteractionenabled = yes;
  [_headimageview sd_setimagewithurl:[nsurl urlwithstring:self.urlheadimg] placeholderimage:[uiimage imagenamed:@"touxiang"]completed:^(uiimage *image, nserror *error, sdimagecachetype cachetype, nsurl *imageurl) {

  }];
  uiblureffect *blur = [uiblureffect effectwithstyle:uiblureffectstyleextralight];
  uivisualeffectview *effectview = [[uivisualeffectview alloc] initwitheffect:blur];
  effectview.backgroundcolor = [uicolor colorwithwhite:0.508 alpha:1.000];
  effectview.alpha = 0.7;
  effectview.frame = cgrectmake(0, 0, screen_width, headviewheight);
  [_headimageview addsubview:effectview];
  self.navigationcontroller.hidesbarsonswipe = no;
  _avatarimage = [[uiimageview alloc] initwithframe:cgrectmake(20, 20 + 64, screen_width / 3.3, screen_width / 3.3)];
  [_headimageview addsubview:_avatarimage];
  _avatarimage.userinteractionenabled = yes;
  _avatarimage.layer.maskstobounds = yes;
  [ _avatarimage sd_setimagewithurl:[nsurl urlwithstring:self.urlheadimg] placeholderimage:[uiimage imagenamed:@"detailviewdefaultmidimage"]];
  _countentlabel = [[uilabel alloc] initwithframe:cgrectmake(_avatarimage.frame.size.width + 40, 20 + 64, screen_width - (screen_width / 3 + 20 + 10), _avatarimage.frame.size.height / 4)];
  _countentlabel.font = [uifont systemfontofsize:15];
  _countentlabel.textcolor = [uicolor whitecolor];
  _countentlabel.linebreakmode = nslinebreakbywordwrapping;
  _countentlabel.numberoflines = 0;
  _countentlabel.text = self.urltitle;
  [_headimageview addsubview:_countentlabel];

  _img = [[uiimageview alloc] initwithframe:cgrectmake(_countentlabel.frame.origin.x, _countentlabel.frame.size.height + _avatarimage.frame.origin.y + 10, 30, 30)];
  _img.layer.cornerradius = 15;
  _img.layer.maskstobounds = yes;
  _img.backgroundcolor = [uicolor yellowcolor];
  [_headimageview addsubview:_img];
  _titlelabel = [[uilabel alloc] initwithframe:cgrectmake(_img.frame.size.width + _img.frame.origin.x + 5, _img.frame.origin.y, screen_width / 1.9 , 30)];
  _titlelabel.textcolor = [uicolor whitecolor];
  _titlelabel.linebreakmode = nslinebreakbywordwrapping;
  _titlelabel.numberoflines = 0;
  _titlelabel.font = [uifont systemfontofsize:12];
  [_headimageview addsubview:_titlelabel];
  uilabel *contextlabel = [[uilabel alloc] initwithframe:cgrectmake(_img.frame.origin.x , _img.frame.origin.y + _img.frame.size.height + 6, screen_width / 2 , screen_width / 8)];
  contextlabel.textcolor = [uicolor whitecolor];
  contextlabel.text = self.urlcontect;
  contextlabel.linebreakmode = nslinebreakbywordwrapping;
  contextlabel.numberoflines = 0;
  contextlabel.font = [uifont systemfontofsize:12];
  [_headimageview addsubview:contextlabel];
  uibutton *takebtn = [uibutton buttonwithtype:uibuttontypesystem];
  takebtn.frame = cgrectmake(_img.frame.origin.x - 20 , contextlabel.frame.size.height + contextlabel.frame.origin.y + 10, screen_width / 4, _avatarimage.frame.size.height / 3.2);
  [takebtn settitle:@"＋ 订阅" forstate:uicontrolstatenormal];
  [takebtn settitlecolor:[uicolor whitecolor] forstate:uicontrolstatenormal];
  takebtn.backgroundcolor = [uicolor colorwithred:1.00 green:0.36 blue:0.25 alpha:1.00];
  takebtn.titlelabel.font = [uifont systemfontofsize:14];
  takebtn.layer.cornerradius = 10;
  [_headimageview addsubview:takebtn];
  uibutton *contributebtn = [uibutton buttonwithtype:uibuttontypesystem];
  contributebtn.frame = cgrectmake(takebtn.frame.origin.x + takebtn.frame.size.width + 5, contextlabel.frame.size.height + contextlabel.frame.origin.y + 10, screen_width / 8, _avatarimage.frame.size.height / 3.2);
  [contributebtn settitle:@"投稿" forstate:uicontrolstatenormal];
  [contributebtn settitlecolor:[uicolor whitecolor] forstate:uicontrolstatenormal];
  contributebtn.layer.borderwidth = 1.0;
  contributebtn.titlelabel.font = [uifont systemfontofsize:14];
  contributebtn.layer.bordercolor = [uicolor whitecolor].cgcolor;
  contributebtn.layer.cornerradius = 5;
  [_headimageview addsubview:contributebtn];
  uibutton *managelabel = [[uibutton alloc] initwithframe:cgrectmake(contributebtn.frame.size.width + contributebtn.frame.origin.x, contributebtn.frame.origin.y + 5, screen_width / 5 , 30)];
  [managelabel settitlecolor:[uicolor whitecolor] forstate:uicontrolstatenormal];
  [managelabel settitle:@"0未处理☞" forstate:uicontrolstatenormal];
  managelabel.titlelabel.textalignment = 0;
  managelabel.titlelabel.font = [uifont systemfontofsize:12];
  [managelabel addtarget:self action:@selector(clickmanagebtn:) forcontrolevents:uicontroleventtouchupinside];
  [_headimageview addsubview:managelabel];

 }
 return _headimageview;
}
// 大tableview
-(uitableview *)maintableview
{
 if (maintableview == nil)
 {
  maintableview= [[booktableviewcell alloc]initwithframe:cgrectmake(0, 0, screen_width,screen_height)];
  maintableview.delegate = self;
  maintableview.datasource=self;
  maintableview.bounces = no;
  maintableview.separatorstyle = uitableviewcellseparatorstylenone;
  maintableview.showsverticalscrollindicator = no;
  maintableview.backgroundcolor = [uicolor clearcolor];
  maintableview.rowheight = screen_height;
 }
 return maintableview;
}

#pragma marl -tabledelegate
- (nsinteger)numberofsectionsintableview:(uitableview *)tableview{
 return 1;
}
- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section{
 return 1;
}
- (cgfloat)tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath{
 return screen_height;
}
- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath{
 uitableviewcell *cell = [[uitableviewcell alloc] initwithstyle:uitableviewcellstyledefault reuseidentifier:nil];
 cell.selectionstyle = uitableviewcellselectionstylenone;
 //添加pageview
 [cell.contentview addsubview:self.setpageviewcontrollers];
 return cell;
}
// 调用两个小vc
-(uiview *)setpageviewcontrollers{
 essayviewcontroller *essay = [[essayviewcontroller alloc] init];
 essay.urlstr = self.urlstr;
 essay.title = [nsstring stringwithformat:@"文章\n%@", self.articlecount];
 subscriberviewcontroller *subscribe = [[subscriberviewcontroller alloc] init];
 subscribe.urlstr = self.urlstr;
 subscribe.title = [nsstring stringwithformat:@"订阅者\n%@", self.subscribercount];
 nsarray *subviewcontrollers=@[essay, subscribe];
 dcnavtabbarcontroller *tabbarvc = [[dcnavtabbarcontroller alloc]initwithsubviewcontrollers:subviewcontrollers];
 tabbarvc.view.frame = cgrectmake(0, 0, screen_width, screen_height);
 [self.view addsubview:tabbarvc.view];
 [self addchildviewcontroller:tabbarvc];
 return tabbarvc.view;
}
@end

写到这里, 就完成了, 下面让我们来看一下成果吧!

是不是特别棒呢, 喜欢的话就来试试看吧!

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

原文链接：http://www.jianshu.com/p/825fc83fc311