美文网首页界面iOS进阶知识积累
iOS界面封装(滚动切换选项卡布局)

iOS界面封装(滚动切换选项卡布局)

作者: 嘿晴天 | 来源:发表于2016-05-03 06:47 被阅读3389次
    Untitled.gif

    今天要介绍的是最近封装的一个控件,一个类似选项卡的控件,集成了以下功能,
    1初始化
    (1)只需通过传入一个标题数组,和设置frame ,即可自动动态生成所有的tab,(数组有多少个title 就自动生成多少个tab)一行代码就可集成整个控件
    2 功能
    (1)点击切换tab(工作,任务,目标)
    (2) 左右滚动切换tab
    (3) 上滑刷新和下拉加载

    3使用
    (1)初始化

     _scrollTapViw = [[DTScrollStatusView alloc]initWithTitleArr:@[@"工作",@"任务",@"目标"] andType:ScrollTapTypeWithNavigation];
        _scrollTapViw.scrollStatusDelegate = self;
        [self.view addSubview:_scrollTapViw];
    

    这个控件为了方便使用提供三种初始化方法,大体可以看demo注释
    (2)实现代理 :tableview代理
    箱式布局中间部分是动态的生成的tableview 可以从左到右如图例,tab 分别为1,2,3
    根据不同的tab 在tableview 的代理实现不同的cell;
    图例实现的实现tableview 代码如下

    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    {
        return 1;
    }
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];
        }
        if (tableView.tag == 1) {
            cell.textLabel.text = @"工作";
        }
        else if(tableView.tag == 2)
        {
            cell.textLabel.text = @"任务";
        }
        else
        {
            cell.textLabel.text = @"目标";
        }
        return cell;
    }
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        if (tableView.tag == 1) {
            return 1;
        }
        else
        {
            return 2;
        }
    
    }
    

    由实例代码可知,实现tableview 的代理可以根据tab 来区分

    刷新代理回调:可以通过tableArr 数组取出相应的tableview;

    -(void)refreshViewWithTag:(int)tag andIsHeader:(BOOL)isHeader
    {
        if(isHeader)
        {
            if(tag == 1)
            {
                UITableView *table = _scrollTapViw.tableArr[tag -1];
                [table reloadData];
            }
            NSLog(@"当前%d个tableview 的头部正在刷新",tag);
        }
        else
        {
            NSLog(@"当前%d个tableview 的尾部正在刷新",tag);
        }
    }
    

    4 简单的实现原理如下图
    这个控件可以分成两部分


    A47936D6-A4C1-476A-A658-3228524A66A1.png

    demo上传到了如下链接(github 求star)
    https://github.com/heysunnyboy/scrollTapLayout.git

    相关文章

      网友评论

      • 新地球说着一口陌生腔调:推荐一个下划线的宽度与title一样宽的控件
      • 布枝盗: 你好,我有些问题想请教你,可以加一下QQ吗 我的5022102
        嘿晴天:@中二青年卡尔 现在才看到有啥问题吗
      • 松n_n鼠:发现一个小问题就是,当从工作点击换到任务的时候,绿色的状态条的动画有延迟,是等下边的tableview动画完毕才开始做的,小问题😂
        嘿晴天:@松O_O鼠 可以根据srollview 滑动的x做那个状态条的位移的
      • A920:我看了一下你的demo我想实现这样的效果--->当进入界面时候我想让他默认加载第二个或者第三个怎么做(我就是想通过一个动态值,动态改变加载这个页面)怎么来实现请指教
        嘿晴天:@Rookie920 好的
        A920:@Rookie920 @嘿晴天 我已经解决掉了 ,用的是通知 需要在viewcontroller 向DTScrollStatusView里发送 一个包含跳转信息的通知就行
      • milk_powder:向右滑tableView崩了,越界
        嘿晴天:@milk_powder 看到一个小bug ,不小心写死了scrollview 的contentsize,改一下就行我在重新提交下
        milk_powder:@嘿晴天 我也不晓得,又运行莫名其妙好了。见鬼了:joy:
        嘿晴天:@milk_powder 不会啊,你改动了哪里吗
      • 贫僧只用海飞丝:你这个项目中的MJ刷新和我项目中的MJ刷新冲突。。。。 :sob:
        嘿晴天:@贫僧只用海飞丝 我是用最新的mj
        贫僧只用海飞丝:@嘿晴天 去掉了, table.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock 还有 table.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBloc报错
        嘿晴天:@贫僧只用海飞丝 去掉我的mj
      • 9f94d02340f1:收藏先,谢谢!
      • 极小光:感谢分享,欢迎关注专集:极光。
        互联网内幕、技术、八卦都在这里,快到碗里来。
      • SwiftYang:谢谢分享,我以前的项目也是这个思路实现的,下半截也可以用UIPageViewController做
        嘿晴天:@SwiftYang 好的,不错的思路

      本文标题:iOS界面封装(滚动切换选项卡布局)

      本文链接:https://www.haomeiwen.com/subject/wnulrttx.html