Weex自定义原生android组件富文本高度问题

Question

我正在通过扩展 WXComponent 在 Weex 中创建一个 Richtext(WXTextView.java) 视图组件。由于 weex android sdk 不支持 Richtext 组件，并且 weex 文本组件也不支持 "v-html" 标签。

当我的 Richtext 元素被包裹在 div 中时，该元素不可见。我必须手动将高度添加到其父级 div 以使其可见。

    <div class="parent">
      <textView
        ref="nativeTextView"
        :style="{
          color: '#ff6600',
          fontSize: '40px',
          maxLine: 2,
          borderWidth: 2,
          borderStyle: 'solid',
          borderColor: 'green',
        }"
        text="ABCDEF"
      />
    </div>

为父级提供高度并不能解决我的目的，因为文本长度是动态的。我想让这个行为就像支持富文本的默认 weex 文本组件一样。

WXTextView.java

public class WXTextView extends WXComponent<TextView> {

private WXVContainer mContainer;
private int mHeight;

public WXTextView(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
    super(instance, dom, parent);
    mContainer = parent;
}


@Override
protected TextView initComponentHostView(@NonNull Context context) {
    TextView textView = new TextView(context);
    setProperty(WXComponent.PROP_FIXED_SIZE, WXComponent.PROP_FS_WRAP_CONTENT);
    textView.setIncludeFontPadding(false);
    textView.setTextSize(WXText.sDEFAULT_SIZE);
    return textView;
}

@WXComponentProp(name = "text")
public void setText(String text) {
    getHostView().setText(Html.fromHtml(text));
    updateUI();
}

private void updateUI() {
    ViewGroup.LayoutParams params = mContainer.getRealView().getLayoutParams();
    params.height = getHeight();

    mContainer.getRealView().setLayoutParams(params);
    mContainer.getRealView().invalidate();
}

@WXComponentProp(name = "ellipsize")
public void setEllipsize(String positionString) {
    try {
        int position = Integer.parseInt(positionString);
        TextUtils.TruncateAt truncateType;
        switch (position) {
            case 0:
                truncateType = TextUtils.TruncateAt.START;
                break;
            case 1:
                truncateType = TextUtils.TruncateAt.MIDDLE;
                break;
            default:
                truncateType = TextUtils.TruncateAt.END;
                break;
        }
        getHostView().setEllipsize(truncateType);
        updateUI();
    } catch (Exception exception) {
        exception.printStackTrace();
    }
}

@WXComponentProp(name = "maxLine")
public void setMaxLine(String lineString) {
    try {
        int lineCount = Integer.parseInt(lineString);
        getHostView().setMaxLines(lineCount);
        updateUI();
    } catch (Exception exception) {
        exception.printStackTrace();
    }
}

@JSMethod
public void getElementSpecs(JSCallback callback){
    Log.d("nikhil", "android getHeight: " + getHostView().getHeight());
    Map<String, Object> data = new HashMap<>();
    data.put("width", getHostView().getMeasuredWidth());
    data.put("height", getHostView().getMeasuredHeight());
    data.put("positionX", getHostView().getX());
    data.put("positionY", getHostView().getY());
    callback.invoke(data);
}

@WXComponentProp(name = "color")
public void setColor(String color) {
    getHostView().setTextColor(Color.parseColor(color));
}

@WXComponentProp(name = "fontSize")
public void setFontSize(String sizeString) {
    int lastIndex = sizeString.indexOf("px");

    if (lastIndex == -1) {
        lastIndex = sizeString.length();
    }

    sizeString = sizeString.substring(0, lastIndex);

    int size = Integer.parseInt(sizeString);
    getHostView().setTextSize(size);
    updateUI();
}

public int getHeight() {
    getHostView().setText(getHostView().getText());
    getHostView().setTextSize(TypedValue.COMPLEX_UNIT_PX, getHostView().getTextSize());
    int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(mContainer.getRealView().getLayoutParams().width,
            View.MeasureSpec.AT_MOST);
    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    getHostView().measure(widthMeasureSpec, heightMeasureSpec);
    mHeight = getHostView().getMeasuredHeight();
    return mHeight;
}

}

Answer 1

Text是Weex中最复杂的组件。为了实现与weex文本类似的行为，你需要像文本扩展WXTextDomObject一样扩展WXDomObject，并实现你自己的文本测量功能。

其实我已经在weex中写了一个richtext component，即将发布

Weex自定义原生android组件富文本高度问题

Weex customized native android component Rich Text height issue

richtext

weex