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