Android 百葉窗摺疊效果

其實這個標題的模擬並不太準確，百葉窗高度是固定的，只是 z 軸有旋轉。摺疊效果並沒有體現出來。不過畢竟自己一開始想到這個名字，那就硬著頭皮也要叫這名字啦。

想下效果，其實應該不會太難，就是控制下layout而已。所以，那為什麼不擼出來呢？萬一以後還要用呢？

其實除了layout這個問題，還有乙個問題需要考慮，就是draw的先後順序。預設順序肯定是從第乙個到最後乙個，那那個摺疊效果就不是這樣的。後面繪製的會疊在前面繪製的上面。所以最後結果就是最後繪製的在最上面。

相關問題明確之後，放開手擼就好啦。雖然說onlayout()才是最主要的，但是onmeasure()方法也是要做下處理。這裡控制項寬度是以所有子 view 的寬度加起來確定，當然這個是最小值，如果你設定match_parent那麼我肯定也阻擋不了你。還有如果你給的精確值如果低於了測量出來的最小寬度，最後也會使用最小寬度。高度就取子 view 中最高的就好啦。這個控制項使用場景原則上是所有的子view都是乙個尺寸。

@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) 
if (widthmode == measurespec.exactly) 
int heightsize = getpaddingbottom() + getpaddingbottom();
int childcount = getchildcount();
for (int i = 0; i < childcount; i++) 
widthsize += extraspace * (childcount - 1);
heightsize += getpaddingbottom() + getpaddingtop();
setmeasureddimension(math.max(widthsize, maxwidth), heightsize);
}複製**

對於onlayout(),看截圖都知道，最後是支援居左向右展開和居右向左展開兩種方式。用居左方式舉個例子，居左的話，預設所有子view都是從最左邊開始布局，最左邊就是viewgroup的paddingleft，extra 就是position*width*fraction。比如說第二個，position就是 1，這裡的fraction是乙個比例，外部可以設定。同理，展開的話，就是當前 view 之前所有 view 寬度相加。

等等，你是不是覺得少了點兒什麼？嗯，其實布局效果出來之後你會發現少了乙個 space ，子 view 之間沒有空隙，這樣當然不行啊，所以，增加乙個extraspace字段，由外部指定到底需要多少留白。但是這個extraspace你不知道使用者怎麼傳，所以要做一下限定，不然會直接破壞掉你之前的計算邏輯。

void layoutchildrenleft(int left, int right)  else 
dy *= animatedfraction;
}if (extraspace < 0 && -i * extraspace > dy) else 
}child.layout(parentleft + dy, parenttop, parentleft + dy + width, parenttop + height);}}
}複製**

到這裡，預設和展開狀態下的布局基本搞定，但是，這樣肯定是不夠的啊，要加特效啊，要有切換效果啊。所以還要寫個layoutchangeanimator還要設定乙個timeinterpolator,再加上乙個toggle()方法來切換展開和預設狀態。

基本上算是完美了，最後突然發現，應該有乙個maxcount字段，當加入的大於這個閾值，那麼就自動摺疊，沒有超過，那就預設展開。

最後，還有上文提到的那個draw順序的問題，其實這個也很簡單，viewgroup已經為我們提供了功能支援。

@override
protected int getchilddrawingorder(int childcount, int i) 
複製**

方法名說的很明白，這個方法就是用來返回相關順序的，這裡更改為反序繪製，不過這個方法預設是不生效的，如果你想使用它，那麼你必須先指定它可用，這裡有另外乙個方法,setchildrendrawingorderenabled(true);。

implementation 'com.lovejjfg.blinds:blinds:lastedversion'

xml：

code:
blinds4.orientation = right
blinds4.maxcount = 4
blinds4.extraspace = 20
blinds4.fraction = 0.6f
blinds4.setanimationduration(1000)
blinds4.setinterpolator(bounceinterpolator())
複製**

到此，基本介紹完畢，原始碼 github ：

Android 百葉窗摺疊效果

百葉窗效果

html實現百葉窗效果

百葉窗動畫思路

Android 百葉窗摺疊效果

百葉窗效果

html實現百葉窗效果

百葉窗動畫思路

相關推薦