UI一揽子计划 21 (UICollectionView、SDWebImage第三方类库加载图片的使用、集合视图的布局UICollectionViewFlowLayout 、自定义Cell、布局协议
// 点击去发现 UICollectionViewDelegateFlowLayout 该协议又遵守了 UICollectionViewDelegate 协议,实际上 UICollectionViewDelegateFlowLayout 是 UICollectionViewDelegate 的子协议
[super viewDidLoad];
[self addCollectionView];
// Do any additional setup after loading the view.
}
// 创建一个集合视图
- (void)addCollectionView
{
// UICollectionViewLayout 是一个抽象类 其功能是由子类来实现的 其自己本身没有什么具体功能
// 布局 (网格状布局)
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 行边距 (相对于 上下滚动) 如果左右滑动 行边距就是列边距
layout.minimumLineSpacing = 30;
// 列边距 (相对于 上下滚动) 如果左右滑动 列边距就是行边距
layout.minimumInteritemSpacing = 20;
// 设置item 的宽高
layout.itemSize = CGSizeMake(150, 200);
// 设置滑动方向 默认垂直的
/*
UICollectionViewScrollDirectionVertical,
UICollectionViewScrollDirectionHorizontal
*/
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 设置表头和表尾
layout.headerReferenceSize = CGSizeMake(0, 90);
layout.footerReferenceSize = CGSizeMake(0, 100);
// 设置内边距 一定要记得
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
// 设置代理
collectionView.delegate = self;
collectionView.dataSource = self;
// 默认是黑色的
collectionView.backgroundColor = [UIColor whiteColor];
// 显示视图
self.view = collectionView;
[collectionView release];
[layout release];
// 注册cell
//参数1: 填写cell 样式所在的类名 (使用系统的就注册系统的类 自定义的就用自定义的类)
//参数2: identifier 标识符一定要一致
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];
// 注册表头和表尾
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter"];
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 这个方法里面包括了 之前写的UITableView的一堆
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor blueColor];
return cell;
}
// 设置表头表尾 通过设置代理方法
// Reusable 复用 重用 可重复
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 通过kind 来判断是表头 还是表尾
// 因为参数 kind 是字符串的 判断相同 不能用 '='
if ([kind isEqualToString: UICollectionElementKindSectionHeader]) {
// 返回表头
/**
* 复用 需要从复用的集合中得到
*/
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor grayColor];
return headerView;
} else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
// 返回表尾
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter" forIndexPath:indexPath];
footerView.backgroundColor = [UIColor greenColor];
return footerView;
}
return nil;
{
NSLog(@"第%ld分区 第%ld个", (long)indexPath.section,(long)indexPath.row);
{
NSString *json = [[NSBundle mainBundle]pathForResource:@"imageResource" ofType:@"json"];
NSData *data = [NSData dataWithContentsOfFile:json];
NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:(NSJSONReadingMutableContainers) error:nil];
self.dataArray = [NSMutableArray array];
for (NSDictionary *dic in array) {
GirlModel *model = [[GirlModel alloc]init];
[model setValuesForKeysWithDictionary:dic];
[self.dataArray addObject:model];
[model release];
}
{
// 先创建网格状视图
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 设置一堆布局属性
// 行间距
layout.minimumLineSpacing = 10;
// 列间距
layout.minimumInteritemSpacing = 5;
// item 宽高
layout.itemSize = CGSizeMake(150, 150);
// 滑动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 头
layout.headerReferenceSize = CGSizeMake(0, 50);
// 尾
layout.footerReferenceSize = CGSizeMake(0, 100);
// 内边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
// 利用layout 创建一个集合视图
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
[collectionView registerClass:[GirlCollectionViewCell class] forCellWithReuseIdentifier:@"GirlCell"];
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
[collectionView registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];
[self.view addSubview:collectionView];
[collectionView release];
[layout release];
{
NSLog(@"%ld", self.dataArray.count);
return self.dataArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
GirlCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GirlCell" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor blackColor];
GirlModel *model = self.dataArray[indexPath.row];
NSString *path = model.thumbURL;
NSURL *url = [NSURL URLWithString:path];
[cell.girlImageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"花粥.jpg"]];
// 把model 传入cell 中
cell.model = model;
// NSURLRequest *request = [NSURLRequest requestWithURL:url];
// NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
// cell.girlImageView.image = [UIImage imageWithData:data];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
HeaderCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header" forIndexPath:indexPath];
header.titleLabel.text = @"自古英雄出少年, 无奈英雄都折美人关";
header.titleLabel.textAlignment = NSTextAlignmentCenter;
return header;
} else {
FooterCollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer" forIndexPath:indexPath];
return footer;
}
return nil;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 先取出图片的宽高
// 取出对应的model 用对应的model取出宽高
GirlModel *model = self.dataArray[indexPath.row];
// CGFloat width = model.width;
// CGFloat height = model.height;
// 取出刻度 或者 比例
CGFloat scale = model.width / 150;
CGFloat newHeight = model.height / scale;
return CGSizeMake(150, newHeight);
{
self = [super initWithFrame:frame];
if (self) {
// CGFloat width = frame.size.width;
// CGFloat height = frame.size.height;
//
// // 添加自定义视图
// self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, width, height)];
// // 添加到显示视图上
// [self.contentView addSubview:self.girlImageView];
// CGRectZero frame 设置为 0
self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectZero];
[self.contentView addSubview:self.girlImageView];
return self;
- (void)layoutSubviews
{
// 先走下父类的方法
[super layoutSubviews];
// 重新给image一个宽高
CGFloat scale = self.model.width / 150;
CGFloat newHeight = self.model.height / scale;
self.girlImageView.frame = CGRectMake(0, 0, 150, newHeight);
UI一揽子计划 21 (UICollectionView、SDWebImage第三方类库加载图片的使用、集合视图的布局UICollectionViewFlowLayout 、自定义Cell、布局协议相关推荐
- SDWebImage第三方库加载图片生硬
SDWebImage第三方库是一个非常不错的缓存图片的第三方库.大家都在用. 只是最近在用的时候发现使用中没有任何动效.加载中很生硬. 所以稍微改动这个方法 - (void)setImageWithU ...
- UI一揽子计划 17 (image的异步加载、KVO观察者模式、KVO进行豆瓣列表界面图片的异步加载)
把下载图片的封装起来 ImageDownloader.h #import <Foundation/Foundation.h> @protocol ImageDownloaderDel ...
- 模仿SDWebImage实现异步加载图片
模仿SDWebImage实现异步加载图片 SDWebImage想必大家都不陌生吧,要实现它的图片异步加载功能这个还是很简单的. 注意:此处我只实现了异步加载图片,并没有将文件缓存到本地的打算哦:) 源 ...
- IOS开发笔记 - 基于SDWebImage的网络图片加载处理
前言: 在IOS下通过URL读一张网络图片并不像Asp.net那样可以直接把图片路径放到图片路径的位置就ok, 而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示. 这里找 ...
- Flutter开发之ListView使用第三方flutter_refresh加载更多(37)
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
- 使用SDWebImage淡入淡出的方式加载图片
使用SDWebImage淡入淡出的方式加载图片 效果: 请通过以下方式下载源码: 找到它修改文件的地方: 以下是使用源码: // // ViewController.m // SDWebImageFa ...
- SDWebImage 加载图片流程
SDWebImage是老生常谈的三方,这篇博客算是一个笔记吧,记录下SDWebImage源码相关加载图片流程. 注1: 整体流程基于 SDWebImage 5.0.6 版本. 注2: 本文只对iOS执 ...
- UI小项目之拳皇动画的实现(抽取加载图片和播放音乐的方法)
实现思路 1.加载图片 2.播放音乐 实现思想 1.封装思想 抽取相同代码生成一个新的方法,通过传递参数调用该方法: 2.内存管理思想 不需要每次调用方法时都重新加载图片,for循环加载图片写在Vie ...
- 游戏UI动态加载图片优化
说到UI优化,很多人对其并不以为意,UI的制作无非使用UGUI或者NGUI.UI优化主要是针对图集,还有一些依赖项的优化,针对的是内存优化,上面这些都是关于静态UI的优化,这个是作为程序员都要经历的阶 ...
最新文章
- Matlab GUI 设计(4):不同控件之间的数据传递
- 【数据竞赛】图像赛排行榜拉开100名差距的技巧
- 深入理解asp.net中的 __doPostBack函数
- 【Linux】centos7安装bcp报错
- 韩语识别_韩语文字识别_韩语图片识别 - 云+社区 - 腾讯云
- OC中不可变数组的常用方法
- xp IIS5配置mvc3运行环境
- 朴灵:云计算的开发者视界中,OpenAPI 是绝对主角 | 凌云时刻
- c语言二级考试程序设计题难吗,计算机二级c语言难吗 考试题型是什么
- 抽奖 java_年会抽奖程序 java开发 可内定中奖人员 一键导入员工 使用简单
- 人工智能数学基础---定积分3:微积分基本公式(牛顿-莱布尼茨公式)
- 时空、光年、过去与现在
- U盘重装Win10系统教程
- 备赛电赛学习STM32篇(七):TIM输入捕获
- OBS 基础 16 如何在CMake中添加新的lib库、头文件等
- 【2023年电工杯数学建模竞赛】选题分析+A题B题完整思路+代码分享
- 初学AI的你也能一键部署模型服务?奥利给!!
- 从阿里巴巴B2B的技术实践看互联网企业如何提升研发效能
- 香港的房价到底贵得有多吓人?用数据挖掘告诉你真相
- smartadmin mysql_Prometheus、Alertmanager、Grafana 监控 Linux 与 MySQL
热门文章
- 单词快速记忆 day7
- 基于Springboot+MybatisPlus的学校企业就业求职面试招聘管理系统
- 企业云成本优化:减少企业云支出的终极指南
- NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者
- Excel表Ctrl+v和Ctrl shift+v有什么区别_Excel之快捷
- bigdecimal负数变正数_BigDecimal
- C#中Invoke的用法()
- 深扒SQL的历史,说点秘密给你听
- tarfile文件压缩、解压、归档指令教程
- 我国第一天巨型电子计算机,2018年12月22日是什么日子,2018年12月22日是什么节日...