HarmonyOS列表組件-ListContainer
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
前言
我們?cè)赼pp開(kāi)發(fā)中，列表組件絕對(duì)是使用場(chǎng)景最高的組件之一，鴻蒙為我們提供了ListContainer列表組件，它是一個(gè)是用來(lái)呈現(xiàn)連續(xù)、多行數(shù)據(jù)的組件，繼承自ComponentContainer，因此它是一個(gè)容器組件，使用BaseItemProvider來(lái)存儲(chǔ)對(duì)象。
正文
這里先簡(jiǎn)單介紹下ListContainer的基本用法：
1.在layout文件中聲明ListContainer控件;
2.定義列表控件的適配器ListItemProvider;
3.在Ability中給ListContainer設(shè)置數(shù)據(jù);
只需要三步就可以實(shí)現(xiàn)最基本的列表效果，這里就不貼代碼了，官方文檔有比較詳細(xì)的說(shuō)明，本文重點(diǎn)分析下如何通過(guò)自定義ListContainer來(lái)
實(shí)現(xiàn)子組件弧形排布的效果，并且隨著半徑和鏡像距離的改變子組件的排布也不斷變化，效果如下：
因?yàn)長(zhǎng)istContainer的子組件默認(rèn)是直線排列，可以通過(guò)設(shè)置LayoutManager(布局管理器)來(lái)改變子組件排列方式，但是官方只提供了TableLayoutManager(網(wǎng)格)和DirectionalLayoutManager(線性)兩種布局管理器，很顯然無(wú)法滿足需求，于是設(shè)想自定義一個(gè)TurnLayoutManager繼承DirectionalLayoutManager，然后重寫(xiě)相關(guān)方法對(duì)子組件重新排列：
然而事情并非如預(yù)想一般簡(jiǎn)單，DirectionalLayoutManager并沒(méi)有對(duì)應(yīng)的方法，它的父類(lèi)LayoutManager也沒(méi)有，驚不驚喜，意不意外?!
- public abstract class LayoutManager {
- public LayoutManager() {
- throw new RuntimeException("Stub!");
- }
- public void setOrientation(int orientation) {
- throw new RuntimeException("Stub!");
- }
- public int getOrientation() {
- throw new RuntimeException("Stub!");
- }
- }
但是令人欣慰的是ListContainer并不是必須設(shè)置布局管理器子組件才能顯示出來(lái)，于是一個(gè)大膽的念頭在我的腦海中閃現(xiàn)：何不從ListContainer本身入手，自定義TurnListContainer類(lèi)繼承ListContainer，因?yàn)長(zhǎng)istContainer繼承自ComponentContainer，可以在onArrange()回調(diào)方法中修改子組件的位置以達(dá)到預(yù)期效果，事不宜遲，說(shuō)干就干：
1.實(shí)現(xiàn)ComponentContainer.ArrangeListener接口，重寫(xiě)onArrange()方法，在該方法中計(jì)算圓心，及x，y坐標(biāo)偏移量(列表是垂直方向時(shí)計(jì)算x軸偏移量，水平方向時(shí)計(jì)算y軸偏移量)
- @Override
- public void onArrange() {
- //計(jì)算圓心
- this.center = deriveCenter(gravity, getOrientation(), radius, peekDistance, center);
- //設(shè)置子組件偏移
- setChildOffsets();
- }
2.調(diào)用child.arrange()方法修改子組件位置(因?yàn)楸疚闹攸c(diǎn)講解自定義ListContainer中遇到的問(wèn)題，因此圓心、子組件的坐標(biāo)計(jì)算過(guò)程就不贅述了，熟悉三角函數(shù)就很容易看懂)
- public void setChildOffsetsVertical() {
- //遍利修改每一個(gè)子組件的位置
- for (int ii = 0; ii < getChildCount(); ii++) {
- Component child = getComponentAt(ii);
- if (child == null) {
- continue;
- }
- LayoutConfig layoutParams = child.getLayoutConfig();
- //計(jì)算x軸偏移量
- final int offsetX = (int) resolveOffsetX(radius, child.getContentPositionY() +child.getHeight() / 2.0f,
- center, peekDistance);
- final int x = gravity == Gravity.START ? offsetX + layoutParams.getMarginLeft()
- : getWidth() - offsetX - child.getWidth() - getMarginStart(layoutParams);
- //調(diào)用子組件的arrange方法修改自身位置
- child.arrange(x, child.getTop(), child.getWidth(), child.getHeight());
- }
- }
3.在修改半徑、鏡像距離、方向、文字旋轉(zhuǎn)時(shí)，調(diào)用Component的postLayout()方法請(qǐng)求重新進(jìn)行測(cè)量、布局、繪制這三個(gè)流程來(lái)更新位置，因?yàn)槲业淖咏M件是provider提供的，不牽扯測(cè)量、和繪制過(guò)程，調(diào)用postLayout()的目的只是觸發(fā)onArrange回調(diào)對(duì)子組件位置修改。
- /**
- * 設(shè)置半徑
- *
- * @param radius 半徑
- */
- public void setRadius(int radius) {
- this.radius = Math.max(radius, MIN_RADIUS);
- postLayout();
- }
- /**
- * 設(shè)置鏡像距離
- *
- * @param peekDistance 鏡像距離
- */
- public void setPeekDistance(int peekDistance) {
- this.peekDistance = Math.min(Math.max(peekDistance, MIN_PEEK), radius);
- postLayout();
- }
- /**
- * 設(shè)置水平方向
- *
- * @param gravity 水平方向
- */
- public void setGravity(@Gravity int gravity) {
- this.gravity = gravity;
- postLayout();
- }
- /**
- * 設(shè)置文字旋轉(zhuǎn)
- *
- * @param isRotate 文字是否旋轉(zhuǎn)
- */
- public void setRotate(boolean isRotate) {
- this.isRotate = isRotate;
- postLayout();
- }
準(zhǔn)備工作告一段落，開(kāi)始測(cè)試， what? 滿心期待的結(jié)果并沒(méi)有出現(xiàn)，除了設(shè)置文字旋轉(zhuǎn)有效果，修改半徑，鏡像距離，水平方向都沒(méi)效果。。。。。。這翻車(chē)來(lái)得太快就像龍卷風(fēng).
我開(kāi)始陷入漫長(zhǎng)的沉思中。。。。。。，嘗試了N多種方法后依然無(wú)果，最后分析認(rèn)為：我是在ListContainer的onArrange()回調(diào)中調(diào)用了子組件的onArrange()方法，有可能這兩個(gè)onArrange()方法存在沖突導(dǎo)致子組件本身的onArrange()失效，帶著些許疑問(wèn)我修改了代碼，設(shè)置半徑、鏡像距離時(shí)不用調(diào)用postLayout()來(lái)請(qǐng)求重新布局，直接調(diào)用child.arrange()更新子組件位置，代碼修改后效果如下：
效果還可以，修改半徑、鏡像距離，方向都能達(dá)到預(yù)期效果，但是細(xì)心的小伙伴一定觀察到了異常，。。。，靜止?fàn)顟B(tài)下是沒(méi)有問(wèn)題的，一旦開(kāi)始滾動(dòng)就出現(xiàn)原始位置和修改后位置交替出現(xiàn)的情況，為什么呢??，因?yàn)榭床坏皆创a我也不知道listContainer滾動(dòng)中的刷新邏輯，只能推測(cè)滾動(dòng)事件過(guò)程中肯定是觸發(fā)了重新布局的方法，導(dǎo)致子組件位置被反復(fù)重置。既然只有滾動(dòng)時(shí)才有問(wèn)題，那就從滾動(dòng)事件開(kāi)始入手吧，我的思路是監(jiān)聽(tīng)滾動(dòng)狀態(tài)，如果已經(jīng)開(kāi)始滑動(dòng)了，改變滾動(dòng)狀態(tài)跳過(guò)慣性滾動(dòng)直接停止?jié)L動(dòng)：
方法1：ListContainer.ScrolledListener監(jiān)聽(tīng)滾動(dòng),慣性滾動(dòng)時(shí)設(shè)置setEnabled(false)
- @Override
- public void scrolledStageUpdate(Component component, int newStage) {
- switch (newStage) {
- case Component.SCROLL_IDLE_STAGE:
- //觸摸滾動(dòng)
- break;
- case Component.SCROLL_AUTO_STAGE:
- //慣性滾動(dòng)
- break;
- case Component.SCROLL_NORMAL_STAGE:
- //停止?jié)L動(dòng)
- break;
- }
- }
方法2：Component.TouchEventListener監(jiān)聽(tīng)滾動(dòng)，手指抬起時(shí)設(shè)置listContainer.setEnabled(false)
- @Override
- public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
- switch (touchEvent.getAction()){
- case TouchEvent.PRIMARY_POINT_DOWN:
- //按下時(shí)設(shè)置禁止滑動(dòng)
- setEnabled(false);
- break;
- case TouchEvent.PRIMARY_POINT_UP:
- //抬起時(shí)設(shè)置可以滑動(dòng)
- setEnabled(true);
- break;
- default:
- return true;
- }
- return false;
- }
但是經(jīng)過(guò)測(cè)試，兩種方法都沒(méi)法立即停止慣性滾動(dòng)，也就是說(shuō)沒(méi)有辦法來(lái)干預(yù)ListContainer的滾動(dòng)狀態(tài)，至少目前我沒(méi)有找到阻止慣性滾動(dòng)的相關(guān)API，那么，只能再嘗試其他方法了，。。。。。。。。。。。。。。又一次我陷入漫長(zhǎng)的沉思中。。。。。。，在嘗試了各種方法都以失敗告終后，最終在我鍥而不舍的努力下終于得以解決，這是這個(gè)項(xiàng)目中我遇到的最大的坑沒(méi)有之一，耗費(fèi)了太多時(shí)間和精力，鴨梨好大呀，罷了罷了。。。，話不多說(shuō)，直接看正解吧：
- public void setChildOffsetsVertical() {
- for (int ii = 0; ii < getChildCount(); ii++) {
- Component child = getComponentAt(ii);
- if (child == null) {
- continue;
- }
- LayoutConfig layoutParams = child.getLayoutConfig();
- //計(jì)算x軸偏移量
- final int offsetX = (int) resolveOffsetX(radius, child.getContentPositionY() + child.getHeight() / 2.0f,
- center, peekDistance);
- final int xx = gravity == Gravity.START ? offsetX + layoutParams.getMarginLeft()
- : getWidth() - offsetX - child.getWidth() - getMarginStart(layoutParams);
- //調(diào)用子組件的setTranslationX方法修改自身x軸偏移量
- child.setTranslationX(xx);
- //設(shè)置子組件旋轉(zhuǎn)
- setChildRotationVertical(gravity, child, radius, center);
- }
對(duì)，沒(méi)有錯(cuò)，就只是修改了一行代碼，用child.setTranslationX()替換child.arrange()，就這么簡(jiǎn)單，不管你相不相信它就是這么神奇，之所以說(shuō)神奇是因?yàn)榭床坏皆创a不知道ListContainer的內(nèi)部滾動(dòng)機(jī)制：
經(jīng)過(guò)許多波折最終達(dá)到了預(yù)期的效果，肝都要爆了， 其實(shí)一開(kāi)始并不覺(jué)得項(xiàng)目本身有多復(fù)雜，計(jì)算量也不大，直到開(kāi)始做的時(shí)候問(wèn)題才一一顯現(xiàn)出來(lái)，不得不感慨，人生路上哪有那么多的順風(fēng)順?biāo)樞氖?總會(huì)有一些波折和苦難不合時(shí)宜的出現(xiàn)，磕磕絆絆的人生才是完整的。。。。。。，寫(xiě)這個(gè)文章主要是分享下開(kāi)發(fā)中我遇到的坑(主要還是想抒發(fā)下被代碼虐了千百遍的爆炸心態(tài))，避免后面再有人誤入歧途，浪費(fèi)寶貴的時(shí)間。
結(jié)束
下面是技術(shù)總結(jié)：
1.使用postLayout()請(qǐng)求重新布局后再調(diào)用child.arrange()，會(huì)導(dǎo)致child.arrange()失效;
- @Override
- public boolean onArrange(int i, int i1, int i2, int i3) {
- child.arrange();//此時(shí)設(shè)置子組件位置無(wú)效
- return false;
- }
2.child.arrange()會(huì)觸發(fā)listContainer的滾動(dòng)刷新機(jī)制，反復(fù)重置位置，鴻蒙調(diào)用child.arrange()修改子組件位置一切正常，但是listContainer滾動(dòng)中位置會(huì)被頻繁重置，如果涉及到修改子組件位置的，出現(xiàn)滾動(dòng)中位置被反復(fù)重置的，可以嘗試用child.setTranslationX(x)和child.setTranslationX(y)來(lái)代替;
3.監(jiān)聽(tīng)滾動(dòng)事件
android中有scrollVerticallyBy和scrollHorizontallyBy回調(diào)來(lái)監(jiān)聽(tīng)橫向滾動(dòng)和垂直滾動(dòng)，鴻蒙可以實(shí)現(xiàn)ListContainer.ScrolledListener接口或者Component.TouchEventListener接口監(jiān)聽(tīng)，我這里只所以選擇實(shí)現(xiàn)ListContainer.ScrolledListener是因?yàn)榭梢灾貙?xiě)它的兩個(gè)方法，onContentScrolled監(jiān)聽(tīng)滾動(dòng)中變化和scrolledStageUpdate監(jiān)聽(tīng)滾動(dòng)狀態(tài)變化，會(huì)比TouchEventListener方便些;
4.setEnable(false)
這個(gè)方法可以禁止listContainer滾動(dòng)，但是如果listContainer已經(jīng)開(kāi)始滾動(dòng)了再設(shè)置setEnable(false)并不會(huì)阻止listContainer慣性滾動(dòng)，禁止慣性滾動(dòng)的方法目前還沒(méi)有找到。
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
