UICollectionView自定義布局(二)

2021-09-11 11:50:42 字數 3076 閱讀 9351

自定義布局

將該動畫分解,首先實現如下圖所示的效果。

隨著collectionview的滑動,itermcellframe的變化如下圖所示:

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

複製**

新增背景和詳情內容

和文字的建立**比較簡單就不列出了,需要注意的是:

uiimageviewcontentmode設定為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...