自定義布局
將該動畫分解,首先實現如下圖所示的效果。
隨著collectionview的滑動,itermcell
的frame
的變化如下圖所示:
itermcell
分為三種型別:
featuredcell : 突出顯示的cell,高度為featuredheight
。
standardcell : 標準狀態下的cell,高度為standardheight
。
changedcell : 高度隨著contentoffset
改變而改變的cell,高度的變化範圍在standardheight和featuredheight之間。(featuredcell下面的那個cell)
1.獲取featuredcell的索引
- (int)featureditemindex
複製**
self.dragoffset
是拖拽距離(當偏移量大於這個值時,featureditemindex的索引會變為下乙個)。由當前featuredcell
的索引index可以獲得changedcell
的索引為index+1,進而得到其他的索引位置就是standardcell
。
2.重寫preparelayout方法
隨著collectionview的滑動,standardcell 變化為 featuredcell,變化範圍為[0 ,1]。
- (cgfloat)nextitempercentageoffset
複製**
attribute.zindex
的值隨著iterm的增加逐漸增大,形成上圖所示的覆蓋效果。
changedcell
的高度隨著偏移距離,由standardheight
變化為featuredheight
。
從視覺上看由standardcell
變為featuredcell
只移動了standardheight
的距離,但是實際上contentoffset.y
移動的距離大於這個值,實際上移動了self.dragoffset
才能完成這個變換。
詳細的**如下所示。
- (void)preparelayoutelse
if (path.item == [self featureditemindex] + 1 && path.item != numberofiterm)
frame = cgrectmake(0, y, cgrectgetwidth(self.collectionview.bounds), height);
attribute.frame = frame;
[self.attributesarray addobject:attribute];
/*獲取下乙個cell的初始的y值*/
y = cgrectgetmaxy(frame);
}//重新重新整理collectionview,不然資料會錯亂
[self.collectionview reloaddata];
}複製**
3.改變滾動停止時的位置
當itermcell
滾動的時候,將其停在固定的點。使其滾動停止時,螢幕顯示的第乙個cell永遠是featuredcell
。
- (cgpoint)targetcontentoffsetforproposedcontentoffset:(cgpoint)proposedcontentoffset withscrollin**elocity:(cgpoint)velocity
複製**
新增背景和詳情內容
和文字的建立**比較簡單就不列出了,需要注意的是:
uiimageview
的contentmode
設定為uiviewcontentmodescaleaspectfill
。並且設定layer.maskstobounds = yes
。
一定要使用自動布局否則會顯示不正常。
根據偏移量改變黑色coverview
的背景色,突出顯示featuredcell
。
根據偏移量對titlelabel
進行仿射變換。
根據偏移量對detaillabel
進行透明度變化,只有當前cell是featuredcell
的時候才顯示。
cgfloat standardheight = 100.0;
cgfloat featuredheight = 280.0;
/*根據移動距離改變coverview透明度*/
cgfloat factor = 1 - (featuredheight - cgrectgetheight(layoutattributes.frame))/(featuredheight - standardheight);
cgfloat minalpha = 0.2;
cgfloat maxalpha = 0.75;
cgfloat currentalpha = maxalpha - (maxalpha - minalpha) * factor;
self.coverview.alpha = currentalpha;
/*改變字型大小*/
cgfloat titlescale = max(0.5, factor);
self.titlelabel.transform = cgaffinetransformmakescale(titlescale, titlescale);
/*設定detaillabel的透明度*/
self.timeandroomlabel.alpha = factor;
self.speakerlabel.alpha = factor;
}複製**
UICollectionView自定義布局
這個和 uitableview 在用法上大體上差不多這裡只說明一下 uicollectionview 的布局。demo 這種布局方式是一種線性布局,他會先按照你設定的要求鋪慢一行,當不滿足指定條件的時候,會換行。我們可以通過 uicollectionviewdelegateflowlayout 來控...
自定義布局
自定義view布局 1.確定每個view的位置和尺寸 2.作用 為繪製和觸控範圍做支援 1.對於繪製 知道自己需要在 繪製。2.對於觸控反饋 知道使用者的點是在 自定義view布局的工作內容 自定義view的工作分為兩個階段 測量階段和布局階段 測量流程 從上到下遞迴呼叫每個view或者viewgr...
自定義布局控制項
本文介紹一種自定義控制項的方法,由控制項布局和控制項 2部分組成。效果為乙個自定義標題欄,由乙個按鈕 乙個文字 乙個按鈕組成,並定義了各子件的事件。一 title布局如下 二 如下。重寫構造器,在其中展開布局,找到子控制項繫結事件 public class titlelayout extends l...