iOS开发之多表视图滑动切换示例（仿"头条"客户端）

　　好长时间没为大家带来iOS开发干货的东西了，今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例。在Demo中对所需的组件进行的简单封装，在封装的组件中使用的是纯代码的形式，如果想要在项目中进行使用，稍微进行修改即可。

　　废话少说，先介绍一下功能点，下图是整个Demo的功能点，最上面左边的TabBarButtonItem是用来减少条目的，比如下图有三个按钮，点击减号会减少一个条目。右边的为增加一个条目。点击相应的按钮是切换到对应的表视图上，下方红色的是滑动的指示器，同时支持手势滑动。运行具体效果如下图所示。

      

　　一：实现方案

　　　　最上方是一个View, View上面实例化了一些按钮，平分屏幕的宽度，下方是一个ScrollView, ScrollView上面放了一些表视图，点击不同的Button, 滑动到对应的表示图上。除了点击按钮，还可以进行滑动切换，切换时，红色的指示器也会随之滑动。

　　　　　主要的技术点就是通过ScrollView的回调，通过事件的响应来改变ScrollView的ContentOffset的值。在回调中根据ContentOffset的值来计算红色指示器的偏移量。

　　二：核心代码

　　1.组件中的主要属性

　　　　把上面整个视图进行了封装，命名为SlideTabBarView，下面的代码是主要属性：

@interface SlideTabBarView()<UIScrollViewDelegate,UITableViewDataSource,UITableViewDelegate>
///@brife 整个视图的大小
@property (assign) CGRect mViewFrame;

///@brife 下方的ScrollView
@property (strong, nonatomic) UIScrollView *scrollView;

///@brife 上方的按钮数组
@property (strong, nonatomic) NSMutableArray *topViews;

///@brife 下方的表格数组
@property (strong, nonatomic) NSMutableArray *scrollTableViews;

///@brife TableViews的数据源
@property (strong, nonatomic) NSMutableArray *dataSource;

///@brife 当前选中页数
@property (assign) NSInteger currentPage;

///@brife 下面滑动的View
@property (strong, nonatomic) UIView *slideView;
@end

 

　　2.初始化方法如下，在调用初始化方法时需要传入SlideTabBarView的frame和选项卡的个数，初始化函数会调用一系列的初始化方法对组件进行初始化，代码如下：

-(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{
    self = [super initWithFrame:frame];

    if (self) {
        _mViewFrame = frame;
        _tabCount = count;
        _topViews = [[NSMutableArray alloc] init];
        _scrollTableViews = [[NSMutableArray alloc] init];

        [self initDataSource];

        [self initScrollView];

        [self initTopTabs];

        [self initDownTables];

        [self initDataSource];

        [self initSlideView];

    }

    return self;
}

 

　　　　3.initDataSource方法主要负责模拟生成下方TableView要显示的数据。代码如下：

#pragma mark -- 初始化表格的数据源
-(void) initDataSource{
    _dataSource = [[NSMutableArray alloc] initWithCapacity:_tabCount];

    for (int i = 1; i <= _tabCount; i ++) {

        NSMutableArray *tempArray  = [[NSMutableArray alloc] initWithCapacity:20];

        for (int j = 1; j <= 20; j ++) {

            NSString *tempStr = [NSString stringWithFormat:@"我是第%d个TableView的第%d条数据。", i, j];
            [tempArray addObject:tempStr];
        }

        [_dataSource addObject:tempArray];
    }
}

 

　　　　4.红色滑动指示器的初始化代码如下所示：

#pragma mark -- 初始化滑动的指示View
-(void) initSlideView{
     CGFloat width = _mViewFrame.size.width / _tabCount;
    _slideView = [[UIView alloc] initWithFrame:CGRectMake(0, TOPHEIGHT - 5, width, 5)];
    [_slideView setBackgroundColor:[UIColor redColor]];
    [self addSubview:_slideView];
}

 

　　　　5.ScrollView的初始化代码如下, 指定ScrollView的大小位置以及背景颜色，并且设置分页可用并添加代理。

#pragma mark -- 实例化ScrollView
-(void) initScrollView{
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, _mViewFrame.origin.y, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];
    _scrollView.contentSize = CGSizeMake(_mViewFrame.size.width * _tabCount, _mViewFrame.size.height - 60);
    _scrollView.backgroundColor = [UIColor grayColor];

    _scrollView.pagingEnabled = YES;

    _scrollView.delegate = self;
    [self addSubview:_scrollView];
}

 

　　　　6.添加上方的按钮，根据传入的个数来实例化多个按钮。

#pragma mark -- 实例化顶部的tab
-(void) initTopTabs{
    CGFloat width = _mViewFrame.size.width / _tabCount;

    for (int i = 0; i < _tabCount; i ++) {

        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)];

        view.backgroundColor = [UIColor lightGrayColor];

        if (i % 2) {
            view.backgroundColor = [UIColor grayColor];
        }

        UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)];
        button.tag = i;
        [button setTitle:[NSString stringWithFormat:@"按钮%d", i+1] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [_topViews addObject:view];
        [self addSubview:view];
    }
}

 

　　　　7.点击按钮触发的方法如下：

1 #pragma mark --点击顶部的按钮所触发的方法
2 -(void) tabButton: (id) sender{
3     UIButton *button = sender;
4     [_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0) animated:YES];
5 }

 

　　　　8.初始化下方的多个表视图：实例化表视图，并指定委托回调。

