Question

我正在通过扩展WXComponent在Weex中创建一个Richtext（WXTextView.java）视图组件。由于Richtext组件在weex android sdk中不可用，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文本的行为，您需要将WXDomObject扩展为文本扩展WXTextDomObject，并实现自己的文本度量函数。

事实上，我已经在weex中写了richtext component，很快就会发布。

Weex定制原生android组件Rich Text高度问题

1 个答案: