Android 百葉窗摺疊效果

2021-09-11 21:11:33 字數 2781 閱讀 8475

其實這個標題的模擬並不太準確,百葉窗高度是固定的,只是 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都是從最左邊開始布局,最左邊就是viewgrouppaddingleft,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...