#pragma mark --初始化下方的TableViews
-(void) initDownTables{

    for (int i = 0; i < _tabCount; i ++) {

        UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];
        tableView.delegate = self;
        tableView.dataSource = self;

        [_scrollTableViews addObject:tableView];
        [_scrollView addSubview:tableView];
    }

}

 

　　　　9.ScrollView的回调方法如下，下面最后一个代理方法是根据ScrollView的偏移量来计算红色指示器的偏移量，第二个是滑动到哪个tableView，然后进行哪个TableView的数据加载。

#pragma mark -- scrollView的代理方法
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    [self scrollViewDidEndDecelerating:scrollView];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{
    _currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;

    UITableView *currentTable = _scrollTableViews[_currentPage];
    [currentTable reloadData];

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if ([_scrollView isEqual:scrollView]) {
        CGRect frame = _slideView.frame;
        frame.origin.x = scrollView.contentOffset.x/_tabCount;
        _slideView.frame = frame;
    }
}

 

　　　　10.TableView的代理方法如下，数据源就是我们刚才做的假数据，Cell是由Xib实现的，使用的时候注册一下就可用了。

#pragma mark -- talbeView的代理方法
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSMutableArray *tempArray = _dataSource[_currentPage];
    return tempArray.count;
}

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 60;
}

-(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    BOOL nibsRegistered=NO;
    if (!nibsRegistered) {
        UINib *nib=[UINib nibWithNibName:@"SlideBarCell" bundle:nil];
        [tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"];
        nibsRegistered=YES;
    }

    SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"];
    if ([tableView isEqual:_scrollTableViews[_currentPage]]) {
         cell.tipTitle.text = _dataSource[_currentPage][indexPath.row];
    }

    return cell;
}
时间： 2024-03-27 01:27:27

iOS开发之多表视图滑动切换示例（仿"头条"客户端）的相关文章

iOS开发入门：表视图UI设计模式

软件设计中有设计模式,在UI设计方面也有设计模式.由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式.这两种模式已经成为移动平台开发的标准. 分页模式 分页模式规范了移动平台进行大量数据请求的处理方式 . 下拉刷新模式 下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台.下拉刷新与分页相反,当翻动屏幕到 顶部时候,再往下拉屏幕程序就开始重新请求数据,表视图表头部

iOS开发那些事-表视图UI设计模式

        软件设计中有设计模式,在UI设计方面也有设计模式.由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式.这两种模式已经成为移动平台开发的标准. 分页模式         分页模式规范了移动平台进行大量数据请求的处理方式 . 下拉刷新模式 下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台.下拉刷新与分页相反,当翻动屏幕到顶部时候,再往下拉屏幕程序就

iOS开发：加载、滑动翻阅大量图片解决方案详解

今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制. 我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清大图全屏浏览界面的这短暂的1秒内(和后续的几秒),都发生了什么. 开发:加载.滑动翻阅大量图片解决方案详解-"> 常规思路流程 点击任意小图后, 1.首先制作scrollview框架:大小2个scrollview,小的用于手势缩放单一图片,大的横向依次加载全部照片 2.制作好scrollview框架后,加载照片 3.一切准备就绪跳转页面

ios 类似qq-ios 小表视图的实现？？？？？？？？？？

问题描述 ios 小表视图的实现?????????? 请看图,这样的小视图咋实现啊?求大神指点,要是有demo就最好不过了.网上都搜了,没搞定. 解决方案 IOS:表视图IOS表视图动态高度实现实例IOS 带搜索栏表视图 解决方案二: 可以写个viewcontroller然后用presentviewcontroller方式加载 就像是UIAlertView差不多的方法 解决方案三: 其实那是一个viewController上面一个小的tableView而已 解决方案四: 简单一点就写个table

iOS开发中的ViewController转场切换效果实现简介_IOS

在iOS7之前,View Controller的切换主要有4种: Push/Pop,NavigationViewController Present and dismis Modal UITabBarController addChildViewController(一般用于自定义的继承于 UIViewController 的容器子类) iOS5,调用- (void)transitionFromViewController:(UIViewController *)fromViewControll

Android中的ViewPager视图滑动切换类的入门实例教程_Android

ViewPager引入示例首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能. 效果图: 实现了三个view间的相互滑动. 第一个VIEW向第二个VIEW滑动.第二个VIEW向第三个VIEW滑动 一.新建项目,引入ViewPager控件ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 1.在主布局文件里加入 <RelativeLayout xmlns:android="http://schemas.a

ios开发-如何改变一个视图控制器中除一个控件变灰

问题描述 如何改变一个视图控制器中除一个控件变灰 就像图片一样,当选择器触发时,其余控件色变成灰色怎么实现?求大神开发-如何改变一个视图控制器中除一个控件变灰-ios 添加子视图控制器">

Android中的ViewPager视图滑动切换类的入门实例教程

ViewPager引入示例 首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能. 效果图: 实现了三个view间的相互滑动. 第一个VIEW向第二个VIEW滑动.第二个VIEW向第三个VIEW滑动 一.新建项目,引入ViewPager控件 ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 1.在主布局文件里加入 <RelativeLayout xmlns:android="http://schemas

IOS开发之----UIScrollView滚动条视图的使用

 - (void)viewDidLoad {       UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];       scrollView.contentSize = CGSizeMake(847, 1129);//滚动条视图内容范围的大小       scrollView.showsHorizontalScrollIndicator = FALSE;//水平滚动条是否显示 scro