其實這個標題的模擬並不太準確,百葉窗高度是固定的,只是 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 : 百葉窗效果
doctype html html lang en head meta charset utf 8 title 百葉窗效果 title style body box box li box li div box li div p style head body ul class box id box1...
html實現百葉窗效果
html實現百葉窗效果 原理很簡單就是相當於把分成n份開始輪播,下面開始上 並解析其步驟 style中的 當然這裡要用到絕對定位 byc 想分成幾份 子容器的寬度就是父容器的寬度 份數 也要用定位超出的部分讓其隱藏 byc div byc div p 新增 本次例項用了五張 byc div p nt...
百葉窗動畫思路
相信大家都見過百葉窗動畫效果,那麼我就簡單的給大家介紹一下這個百葉窗的動畫效果是怎麼 實現的 首先 我們要建立乙個大的div來承載我們切圖後的小div 我覺得 百葉窗的難點就難在 如何將一張大於切割成若干的小圖 在切割之前 我們要先確認好切割多少張 var col 10 定義切割的列數 varrow...