UICollectionView實現書本翻頁布局

效果圖:

//初始化

- (instancetype)initwithframe:(cgrect)frame

return self;

}//預設自定義布局,布局圓角 和 中心線

//判斷cell的奇數偶數

if (layoutattributes.indexpath.item % 2 == 0) else

//圓角設定

uirectcorner corner = isrightpage ? uirectcornertopright | uirectcornerbottomright : uirectcornertopleft | uirectcornerbottomleft;

uibezierpath *bezier = [uibezierpath bezierpathwithroundedrect:self.b**iew.bounds byroundingcorners:corner cornerradii:cgsizemake(16, 16)];

//cashapelayer: 通過給定的貝塞爾曲線uibezierpath,在空間中作圖

cashapelayer *masklayer = [[cashapelayer alloc] init];

masklayer.frame = self.b**iew.bounds;

masklayer.path = bezier.cgpath;

self.b**iew.layer.mask = masklayer;

self.b**iew.clipstobounds = yes;

}@end

新建乙個

booklayout 布局類,繼承自

uicollectionviewlayout ,在這裡我們將實現關鍵的3個必須實現的布局方法:

1. preparelayout

2. collectionviewcontentsize

3.  layoutattributesforelementsinrect

關鍵思想,是在 layoutattributesforitematindexpath 方法中,實現空間布局,考慮到frame的變化,旋轉角度和旋轉比例的變化,以及cell的frame變化後,anchor點的重新設定等;

#import "booklayout.h"

@implementation booklayout
//定義cell的尺寸
static cgfloat pagewidth = 180;
static cgfloat pageheight = 280;
static cgfloat numberofpages = 0; //定義總的cell個數
- (void)preparelayout 
//布局實時更新
- (bool)shouldinvalidatelayoutforboundschange:(cgrect)newbounds 
//內容滾動區域設定
- (cgsize)collectionviewcontentsize 
//每個cell的布局設定
- (uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath  else if (ratio < -0.5) 
//if ((ratio > 0 && indexpath.item % 2 == 1) || (ratio < 0 && indexpath.item % 2 == 0)) 
}//計算旋轉角度angle,設定3d旋轉
cgfloat newratio = min(max(ratio, -1), 1);
//計算m34
catransform3d transform = catransform3didentity;
transform.m34 = 1.0 / - 2000;
cgfloat angle = 0.0f;
if (indexpath.item % 2 == 0)  else if (indexpath.item % 2 == 1) 
angle += (indexpath.row % 2) / 1000;
transform = catransform3drotate(transform, angle, 0, 1, 0);
layoutattributes.transform3d = transform;
if (indexpath.row == 0) 
return layoutattributes;
}//所有cell布局陣列
- (nsarray *)layoutattributesforelementsinrect:(cgrect)rect 
}return array;
}@end

uicollectionview 中,實現**和資料來源就ok了

#import "bookview.h"

#import "bookcell.h"
#import "booklayout.h"
@implementation bookview
static nsstring *const reuseidentifier = @"cell";
- (instancetype)initwithframe:(cgrect)frame collectionviewlayout:(uicollectionviewlayout *)layout 
return self;
}- (nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section 
- (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath 
@end

#import "viewcontroller.h"

#import "bookview.h"
#import "booklayout.h"
#define kscreenwidth [uiscreen mainscreen].bounds.size.width
#define kscreenheight [uiscreen mainscreen].bounds.size.height
@inte***ce viewcontroller ()
@end
@implementation viewcontroller
- (void)viewdidload 
@end

unity 製作書本 翻頁效果

unity 製作書籍翻頁效果 unity c 翻書效果 2d 真實翻頁 不使用外掛程式 自製 實現思路 將書本分為兩邊，一邊乙個翻頁實現 下圖為書本的右面，以oa為分界線，oab是下一面的如上圖的左下角，oac是下一面的如上圖的右下角 利用unity的mask可以實現，也就是，假設這一頁是1 左邊那...

UICollectionView自定義布局

這個和 uitableview 在用法上大體上差不多這裡只說明一下 uicollectionview 的布局。demo 這種布局方式是一種線性布局，他會先按照你設定的要求鋪慢一行，當不滿足指定條件的時候，會換行。我們可以通過 uicollectionviewdelegateflowlayout 來控...

UICollectionView自定義布局（二）

自定義布局 將該動畫分解，首先實現如下圖所示的效果。隨著collectionview的滑動，itermcell的frame的變化如下圖所示 itermcell分為三種型別 featuredcell 突出顯示的cell，高度為featuredheight。standardcell 標準狀態下的cell...