feat(android, ios): nested rich text support vertical alignment setti…

…ng (#2521) * feat(ios): rich text images support vertical alignment setting * feat(ios): add rich text's vertical align offset support * feat(ios): margin support for nested component in richText * feat(android): add `verticalAlign` for `Image` in rich text * fix(android): backgroundColor not working in nested text * feat(android): add properties for `Image` in rich text `tintColor`, `backgroundColor`, `margin` and `padding` * feat(ios): text in rich text support verticalAlign setting * feat(android): verticalAlign for textnode * feat(android): add backgroundColor in legacy mode * fix(android): baseline align offset wrong * feat(ios): support nested text verticalAlign style setting * fix(android): verticalAlign for boringLayout * chore(docs): add verticalAlign docs * chore(ios): make verticalAlign default value baseline * feat(vue): update text demo * chore(ios): add verticalAlign and update demo * chore(docs): update verticalAlign minimum supported version --------- Co-authored-by: iPel <pel20121221@gmail.com> Co-authored-by: luomy <ozonelmy@163.com> Co-authored-by: OpenHippy <124017524+open-hippy@users.noreply.github.com>
Tencent · Mar 16, 2023 · df4d7ea · df4d7ea
1 parent dcd479f
commit df4d7ea
Show file tree

Hide file tree

Showing 23 changed files with 1,616 additions and 444 deletions.
diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/HippyImageSpan.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/HippyImageSpan.java
diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/HippyVerticalAlignSpan.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/HippyVerticalAlignSpan.java
@@ -0,0 +1,67 @@
+/* Tencent is pleased to support the open source community by making Hippy available.
+ * Copyright (C) 2018 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.tencent.mtt.hippy.dom.node;
+
+import android.graphics.Paint.FontMetricsInt;
+import android.text.TextPaint;
+import android.text.style.CharacterStyle;
+
+/**
+ * A span that change the vertical align of the text. <strong>Caution:</strong> It depends on the
+ * TextPaint's FontMetrics, which may be changed by other span, so this span should be added with a
+ * lowest priority.
+ */
+public class HippyVerticalAlignSpan extends CharacterStyle {
+
+    private final FontMetricsInt mReusableFontMetricsInt = new FontMetricsInt();
+    private final String mVerticalAlign;
+    private int mLineTop;
+    private int mLineBottom;
+
+    public HippyVerticalAlignSpan(String verticalAlign) {
+        this.mVerticalAlign = verticalAlign;
+    }
+
+    public void setLineMetrics(int top, int bottom) {
+        mLineTop = top;
+        mLineBottom = bottom;
+    }
+
+    @Override
+    public void updateDrawState(TextPaint tp) {
+        if (mLineTop != 0 || mLineBottom != 0) {
+            final FontMetricsInt fmi = mReusableFontMetricsInt;
+            switch (mVerticalAlign) {
+                case TextNode.V_ALIGN_TOP:
+                    tp.getFontMetricsInt(fmi);
+                    tp.baselineShift = mLineTop - fmi.top;
+                    break;
+                case TextNode.V_ALIGN_MIDDLE:
+                    tp.getFontMetricsInt(fmi);
+                    tp.baselineShift = (mLineTop + mLineBottom - fmi.top - fmi.bottom) / 2;
+                    break;
+                case TextNode.V_ALIGN_BOTTOM:
+                    tp.getFontMetricsInt(fmi);
+                    tp.baselineShift = mLineBottom - fmi.bottom;
+                    break;
+                case TextNode.V_ALIGN_BASELINE:
+                default:
+                    break;
+            }
+        }
+    }
+
+}
diff --git a/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/ImageNode.java b/android/sdk/src/main/java/com/tencent/mtt/hippy/dom/node/ImageNode.java
@@ -16,21 +16,25 @@
 package com.tencent.mtt.hippy.dom.node;
 
 
+import android.graphics.Color;
 import android.text.style.ImageSpan;
-
 import com.tencent.mtt.hippy.annotation.HippyControllerProps;
-
 import com.tencent.mtt.hippy.views.image.HippyImageView.ImageEvent;
 import java.util.ArrayList;
 
 @SuppressWarnings({"unused"})
 public class ImageNode extends StyleNode {
 
+  @Deprecated
   public static final String PROP_VERTICAL_ALIGNMENT = "verticalAlignment";
 
   private final boolean mIsVirtual;
   private HippyImageSpan mImageSpan = null;
+  @Deprecated
   private int mVerticalAlignment = ImageSpan.ALIGN_BASELINE;
+  private String mVerticalAlign;
+  private int mTintColor = Color.TRANSPARENT;
+  private int mBackgroundColor = Color.TRANSPARENT;
   private final boolean[] shouldSendImageEvent;
 
   private ArrayList<String> mGestureTypes = null;
@@ -48,10 +52,25 @@ public boolean isEnableImageEvent(ImageEvent event) {
     return shouldSendImageEvent[event.ordinal()];
   }
 
+  /**
+   * @deprecated use {@link #getVerticalAlign} instead
+   */
+  @Deprecated
   public int getVerticalAlignment() {
     return mVerticalAlignment;
   }
 
+  public String getVerticalAlign() {
+      if (mVerticalAlign != null) {
+          return mVerticalAlign;
+      }
+      DomNode parent = getParent();
+      if (parent instanceof TextNode) {
+          return ((TextNode) parent).getVerticalAlign();
+      }
+      return null;
+  }
+
   public boolean isVirtual() {
     return mIsVirtual;
   }
@@ -140,11 +159,30 @@ public void touchCancelable(boolean flag) {
     }
   }
 
+  /**
+   * @deprecated use {@link #setVerticalAlign} instead
+   */
+  @Deprecated
   @HippyControllerProps(name = PROP_VERTICAL_ALIGNMENT, defaultType = HippyControllerProps.NUMBER, defaultNumber = ImageSpan.ALIGN_BASELINE)
   public void setVerticalAlignment(int verticalAlignment) {
     mVerticalAlignment = verticalAlignment;
   }
 
+  @HippyControllerProps(name = TextNode.PROP_VERTICAL_ALIGN, defaultType = HippyControllerProps.STRING)
+  public void setVerticalAlign(String align) {
+      switch (align) {
+          case TextNode.V_ALIGN_TOP:
+          case TextNode.V_ALIGN_MIDDLE:
+          case TextNode.V_ALIGN_BASELINE:
+          case TextNode.V_ALIGN_BOTTOM:
+              mVerticalAlign = align;
+              break;
+          default:
+              mVerticalAlign = TextNode.V_ALIGN_BASELINE;
+              break;
+      }
+  }
+
   @HippyControllerProps(name = "src", defaultType = HippyControllerProps.STRING)
   public void setUrl(String url) {
     if (mImageSpan != null) {
@@ -163,4 +201,36 @@ public void setOnLoadEnd(boolean enable) {
   public void setOnError(boolean enable) {
     shouldSendImageEvent[ImageEvent.ONERROR.ordinal()] = enable;
   }
+
+  @HippyControllerProps(name = "tintColor", defaultType = HippyControllerProps.NUMBER)
+  public void setTintColor(int tintColor) {
+      mTintColor = tintColor;
+      if (mImageSpan != null) {
+          mImageSpan.setTintColor(tintColor);
+      }
+  }
+
+  public boolean hasTintColor() {
+      return mTintColor != Color.TRANSPARENT;
+  }
+
+  public int getTintColor() {
+      return mTintColor;
+  }
+
+  @HippyControllerProps(name = NodeProps.BACKGROUND_COLOR, defaultType = HippyControllerProps.NUMBER)
+  public void setBackgroundColor(int color) {
+      mBackgroundColor = color;
+      if (mImageSpan != null) {
+          mImageSpan.setBackgroundColor(color);
+      }
+  }
+
+  public boolean hasBackgroundColor() {
+      return mBackgroundColor != Color.TRANSPARENT;
+  }
+
+  public int getBackgroundColor() {
+      return mBackgroundColor;
+  }
 }