HarmonyOS自定義控件之測量與布局
在HarmonyOS中，控件最終展示到用戶界面上，會經歷測量(Estimate)、布局(Arrange)、繪制(Draw)等過程。這里我們來分析一下測量與布局的用法，并且結合上一篇文章事件分發一起實現一個簡單的滾動視差布局ParallaxLayout。
ParallaxLayout效果圖：
測量Estimate
如何自定義測量過程
首先通過setEstimateSizeListener(Component.EstimateSizeListener listener)來設置測量的回調：
- setEstimateSizeListener(new EstimateSizeListener() {
- @Override
- public boolean onEstimateSize(int widthEstimateSpec, int heightEstimateSpec) {
- return false;
- }
- });
在EstimateSizeListener 中，第一個參數為寬度測量參數，第二個為高度測量參數，我們可以通過EstimateSpec來獲取寬度、高度的模式(mode)與大小(size)：
- int mode = EstimateSpec.getMode(widthEstimateSpec);
- int size = EstimateSpec.getSize(widthEstimateSpec);
計算了控件最終大小之后，我們可以調用setEstimatedSize(int estimatedWidth, int estimatedHeight)函數來設置最終的測量大小。注意：setEstimatedSize函數需要的是具體的大小，而非測量參數，即EstimateSpec.getSize后的具體大小
- setEstimatedSize(widthSize, heightSize);
最后，如果需要讓設置的測量大小生效，我們應該在onEstimateSize中返回true:
- setEstimateSizeListener(new EstimateSizeListener() {
- @Override
- public boolean onEstimateSize(int widthEstimateSpec, int heightEstimateSpec) {
- int widthSize = EstimateSpec.getSize(widthEstimateSpec);
- int heightSize = EstimateSpec.getSize(heightEstimateSpec);
- setEstimatedSize(widthSize, heightSize);
- return true;
- }
- });
如果onEstimateSize返回true，那么最終系統不會在native層來測量大小。如果返回了false，系統還是會繼續測量大小，最終的大小可能與setEstimatedSize設置的結果不一致。
在setEstimatedSize后我們就可以通過下面的函數來獲取我們設置的大小：
- getEstimatedWidth(); // 獲取測量的寬度
- getEstimatedHeight(); // 獲取測量的高度
EstimateSpec
EstimateSpec是Component的內部類，EstimateSpec提供了一系列的操作測量參數的方法。
測量參數
測量參數是一個int值，它封裝了來自父控件的測量需求。測量參數由模式與大小兩個int值組合而成，公式如下：
- (size & ~EstimateSpec.ESTIMATED_STATE_BIT_MASK) | (mode & EstimateSpec.ESTIMATED_STATE_BIT_MASK)
其中size為當前控件的大小，mode為模式。也可以通過下面的函數來，通過size和mode來生成一個測量參數：
- int spec = EstimateSpec.getSizeWithMode(size, mode);
模式mode
通過EstimateSpec獲取的mode有三種取值：
- EstimateSpec.NOT_EXCEED 不超過：該模式表示父控件已經規定了當前控件大小的最大值
- EstimateSpec.PRECISE 精確：該模式表示父控件已經規定了當前控件大小的值
- EstimateSpec.UNCONSTRAINT 無約束：該模式表示父控件對當前控件大小沒有約束，控件可以想要任何大小
在不同模式下，控件的大小是如何確定的呢?可以簡單的通過下面的代碼來理解：
- // size變量為控件期望的大小，estimateSpec變量為父控件的測量參數
- final int specMode = EstimateSpec.getMode(estimateSpec);
- final int specSize = EstimateSpec.getSize(estimateSpec);
- final int result;
- switch (specMode) {
- case EstimateSpec.NOT_EXCEED:
- result = Math.min(specSize, size);
- break;
- case EstimateSpec.PRECISE:
- result = specSize;
- break;
- case EstimateSpec.UNCONSTRAINT:
- default:
- result = size;
- }
- 當mode為NOT_EXCEED時，控件的期望大小應該小于等于父控件給定的size
- 當mode為PRECISE時，控件的大小應該等于父控件給定的size
- 當mode為UNCONSTRAINT時，控件的大小可以為他期望的size
自定義布局
在自定義布局時，我們不僅僅要測量自己的大小，還需要測量子控件的大小。子控件可以通過estimateSize(int widthEstimatedConfig, int heightEstimatedConfig)函數來設置測量參數：
- child.estimateSize(widthEstimatedConfig, heightEstimatedConfig);
注意：estimateSize的兩個參數需要的是測量參數，而非具體的大小。這兩個參數會傳遞到子控件的onEstimateSize(int widthEstimateSpec, int heightEstimateSpec)回調中。
默認情況下，子控件會根據widthEstimatedConfig與heightEstimatedConfig來確認自己的最終大小，子控件也可以通過setEstimateSizeListener來自定義其測量過程，最終其參考的測量參數就是我們通過estimateSize函數設置的測量參數。
接下來我們只需要遍歷所有子控件來為他們設置測量參數就達到了測量子控件的大小的目的。自定義布局的測量過程基本就是包含了這兩個步驟：為所有子控件設置測量參數以及測量自己的大小。
子控件的測量參數
那么，最重要的問題是，我們如何確定子控件的測量參數到底應該是多少，換句話說我們如何生成或者獲取子控件的測量參數呢?子控件的測量參數與很多因素有關，如父控件的測量參數、父控件的padding值、子控件自己的期望大小。我們可以根據這幾個參數來確定子控件的測量參數。
這里我們通過一個幫助函數來生成子控件的測量參數，首先函數的定義應該如下：
- /**
- * 根據父component的spec、padding以及子component的期望大小，生成子component的spec
- * @param spec 父component的spec
- * @param padding 父component的padding
- * @param childDimension 子component的期望大小
- * @return 子component的spec
- */
- public static int getChildEstimateSpec(int spec, int padding, int childDimension);
注意：childDimension應該怎么獲取呢?實際上就是ComponentContainer.LayoutConfig中的width或者height，測量高度就取height、寬度就取width。
接下來我們應該根據父控件的mode以及childDimension來確定子控件的mode與size，并生成測量參數。具體參考如下代碼：
- public static int getChildEstimateSpec(int spec, int padding, int childDimension) {
- int specMode = EstimateSpec.getMode(spec);
- int specSize = EstimateSpec.getSize(spec);
- int size = Math.max(0, specSize - padding);
- int resultSize = 0;
- int resultMode = 0;
- switch (specMode) {
- // Parent has imposed an exact size on us
- case EstimateSpec.PRECISE:
- if (childDimension >= 0) {
- resultSize = childDimension;
- resultMode = EstimateSpec.PRECISE;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_PARENT) {
- // Child wants to be our size. So be it.
- resultSize = size;
- resultMode = EstimateSpec.PRECISE;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_CONTENT) {
- // Child wants to determine its own size. It can't be
- // bigger than us.
- resultSize = size;
- resultMode = EstimateSpec.NOT_EXCEED;
- if (size == 0) {
- // size will not be 0 when resultMode is NOT_EXCEED, don't know why
- resultMode = EstimateSpec.PRECISE;
- }
- }
- break;
- // Parent has imposed a maximum size on us
- case EstimateSpec.NOT_EXCEED:
- if (childDimension >= 0) {
- // Child wants a specific size... so be it
- resultSize = childDimension;
- resultMode = EstimateSpec.PRECISE;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_PARENT) {
- // Child wants to be our size, but our size is not fixed.
- // Constrain child to not be bigger than us.
- resultSize = size;
- resultMode = EstimateSpec.NOT_EXCEED;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_CONTENT) {
- // Child wants to determine its own size. It can't be
- // bigger than us.
- resultSize = size;
- resultMode = EstimateSpec.NOT_EXCEED;
- if (size == 0) {
- // size will not be 0 when resultMode is NOT_EXCEED, don't know why
- resultMode = EstimateSpec.PRECISE;
- }
- }
- break;
- // Parent asked to see how big we want to be
- case EstimateSpec.UNCONSTRAINT:
- if (childDimension >= 0) {
- // Child wants a specific size... let him have it
- resultSize = childDimension;
- resultMode = EstimateSpec.PRECISE;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_PARENT) {
- // Child wants to be our size... find out how big it should
- // be
- resultSize = size;
- resultMode = EstimateSpec.UNCONSTRAINT;
- } else if (childDimension == ComponentContainer.LayoutConfig.MATCH_CONTENT) {
- // Child wants to determine its own size.... find out how
- // big it should be
- resultSize = size;
- resultMode = EstimateSpec.UNCONSTRAINT;
- }
- break;
- }
- return makeEstimateSpec(resultSize, resultMode);
- }
makeEstimateSpec函數實際就是(size & ~EstimateSpec.ESTIMATED_STATE_BIT_MASK) | (mode & EstimateSpec.ESTIMATED_STATE_BIT_MASK)的值。
測量過程到此就基本結束，接下來看看稍微簡單一點的布局。
布局Arrange
如何自定義布局過程
首先通過setArrangeListener(ComponentContainer.ArrangeListener listener)來設置測量的回調：
- setArrangeListener(new ArrangeListener() {
- @Override
- public boolean onArrange(int l, int t, int width, int height) {
- return false;
- }
- });
與測量類似，布局也是通過回調函數的方式來自定義。其中第一個參數為該控件的left值，第二個為top值，第三個為寬度，第四個為高度。
setArrangeListener是在ComponentContainer中定義的，Component中沒有。
與測量不同的是，控件本身的位置與寬高已經由父控件確定了，即為onArrange回調中的四個參數。
在Arrange過程中，我們需要做的就是遞歸為每個子控件設置位置。通過調用子控件的arrange(int left, int top, int width, int height)函數來排列子元素：
- child.arrange(left, top, child.getEstimatedWidth(), child.getEstimatedHeight());
同樣的，onArrange回調需要返回true，才會使布局生效。
在調用了child的arrange函數后，就能通過child.getWidth()與child.getHeight()來獲取子控件的寬高了。
一個簡單的垂直順序排列布局的簡化代碼如下：
- @Override
- public boolean onArrange(int l, int t, int width, int height) {
- int childCount = getChildCount();
- int childTop = t;
- for(int i = 0; i < childCount; i++) {
- Component child = getComponentAt(i);
- int childHeight = child.getEstimatedHeight();
- child.arrange(l, childTop, child.getEstimatedWidth(), childHeight);
- childTop += childHeight;
- }
- return true;
- }
注意：不管是onArrange回調還是子控件的arrange函數，最后兩個參數都是寬與高，而不是right與bottom。
綜合
接下來我們結合我們前一篇自定義控件之觸摸事件，與測量、布局一起，來自定義一個簡單的滾動視差布局ParallaxLayout。
- ParallaxLayout包含有兩個子控件，第一個固定150vp的Image。第二個是高度為match_parent的Text控件
- 在onEstimateSize中，主要是遍歷子控件為其設置測量參數，并為自己設置測量結果。Image的測量高度為固定150vp，Text的高度與布局一致，我們需要通過測量參數與LayoutConfig計算出所有子控件的高度與自己的高度。
- 在onArrange中，按順序垂直排列子控件。由于Image+Text的高度已經超出了自己的高度，因此Text的底部會有一部分顯示不出來。
- 在onTouchEvent中，通過計算手指的移動距離，為每個子控件setTranslateY，來實現位移的效果。最大位移距離為Image的高度。
- 通過為Image設置一半的translateY，為Text設置全部的translateY來實現滾動視差效果，關鍵代碼如下：
- for (int i = 0; i < childCount; i++) {
- Component child = getComponentAt(i);
- if (i == 0) {
- child.setTranslationY(deltaY / 2);
- } else {
- child.setTranslationY(deltaY);
- }
- }
具體代碼參考：parallax-layout
