博客> 防手机淘宝头条的提示View和搜房网的购房指南view
防手机淘宝头条的提示View和搜房网的购房指南view
2019-08-25 01:23 评论:0 阅读:984 330578304
ios 滑动 notice 轮播图 防淘宝头条的view

防手机淘宝头条的提示View和搜房网的购房指南view

首先看效果图 -里面的类容可以完全自定义通过自定义cell来实现

录制的效果不好 实际效果很流畅

 xxupnoticeGif.gif


  • 思路 思路来源于市面上很多的无限轮播图 实现的方法有各种各样 这次我选用的是tableview 来更改数据源来实现无限像下轮播  QQ20160729-0.png

如图 原理tableview一共用2个cell 实际的datasouce只有2个元素 需要轮播的为n个元素不变 向下滑动的时候实时更改datasouce里面的元素 然后滑动过后,让其去掉动画,滚动到top,就是滑动到第1个cell,由于数据源变了,绘制的图像看不出任何变化 然后继续向下滑动 其实是滑动到第2个cell 大概的思路就是这样 第一次写博客,表述不清 ,下面用代码来说明

-定义好属性

@property (strong,nonatomic)UITableView *tableView;
@property (strong,nonatomic)NSTimer *timer;
@property (strong,nonatomic)NSMutableArray *items;//需要展示的类容
@property (strong,nonatomic)NSMutableArray *dataSource;//tableview实际需要的类容

初始化过程我这里就不详写了 具体看代码 我这就说几个具体的功能代码 每隔2秒开始滚动

_timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(scrollAD:) userInfo:nil repeats:YES];`

- (void)scrollAD:(id)sender{
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:1 inSection:0];
 [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
 [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(updateData) userInfo:nil repeats:NO];
}

滚动完之后就是需要更改数据datsouce的逻辑代码了 当然上面这个代码有点不科学,希望高手指教

- (void)updateData{
    id  obj = [self.dataSource lastObject];
    NSInteger index = [self.items indexOfObject:obj];
    id result;
    if (index==(self.items.count-1) ){
        result = [self.items firstObject];
    }else{
        result = [self.items objectAtIndex:index+1];
    }
    [self.dataSource removeObjectAtIndex:0];
    [self.dataSource addObject:result];
    NSIndexPath *indexPath0 = [NSIndexPath indexPathForRow:0 inSection:0];
    [self.tableView scrollToRowAtIndexPath:indexPath0 atScrollPosition:UITableViewScrollPositionTop animated:NO];
}

上面就是更改datasouce的数据的代码 实现无线轮播 也就是这几行代码

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if (self.dataSourceDelegate&&[self.dataSourceDelegate respondsToSelector:@selector(XXUpNoticeView:didSelectRow:)]) {
        id  obj = [self.dataSource objectAtIndex:indexPath.row];
        NSInteger index = [self.items indexOfObject:obj];
        [self.dataSourceDelegate XXUpNoticeView:self didSelectRow:index];
    }
}

上面就是点击一个cell 而触发对应的items中的某个元素的响应事件

最后我做了几个代理 方便用户可以自定义话这个界面 这样也可以扩展成为其他的用途

@class XXUpNoticeView;
@protocol XXUpNoticeViewDataSourceDelegate <NSObject>

/**
 *  @brief 代理做过处理 不用代理会加载默认数据 可自行修改
 */

/**
 *  @brief 数据模型的代理 配合cell使用
 *
 *  @param noticeView self
 *
 *  @return 返回模型数组
 */
- (NSArray *)itemsOfXXUpNoticeView:(XXUpNoticeView *)noticeView;

/**
 *  @brief 自定义界面
 *
 *  @param noticeView self
 *  @param tableView  基于tableview做的 可以用来处理其他需要的功能
 *  @param indexPath  indexpath
 *  @param dataSource  tableview的实际数据源
 *
 *  @return  自定义cell  **cell和self.frame是一样的 注意cell布局根据self.frame来布局**
 */
- (UITableViewCell *)XXUpNoticeView:(XXUpNoticeView *)noticeView tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath dataSource:(NSMutableArray *)dataSource;

/**
 *  @brief 点击对应的notice的触发事件
 *
 *  @param noticeView self
 *  @param index      index
 */
- (void)XXUpNoticeView:(XXUpNoticeView *)noticeView didSelectRow:(NSInteger)index;

再次抱歉 这个第一次写 格式啥的控制不好 见谅

下面看看我写的demo里面自定义的写法

制造假数据

- (NSMutableArray *)dataSource{
    if (!_dataSource) {
         _dataSource = [NSMutableArray array];
         for (int i =0 ; i<10 xss=removed xss=removed xss=removed xss=removed i%2!=0?@ xss=removed xss=removed>
需要展示的类容元素数组
  • (NSArray )itemsOfXXUpNoticeView:(XXUpNoticeView )noticeView{ return self.dataSource;// [UILocalizedIndexedCollation.currentCollation sectionIndexTitles]; }

自定义cell 也就是根据需求来设置你需要的界面

- (UITableViewCell *)XXUpNoticeView:(XXUpNoticeView *)noticeView tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath dataSource:(NSMutableArray *)dataSource{

    XXTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([XXTableViewCell class])];
    if (!cell) {
        UINib *nib = [UINib nibWithNibName:NSStringFromClass([XXTableViewCell class]) bundle:nil];
        [tableView registerNib:nib forCellReuseIdentifier:NSStringFromClass([XXTableViewCell class])];
        cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([XXTableViewCell class])];
    }
     cell.item = dataSource[indexPath.row];//这个为实际的tableview的数据源
    return cell;
}

这个就是实际点击展示的类容

- (void)XXUpNoticeView:(XXUpNoticeView *)noticeView didSelectRow:(NSInteger)index
{
    NSLog(@"index = %ld",(long)index);
}

见谅见谅 排版不好 希望海涵
文中所提到的代码都有 这个demo的github地址,欢迎下载使用

也可以直接用pod下载
 QQ20160729-0@2x.png

再次对排版深表歉意

收藏
0
sina weixin mail 回到顶部