使用UICollectionView和UITableView混合布局,完成简单天气demo

天气Demo最终效果如下:


UICollectionView和UITableView是很类似的~

上一节我做的UITableView学好的话,这节的混合布局就会很容易。

1.首先再做布局的时候,要学会分类,先分好模块,再针对模块来做会更清晰和简单

2.在这个天气Demo里View分为两块:上面用UITableView自定义cell来实现,下面的用UICollectionView的cell来实现

3.首先在storyboard里从右边拖一个UITableView到View上,然后拖一个TableViewCell到tableview上,对cell进行自定义布局(当然对cell进行UIView模块划分,有助于后面的约束布局,博主这里暂没做划分)

4.新建class:TableViewCell,subclass of UITableViewCell,生成文件:TableViewCell.h,TableViewCell.m

5.关联storyboard中的TableViewCell的class:TableViewCell,并且关联我们布局的控件与class文件中的代码,设定Identifier:tableviewcell

6.关联TableView的dataSource和delegate到ViewController

7.在TableViewCell可以正确显示以后,在storyboard里从右边拖一个UICollectionView到TableView下面,在cell里面进行自定义布局

8.新建class:CollectionViewCell,subclass of UICollectionViewCell,生成文件:CollectionViewCell.h,CollectionViewCell.m

9.关联storyboard中的CollectionViewCell的class:CollectionViewCell,并且关联我们布局的控件与class文件中的代码,设定Identifier:collection cell

10.关联CollectionView的dataSource和delegate到ViewController

11.新建plist文件:WeatherPlist.plist和TodayPlist.plist

12.导入plist文件中需要的图片进来

13.整体布局两部分View,添加背景图片,拖一个ImageView到UIView上,在左边的列表栏将它拖到最上面,发现它显示在最底层,将TableView和CollectionView的背景设为clearcolor,再对背景图进行布局调整



1.ViewController.m里的关键代码:

#import "ViewController.h"

#import "TableViewCell.h"

#import "CollectionViewCell.h"



@interface ViewController ()

{

   @private NSMutableArray *_weatherList;

   @private NSMutableArray *_todayList;

    

}

@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    

    // 设定pList文件路径

    NSString *dataPath = [[NSBundle mainBundle]pathForResource:@"WeatherPlist.plist" ofType:nil];

    // 填充数组内容

    _weatherList = [NSMutableArray arrayWithContentsOfFile:dataPath];

    

    NSString *todayPath = [[NSBundle mainBundle]pathForResource:@"TodayList.plist" ofType:nil];

    _todayList=[NSMutableArray arrayWithContentsOfFile:todayPath];

   

    

    //注册Cell,必须要有

    [

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好,关于 Swift 封装 UITableViewUICollectionView 的问题,我可以给你一些基本的介绍。 首先,UITableViewUICollectionView 都是 iOS 平台中常用的视图控件,用于展示列表和网格等数据。在 Swift 中,我们可以通过继承 UITableViewUICollectionView 类来自定义我们自己的表格和网格视图。 下面是一个简单的示例代码,展示如何封装 UITableView: ```swift import UIKit class MyTableView: UITableView, UITableViewDataSource, UITableViewDelegate { var data: [String] = [] override init(frame: CGRect, style: UITableView.Style) { super.init(frame: frame, style: style) self.dataSource = self self.delegate = self // 注册单元格 self.register(UITableViewCell.self, forCellReuseIdentifier: "cell") } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } // UITableViewDataSource 协议方法 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return self.data.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) cell.textLabel?.text = self.data[indexPath.row] return cell } // UITableViewDelegate 协议方法 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { print("选中了第 \(indexPath.row) 行") } } ``` 在这个示例代码中,我们自定义了一个名为 `MyTableView` 的类,继承自 `UITableView`。我们在 `init` 方法中设置了数据源和代理,并注册了一个单元格类型。在 `UITableViewDataSource` 和 `UITableViewDelegate` 协议方法中,我们实现了表格的行数、单元格内容和选中事件的处理。 类似地,我们也可以使用类似的方式封装 UICollectionView。需要注意的是,UICollectionViewDelegate 和 UICollectionViewDataSource 两个协议方法和 UITableView 中的函数名和实现方式略有不同,需要根据实际情况来进行调整。 希望这个简单的示例代码可以对你有所帮助。如果你有其他关于 Swift 的问题,欢迎随时提出!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值