仿product hunt 頭像收起展開的效果

2021-07-09 05:31:52 字數 1529 閱讀 4311

不廢話,先看效果

思路view連線view,在沒有距離的時候,可以認為是座標軸為0的時候 view重疊view的時候,可以認為是座標軸-1的時候

view展開的時候,可以認為座標軸為1的時候

動畫的實現,通過onlayout中space的大小完成view的展開和重疊

viewdraghelper

如果你還不了解viewdraghelper,可以先看我之前寫的幾篇講viewdraghelper入門的文章

viewdraghelper幾個方法的理解

viewdraghelper.callback中每個方法的用法

viewdraghelper詳解

主要**部分

private

class

draghelpercallback

extends

viewdraghelper.callback

if (space < minspace)

if (listener != null)

requestlayout();

}@override

public

boolean

trycaptureview(view child, int pointerid)

@override

public

intgetviewverticaldragrange(view child)

@override

public

intgetviewhorizontaldragrange(view child)

@override

public

void

onviewreleased(view releasedchild, float xvel, float yvel) else

}// 判斷滑動的邊界,不能出界

@override

public

intclampviewpositionhorizontal(view child, int left, int dx)

}// 探測子view的右邊界

private

intgetcurrentviewright(view view)

// 探測子view的左邊界

private

intgetcurrentviewleft(view view)

// 讓動畫持續

@override

public

void

computescroll()

}// 指定滑動到某個位置

private

boolean

smoothslideto(float slideoffset)

return

false;

}

原始碼

github

評論 展開 收起

列表中文字最多三行,超出部分省略,並顯示展開收起按鈕,如果文字沒有超出三行則不顯示展開收起按鈕 1 在div 中新增乙個span 然後給div設定超出三行省略,這時候就可以獲取到文字高度和div高度了 2 根據字串長度判斷是否做展開 收起 單行 雙行顯示處理 特點 簡單粗暴 缺點 對於有換行字元的,...

Qml 展開收起面板

搜了一下網上沒有類似功能的ui,實現了乙個給大家參考。accordionelement.qml 由乙個layout組成,layout裡包含標題和內容元件,可以在外部實現內容元件進行替換,如isopen為false,內容元件將收縮起來,反之則展開。import qtquick 2.5 import q...

vue實現文字展開收起

思路 主要是css上可以分為兩部分,第一部分展示前面兩行,第二部分會根據第一部分的行數判斷縮排的大小,然後展示第三行。最後通過背景色的控制讓兩者看上去是一段文字。html css total introduce unfold detailed introduce after,before befor...