本文实现了类似电子书首页,用来展示图书或小说的布局页面,书架列表【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实现书架布局样式【一些电子书的首页】相关推荐

  1. iOS之页面布局-踩坑的原由

    iOS之页面布局 原文请点击 在<iOS 7 UI Transition Guide>中有在<iOS 7 UI Transition Guide>的Bar and Bar Bu ...

  2. 【RecyclerView】 九、为 RecyclerView 设置不同的布局样式

    文章目录 一.为 RecyclerView 设置不同的布局样式 二.完整代码 三.RecyclerView 相关资料 一.为 RecyclerView 设置不同的布局样式 为 RecyclerView ...

  3. android界面布局错位,IOS 浏览器页面布局错位(如:点不到)的分析与解决

    IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...

  4. div css网页设计源代码_HTML+CSS网页设计,企业网站服务项目布局样式

    大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...

  5. div css网页设计源代码_HTML+CSS网页设计,企业网站资讯文章布局样式

    大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...

  6. 前端比较好用的一个Flex布局样式包

    前端比较好用的一个Flex布局样式包 https://gitee.com/chendaiming/flex_layout  

  7. CSS非布局样式和重点内容

    CSS基础非布局样式 Cascading Style Sheet 层叠 .样式.表 可以简单理解为PS中图层的样式和叠加 选择器 selecter{prop:value; } 选择器用于匹配HTML元 ...

  8. html5弹性盒子的作用,flexbox弹性盒子,真正意义上的布局样式

    前段时间接手了一个基于cef1的项目,由于其特别限定的场景,在查询了对html5的支持后,整站都采用了flexbox布局,也从头熟悉了一遍该布局的使用方法.故分享出来,供参考. 背景 Flexbox ...

  9. html卡片布局样式,基于bootstrap卡片图文列表布局样式

    特效描述:基于bootstrap 卡片图文列表 布局样式.bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码. 代码结构 1. 引入CSS 2. ...

最新文章

  1. JDK1.8源码(三)——java.lang.String 类
  2. javascript 事件冒泡 和 冒泡事件阻止
  3. P4124 [CQOI2016]手机号码
  4. 易助工资总额管控上市说明
  5. Resolving Strong Reference Cycles for Closures
  6. 创宇技能表_知道创宇研发技能表 一
  7. 中文宾州树库标记含义
  8. 滚动截屏软件_华为指关节截屏不如三指截屏好用?一步到位,实践出真知
  9. Windows小功能合集
  10. Windows系统下hosts文件工作原理
  11. 关于清除贴图与光域网路径
  12. JavaScript基础
  13. 新旧_飘云羽逸_新浪博客
  14. 计算机的云是什么意思_云计算是什么意思?为什么叫云计算?
  15. 在网址前加神秘字母,让你打开新世界
  16. 圆的面积php,圆的面积教学活动方案
  17. Template /template/pimple/a.ftl not found
  18. CentOS Frp内网穿透:Frps+Nginx反向代理
  19. CWnd::FromHandle与CWnd::FromHandlePermanent有什么区别
  20. 情人节相关的公众号图文这样排版,看过的都说美!

热门文章

  1. python自己写包_如何将自己的Python包发布到PyPI
  2. linux hadoop namenode_HADOOP_HDFS伪分布式安装步骤
  3. python提取文本中的数字_EXCEL中提取汉字、字母、数字如此简单
  4. python高效办公_Python高效办公|自动分发任务
  5. android 判断服务是否活动,Android:我如何获得当前的前台活动(从服务)?
  6. Bootstrap+DataTables后端排序分页详解
  7. linux怎么编译sharedptr,如何使用智能指针(例如auto_ptr r shared_ptr)在Linux上使用C++生成链接列表数据结构?...
  8. jira 查找issue_JIRA使用教程:高级搜索—字段参考4/4
  9. apt编译java_自动生成代码工具--APT
  10. linux看火狐的安装目录,linux下firefox+geckodriver环境搭建