IOS 基础 UITableView , UICollectio
前言：
各位同学大家好 有段时间没有给大家更新文章 最近在学习iOS 学写了下iOS的列表控件和滑动控件 就想着分享给大家 希望能帮助到各位同学的学习和工作， 那么废话不多说 我们正式开始
准备工作
安装xcode 这个大家·可以自己去appstore 搜索下载即可
效果图
image.png
image.png
image.png
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
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，小弟在这里谢过啦
