IOS 基础 UITableView , UICollectio

作者: xq9527 | 来源:发表于2021-01-26 17:26 被阅读0次

前言：

各位同学大家好有段时间没有给大家更新文章最近在学习iOS 学写了下iOS的列表控件和滑动控件就想着分享给大家希望能帮助到各位同学的学习和工作，那么废话不多说我们正式开始

准备工作

安装xcode 这个大家·可以自己去appstore 搜索下载即可

效果图

image.png

具体实现：

image.png

首先是UITableView 这个是控件就是常用的普通列表控件有点类似安卓和flutter中的listview

 UITableView *tableview= [[UITableView alloc]initWithFrame:self.view.bounds];
    tableview.dataSource=self;
    tableview.delegate=self;
    [self.view addSubview:tableview];

我们初始化uitableview 然后后设置frame 占满整个viewcontroller 通过 addSubview 将uitableview添加到视图中

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 150 ;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
        NSNumber *number1 = @(indexPath.row);
        NSString* str = [number1 stringValue];
       UIViewController *  viewcontroller=[[UIViewController alloc]init];
    //    viewcontroller.title=[NSString stringWithFormat:@"%@" ,str];
       viewcontroller.title=[NSString stringWithFormat:@"%@" ,str];
        [self.navigationController pushViewController:viewcontroller animated:YES];
       NSLog(@"%ld", indexPath.row);
    
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  //UItableview cell 复用机制
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"id"];
    if(!cell){
    cell =[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle
                                reuseIdentifier:@"id"];
    }
    cell.textLabel.text= [NSString stringWithFormat:@"主标题  - %@",@(indexPath.row)];
    cell.detailTextLabel.text=@"副标题";
    return  cell;
}

我们需要重写 heightForRowAtIndexPath didSelectRowAtIndexPath numberOfRowsInSection cellForRowAtIndexPath等方法

heightForRowAtIndexPath   //子布局高度 设置 回调方法
didSelectRowAtIndexPath //  子布局点击事件回调方法
  numberOfRowsInSection // 子布局总数据量 cell 条数 回调方法
   cellForRowAtIndexPath //  子布局样式回调方法

我们这边子布局用了系统提供的 dequeueReusableCellWithIdentifier 样式我们设置主标题和副标题做一个展示

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  //UItableview cell 复用机制
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"id"];
    if(!cell){
    cell =[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle
                                reuseIdentifier:@"id"];
    }
    cell.textLabel.text= [NSString stringWithFormat:@"主标题  - %@",@(indexPath.row)];
    cell.detailTextLabel.text=@"副标题";
    return  cell;
}

我们要处理一下 uitableview cell 的复用当在滑动时候需要重新创建 cell的时候我们调用回收池里面的cell即可

UICollectionView

image.png
UICollectionView 类似安卓中的 RecyclerView 可以显示一行一个或者多个cell 子布局系统为我们提供了
UICollectionViewFlowLayout 来处理子布局的间距和高度以及宽度显示

 UICollectionViewFlowLayout * flowLayout= [[UICollectionViewFlowLayout alloc]init];
    flowLayout.minimumLineSpacing=10;
    flowLayout.minimumInteritemSpacing=10;
    flowLayout.itemSize=CGSizeMake((self.view.frame.size.width-10)/2, 200);
    //创建UICollectionView
    UICollectionView *  collectionview= [ [UICollectionView alloc]
                 initWithFrame:self.view.bounds collectionViewLayout: flowLayout];
    // 设置delegate 和 dataSource
    collectionview.delegate=self;
    collectionview.dataSource=self;
    [collectionview registerClass:[UICollectionViewCell class]
       forCellWithReuseIdentifier:@"UICollectionViewCell"];
    [self.view addSubview:collectionview];

UICollectionView 需要重写 numberOfItemsInSection cellForItemAtIndexPath sizeForItemAtIndexPath 等等方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                           cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell * cell= [collectionView
                                  dequeueReusableCellWithReuseIdentifier: @"UICollectionViewCell" forIndexPath:indexPath];
    cell.backgroundColor= [UIColor redColor];
    return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if(indexPath.item%3==0){
  return CGSizeMake(self.view.frame.size.width, 100);
    }else{
        return CGSizeMake((self.view.frame.size.width-10)/2, 200);
    }
}

numberOfItemsInSection 子布局条数回调方法
cellForItemAtIndexPath cell显示样式
sizeForItemAtIndexPath cell显示区域大小控制
这边我们做了一个特殊处理当cell下标被3整除的时候我们改变 cell都宽高就可以做出不同cell子布局的列表的效果类似Android的 recyclerview 和listview多布局

 if(indexPath.item%3==0){
  return CGSizeMake(self.view.frame.size.width, 100);
    }else{
        return CGSizeMake((self.view.frame.size.width-10)/2, 200);
    }

UIScrollView

image.png

    UIScrollView * uiscrollerview= [[UIScrollView alloc]initWithFrame:self.view.bounds];
    uiscrollerview.backgroundColor=[UIColor lightGrayColor];
    uiscrollerview.contentSize=CGSizeMake(self.view.bounds.size.width*5, self.view.bounds.size.height);
    uiscrollerview.showsVerticalScrollIndicator=NO;

我们实例化UIScrollView 然后设置背景颜色为灰色然后设置 contentSize 宽度为屏幕宽度的5倍高度就是viewcontroller 的高度
然后将UIScrollView 添加到Viewcontroller 中即可显示并且滑动的效果

[self.view addSubview:uiscrollerview];

我们设置 pagingEnabled 属性为YES 还可以实现翻页的效果

//翻页的效果
uiscrollerview.pagingEnabled=YES;

这边写了一个数组添加了5种背景颜色然后用for循环设置到UIScrollView 种即可展示上图的效果

    UIScrollView * uiscrollerview= [[UIScrollView alloc]initWithFrame:self.view.bounds];
    uiscrollerview.backgroundColor=[UIColor lightGrayColor];
    uiscrollerview.contentSize=CGSizeMake(self.view.bounds.size.width*5, self.view.bounds.size.height);
    uiscrollerview.showsVerticalScrollIndicator=NO;
    NSArray * colorArray=@[[UIColor redColor],[UIColor blueColor],[UIColor yellowColor],
                           [UIColor greenColor],[UIColor grayColor],];
    for(int i=0;i<5;i++){
       [uiscrollerview addSubview:({
            UIView * view= [[UIView alloc]initWithFrame:CGRectMake(uiscrollerview.bounds.size.width*i, 0,uiscrollerview.bounds.size.width,
          uiscrollerview.bounds.size.height)];
           view.backgroundColor=[colorArray objectAtIndex:i];
           view;
       })];
    }
    //翻页的效果
    uiscrollerview.pagingEnabled=YES;
    [self.view addSubview:uiscrollerview];

到此iOS中 UITableView UICollectionView UIScrollView 基础的列表和滑动控件我们就讲完了

最后总结：

我是一名安卓程序员因为需要就来学习一下iOS的开发, 最近看了一下教程学习了IOS里面的一些基础控件的用法。就想着做个笔记所以就写了这篇文章，记录一下如果有错误的请大神们指出，因为对比这安卓去学习相对而言 iOS的列表控件要比安卓的友好一点步骤简化一些，功能也很完善最后希望我的文章能帮助到各位同学的学习和工作 , 最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里谢过啦

网友评论

本文标题：IOS 基础 UITableView , UICollectio

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

IOS 基础 UITableView , UICollectio

前言：

准备工作

效果图

具体实现：

UICollectionView

UIScrollView

最后总结：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读