本文實(shí)例為大家分享了iOS實(shí)現(xiàn)卡片堆疊效果的具體代碼，供大家參考，具體內(nèi)容如下

如圖，這就是最終效果。

去年安卓5.0發(fā)布的時(shí)候，當(dāng)我看到安卓全新的Material Design設(shè)計(jì)語(yǔ)言后，真的是喜歡的不得了，這種設(shè)計(jì)語(yǔ)言不同于偏平式設(shè)計(jì)以及卡片式設(shè)計(jì)。簡(jiǎn)約，自然。直到15年初，偶然看到CM團(tuán)隊(duì)已經(jīng)發(fā)布了好多基于安卓5.0的ROM，恰巧有我手機(jī)對(duì)應(yīng)的版本，便迫不及待的刷了固件，體驗(yàn)了一把。
不得不說(shuō)的是，安卓的這個(gè)版本簡(jiǎn)直歷史性變革，更加流暢，好用，而且在開發(fā)者模式下，發(fā)現(xiàn)這個(gè)版本移除了Dalvik模式，全部采用了ART模式(在安卓4.4的時(shí)候，這兩種是可以選擇的)，雖然我用的時(shí)候會(huì)出現(xiàn)一些小bug(大概一周會(huì)出現(xiàn)1-2次明顯卡頓)，不過(guò)用起來(lái)還是很舒服的。

然后就說(shuō)一下我比較喜歡的幾個(gè)地方吧。

1.后臺(tái)任務(wù)管理器樣式，卡片堆疊效果，第一次看見這個(gè)感覺酷爆了，因?yàn)槲覐膩?lái)沒想過(guò)能在手機(jī)上出現(xiàn)這么炫酷的效果。然后就是蘋果在一年后9.0的系統(tǒng)后臺(tái)管理界面也使用了這種設(shè)計(jì)，只不過(guò)是橫向滾動(dòng)，我想說(shuō)一個(gè)大寫的呵呵。
2.沉浸式設(shè)計(jì)，額…這個(gè)有點(diǎn)抄襲蘋果設(shè)計(jì)的嫌疑，不過(guò)我覺得比蘋果的更加好看 簡(jiǎn)約。雖然在4.4版本上可以設(shè)置狀態(tài)欄透明了，但是我做過(guò)的一些東西有時(shí)候還是會(huì)蒙上大概不透明度為50%的黑色圖層(可能是我的打開方式有誤).
3.短信，日歷右下角的那個(gè)小加號(hào)。雖然看起來(lái)沒什么，但是那個(gè)很有點(diǎn)點(diǎn)睛之筆的意思啊。每個(gè)頁(yè)面的顏色搭配都很漂亮，那個(gè)小加號(hào)的顏色也是點(diǎn)睛色。看起來(lái)很舒服，很有紙質(zhì)閱讀的感受(后來(lái)看到說(shuō)當(dāng)時(shí)谷歌就是以這種感覺為基礎(chǔ)設(shè)計(jì)的這套設(shè)計(jì)語(yǔ)言).
4.長(zhǎng)陰影。不多說(shuō)了，目測(cè)一大波App的icon都采用這個(gè)了。

思路

就是利用scrollview的內(nèi)容視圖的偏移量來(lái)計(jì)算每個(gè)view的位置，然后利用iOS中滾動(dòng)視圖在頂部以及底部繼續(xù)拉的時(shí)候的那個(gè)效果來(lái)相應(yīng)的完成邊界的效果（安卓的滾動(dòng)視圖…呵呵，不重寫的話就拉不動(dòng)了）。
其實(shí)就那么幾條公式就搞定了。

核心代碼

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

 [self.viewArr enumerateObjectsUsingBlock:^(UIView * view, NSUInteger idx, BOOL *stop) {

 NSInteger value = self.distance;

 /*************設(shè)置位置***************/
 CGRect rect = view.frame;
 //view最底位置
 NSInteger min_y = self.top + value*idx;
 rect.origin.y = min_y - (scrollView.contentOffset.y);

 //view的最高位置
 if (scrollView.contentOffset.y >= value*idx-value*pow(2.0, idx)/pow(2.0, self.dataArr.count)){
  rect.origin.y = self.top+value*pow(2.0, idx)/pow(2.0, self.dataArr.count);
 }
 if (scrollView.contentOffset.y > scrollView.contentSize.height- SCREEN_HEIGTH) {
  rect.origin.y = rect.origin.y -(scrollView.contentOffset.y -(scrollView.contentSize.height-SCREEN_HEIGTH));
 }
 view.frame = rect;

 /*************設(shè)置大小***************/
 CGFloat scale = 0.60;
 scale = (rect.origin.y*0.75 +60)/1000+scale >=0.9?0.9:(rect.origin.y*0.75 +50)/1000+scale;
 view.layer.transform = CATransform3DMakeScale(scale, scale, 1);
 }];
}

[git源碼]

1.使用時(shí)同UITableView類似。
2.可以詳細(xì)看一下接口函數(shù)就會(huì)知道怎么使用了。
3.已經(jīng)實(shí)現(xiàn)了復(fù)用。
4.后續(xù)會(huì)一直完善。
5.如果代碼能幫助到您，非常榮幸。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論