前言：
各位同學(xué)大家好 有段時間沒有給大家更新文章 最近在學(xué)習(xí)iOS 學(xué)寫了下iOS的列表控件和滑動控件 就想著分享給大家 希望能幫助到各位同學(xué)的學(xué)習(xí)和工作， 那么廢話不多說 我們正式開始
準備工作
安裝xcode 這個大家·可以自己去appstore 搜索下載即可
效果圖
具體實現(xiàn)：
首先是UITableView 這個是控件就是常用的普通列表控件 有點類似安卓和flutter中的listview
UITableView *tableview= [[UITableView alloc]initWithFrame:self.view.bounds];
tableview.dataSource=self;
tableview.delegate=self;
[self.view addSubview:tableview];
我們初始化uitableview 然后后設(shè)置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 復(fù)用機制
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 //子布局高度 設(shè)置 回調(diào)方法
didSelectRowAtIndexPath // 子布局點擊事件回調(diào)方法
numberOfRowsInSection // 子布局總數(shù)據(jù)量 cell 條數(shù) 回調(diào)方法
cellForRowAtIndexPath // 子布局樣式回調(diào)方法
我們這邊子布局用了系統(tǒng)提供的 dequeueReusableCellWithIdentifier 樣式 我們設(shè)置主標題和副標題 做一個展示
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//UItableview cell 復(fù)用機制
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 的復(fù)用 當在滑動時候需要重新創(chuàng)建 cell的時候我們調(diào)用回收池里面的cell即可
UICollectionView
UICollectionView 類似安卓中的 RecyclerView 可以顯示一行一個或者多個cell 子布局 系統(tǒng)為我們提供了
UICollectionViewFlowLayout 來處理子布局的間距和高度以及寬度顯示
UICollectionViewFlowLayout * flowLayout= [[UICollectionViewFlowLayout alloc]init];
flowLayout.minimumLineSpacing=10;
flowLayout.minimumInteritemSpacing=10;
flowLayout.itemSize=CGSizeMake((self.view.frame.size.width-10)/2, 200);
//創(chuàng)建UICollectionView
UICollectionView * collectionview= [ [UICollectionView alloc]
initWithFrame:self.view.bounds collectionViewLayout: flowLayout];
// 設(shè)置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 子布局條數(shù) 回調(diào)方法
cellForItemAtIndexPath cell顯示樣式
sizeForItemAtIndexPath cell顯示區(qū)域大小控制
這邊我們做了一個特殊處理當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
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 然后設(shè)置背景顏色為灰色 然后設(shè)置 contentSize 寬度為屏幕寬度的5倍 高度就是viewcontroller 的高度
然后將UIScrollView 添加到Viewcontroller 中即可顯示并且滑動的效果
[self.view addSubview:uiscrollerview];
我們設(shè)置 pagingEnabled 屬性為YES 還可以實現(xiàn)翻頁的效果
//翻頁的效果
uiscrollerview.pagingEnabled=YES;
這邊寫了一個數(shù)組添加了5種背景顏色 然后用for循環(huán)設(shè)置到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 基礎(chǔ)的列表和滑動控件我們就講完了
最后總結(jié)：
我是一名安卓程序員 因為需要就來學(xué)習(xí)一下iOS的開發(fā), 最近看了一下教程學(xué)習(xí)了IOS里面的一些基礎(chǔ)控件的用法。 就想著做個筆記 所以就寫了這篇文章 ，記錄一下 如果有錯誤的請大神們指出 ，因為對比這安卓去學(xué)習(xí) 相對而言 iOS的列表控件要比安卓的友好一點步驟簡化一些 ，功能也很完善 最后希望我的文章能幫助到各位同學(xué)的學(xué)習(xí)和工作 , 最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻更多有用的代碼分享給大家。各位同學(xué)如果覺得文章還不錯 ，麻煩給關(guān)注和star，小弟在這里謝過啦
