iOS实现书架布局样式【一些电子书的首页】
本文实现了类似电子书首页,用来展示图书或小说的布局页面,书架列表【iPhone6模拟器】,屏幕尺寸还没进行适配,只是做个简单的demo【纯代码实现方式】
实现采用的是UICollectionView和UICollectionViewFlowLayout。关于UICollectionView的详细讲解请参考http://blog.csdn.net/meegomeego/article/details/16953489
一、实现layout的DecorationView
// // FWBookShelfDecarationViewCollectionReusableView.h // FWPersonalApp // // Created by hzkmn on 16/2/18. // Copyright © 2016年 ForrstWoo. All rights reserved. // #import <UIKit/UIKit.h>extern NSInteger const kDecorationViewHeight;@interface FWBookShelfDecarationView : UICollectionReusableView@end
FWBookShelfDecarationView.h
// // FWBookShelfDecarationViewCollectionReusableView.m // FWPersonalApp // // Created by hzkmn on 16/2/18. // Copyright © 2016年 ForrstWoo. All rights reserved. // #import "FWBookShelfDecarationView.h"NSInteger const kDecorationViewHeight = 216;@implementation FWBookShelfDecarationView- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]){UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, screenSize.width, kDecorationViewHeight)];img.image = [UIImage imageNamed:@"boolshelf.png"];[self addSubview:img];}return self; } @end
FWBookShelfDecarationView.m
FWBookShelfDecarationView类非常简单只是定义了Decarationview的背景图片,图上。
二、下载及导入可重新排序的第三方layout,用于我们移动图书后重新布局
详见http://www.cnblogs.com/salam/p/5205919.html
三、实现自己的layout
首先继承LXReorderableCollectionViewFlowLayout,让该类具有重新排序功能。
// // FWBookshelfCollectionViewLayout.h // FWPersonalApp // // Created by hzkmn on 16/2/18. // Copyright © 2016年 ForrstWoo. All rights reserved. // #import "LXReorderableCollectionViewFlowLayout.h"extern NSString * const FWBookshelfCollectionViewLayoutDecorationViewKind;@interface FWBookshelfCollectionViewLayout : LXReorderableCollectionViewFlowLayout@end
FWBookshelfCollectionViewLayout.h
// // FWBookshelfCollectionViewLayout.m // FWPersonalApp // // Created by hzkmn on 16/2/18. // Copyright © 2016年 ForrstWoo. All rights reserved. // #import "FWBookshelfCollectionViewLayout.h"#import "FWBookShelfDecarationView.h"NSString * const FWBookshelfCollectionViewLayoutDecorationViewKind = @"FWBookshelfCollectionViewLayoutDecorationViewKind";@interface FWBookshelfCollectionViewLayout ()@property (nonatomic, strong) NSDictionary *bookShelfRectanges; @property NSInteger countOfRow;@end@implementation FWBookshelfCollectionViewLayout- (void)prepareLayout {[super prepareLayout];[self registerClass:[FWBookShelfDecarationView class] forDecorationViewOfKind:FWBookshelfCollectionViewLayoutDecorationViewKind];NSMutableDictionary *dictionary = [NSMutableDictionary dictionary];NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];self.countOfRow = ceilf(itemCount / 3.0);for (int row = 0; row < self.countOfRow; row++){dictionary[[NSIndexPath indexPathForItem:row inSection:0]] = [NSValue valueWithCGRect:CGRectMake(0, kDecorationViewHeight * row, screenSize.width, kDecorationViewHeight)];}self.bookShelfRectanges = [NSDictionary dictionaryWithDictionary:dictionary]; }#pragma mark Runtime Layout Calculations - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {// call super so flow layout can return default attributes for all cells, headers, and footers// NOTE: Flow layout has already taken care of the Cell view layout attributes! :)NSArray *array = [super layoutAttributesForElementsInRect:rect];// create a mutable copy so we can add layout attributes for any shelfs that// have frames that intersect the rect the CollectionView is interested inNSMutableArray *newArray = [array mutableCopy];// NSLog(@"in rect:%@",NSStringFromCGRect(rect));// Add any decoration views (shelves) who's rect intersects with the// CGRect passed to the layout by the CollectionView[self.bookShelfRectanges enumerateKeysAndObjectsUsingBlock:^(id key, id shelfRect, BOOL *stop) {// NSLog(@"[shelfRect CGRectValue]:%@",NSStringFromCGRect([shelfRect CGRectValue]));if (CGRectIntersectsRect([shelfRect CGRectValue], rect)){UICollectionViewLayoutAttributes *shelfAttributes =[self layoutAttributesForDecorationViewOfKind:FWBookshelfCollectionViewLayoutDecorationViewKindatIndexPath:key];[newArray addObject:shelfAttributes];}}];for (int i = 0; i < [self.collectionView numberOfItemsInSection:0]; i++){NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];[newArray addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];}return [newArray copy]; }- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {// NSLog(@"%@", NSStringFromCGSize([self screenSize]));375 667UICollectionViewLayoutAttributes *attris = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];NSInteger currentRow = indexPath.item / 3;CGRect frame = CGRectMake(20 + (indexPath.item % 3) * (kCellWidth + 17.5), 35+ currentRow * (kCellHeight + 65), kCellWidth, kCellHeight);attris.frame = frame;attris.zIndex = 1;return attris; }- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath {id shelfRect = self.bookShelfRectanges[indexPath];// this should never happen, but just in case...if (!shelfRect)return nil;UICollectionViewLayoutAttributes *attributes =[UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:decorationViewKindwithIndexPath:indexPath];attributes.frame = [shelfRect CGRectValue];// NSLog(@"UICollectionViewLayoutAttributes :.%@", NSStringFromCGRect([shelfRect CGRectValue])); attributes.zIndex = -1; // shelves go behind other viewsreturn attributes; }- (CGSize)collectionViewContentSize {CGSize contentSize = CGSizeMake(self.collectionView.bounds.size.width, self.countOfRow * kDecorationViewHeight + 20);return contentSize; }@end
FWBookshelfCollectionViewLayout.m
四、应用
// // FWAncientPoetryCollectionViewController.m // FWPersonalApp // // Created by hzkmn on 16/2/17. // Copyright © 2016年 ForrstWoo. All rights reserved. // #import "FWAncientPoetryCollectionViewController.h"#import "FWBookShelfDecarationView.h" #import "FWBookshelfCollectionViewLayout.h" #import "FWBookCategoryViewController.h"@interface FWAncientPoetryCollectionViewController () <LXReorderableCollectionViewDataSource, LXReorderableCollectionViewDelegateFlowLayout>@property (nonatomic, strong) NSMutableArray *books;@end@implementation FWAncientPoetryCollectionViewControllerstatic NSString * const cellReuseIdentifier = @"Cell"; - (void)viewDidLoad {[super viewDidLoad];self.title = @"古籍";self.collectionView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bookShelfBackground.png"]];[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellReuseIdentifier];self.books = [[NSMutableArray alloc] initWithArray:[self bookNameOfAllBooks]]; }- (NSArray *)bookNameOfAllBooks {return [[FWDataManager getDataForPoetry] allKeys]; }#pragma mark <UICollectionViewDataSource>- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {return 1; }- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {return [self.books count]; }- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellReuseIdentifier forIndexPath:indexPath];UIImage *image = [UIImage imageNamed:self.books[indexPath.item]];cell.backgroundColor = [UIColor colorWithPatternImage:image];return cell; }- (void)collectionView:(UICollectionView *)collectionView itemAtIndexPath:(NSIndexPath *)fromIndexPath willMoveToIndexPath:(NSIndexPath *)toIndexPath {NSString *theBookName = self.books[fromIndexPath.item];[self.books removeObjectAtIndex:fromIndexPath.item];[self.books insertObject:theBookName atIndex:toIndexPath.item]; }#pragma mark - UICollectionViewDelegateFlowLayout- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {return CGSizeMake(kCellWidth, kCellHeight); }- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {FWBookCategoryViewController *vc = [[FWBookCategoryViewController alloc] initWithUrlString:[[FWDataManager getDataForPoetry] objectForKey:self.books[indexPath.item]]];[self.navigationController pushViewController:vc animated:YES]; }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];[self.books removeAllObjects];self.books = nil; }@end
FWAncientPoetryCollectionViewController.m
转载于:https://www.cnblogs.com/salam/p/5249131.html
iOS实现书架布局样式【一些电子书的首页】相关推荐
- iOS之页面布局-踩坑的原由
iOS之页面布局 原文请点击 在<iOS 7 UI Transition Guide>中有在<iOS 7 UI Transition Guide>的Bar and Bar Bu ...
- 【RecyclerView】 九、为 RecyclerView 设置不同的布局样式
文章目录 一.为 RecyclerView 设置不同的布局样式 二.完整代码 三.RecyclerView 相关资料 一.为 RecyclerView 设置不同的布局样式 为 RecyclerView ...
- android界面布局错位,IOS 浏览器页面布局错位(如:点不到)的分析与解决
IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...
- div css网页设计源代码_HTML+CSS网页设计,企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
- div css网页设计源代码_HTML+CSS网页设计,企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
- 前端比较好用的一个Flex布局样式包
前端比较好用的一个Flex布局样式包 https://gitee.com/chendaiming/flex_layout
- CSS非布局样式和重点内容
CSS基础非布局样式 Cascading Style Sheet 层叠 .样式.表 可以简单理解为PS中图层的样式和叠加 选择器 selecter{prop:value; } 选择器用于匹配HTML元 ...
- html5弹性盒子的作用,flexbox弹性盒子,真正意义上的布局样式
前段时间接手了一个基于cef1的项目,由于其特别限定的场景,在查询了对html5的支持后,整站都采用了flexbox布局,也从头熟悉了一遍该布局的使用方法.故分享出来,供参考. 背景 Flexbox ...
- html卡片布局样式,基于bootstrap卡片图文列表布局样式
特效描述:基于bootstrap 卡片图文列表 布局样式.bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码. 代码结构 1. 引入CSS 2. ...
最新文章
- JDK1.8源码(三)——java.lang.String 类
- javascript 事件冒泡 和 冒泡事件阻止
- P4124 [CQOI2016]手机号码
- 易助工资总额管控上市说明
- Resolving Strong Reference Cycles for Closures
- 创宇技能表_知道创宇研发技能表 一
- 中文宾州树库标记含义
- 滚动截屏软件_华为指关节截屏不如三指截屏好用?一步到位,实践出真知
- Windows小功能合集
- Windows系统下hosts文件工作原理
- 关于清除贴图与光域网路径
- JavaScript基础
- 新旧_飘云羽逸_新浪博客
- 计算机的云是什么意思_云计算是什么意思?为什么叫云计算?
- 在网址前加神秘字母,让你打开新世界
- 圆的面积php,圆的面积教学活动方案
- Template /template/pimple/a.ftl not found
- CentOS Frp内网穿透:Frps+Nginx反向代理
- CWnd::FromHandle与CWnd::FromHandlePermanent有什么区别
- 情人节相关的公众号图文这样排版,看过的都说美!
热门文章
- python自己写包_如何将自己的Python包发布到PyPI
- linux hadoop namenode_HADOOP_HDFS伪分布式安装步骤
- python提取文本中的数字_EXCEL中提取汉字、字母、数字如此简单
- python高效办公_Python高效办公|自动分发任务
- android 判断服务是否活动,Android:我如何获得当前的前台活动(从服务)?
- Bootstrap+DataTables后端排序分页详解
- linux怎么编译sharedptr,如何使用智能指针(例如auto_ptr r shared_ptr)在Linux上使用C++生成链接列表数据结构?...
- jira 查找issue_JIRA使用教程:高级搜索—字段参考4/4
- apt编译java_自动生成代码工具--APT
- linux看火狐的安装目录,linux下firefox+geckodriver环境搭建