OpenHarmony实现安卓约束布局bias属性的方法

引言

安卓约束布局ConstraintLayout是一种比较强大的布局方式，在实际开发中经常用到；在安卓APP OpenHarmony化过程中必然需要一定的转换方法。本文重点介绍layout_constraintVertical_bias属性在OpenHarmony中的一种实现方法。

alignRules

安卓bias属性简介

layout_constraintVertical_bias 是 Android ConstraintLayout 中的一个属性，它用于控制一个视图在其垂直约束边界内的相对位置。这个属性的值是一个介于 0 和 1 之间的浮点数，表示视图在垂直方向上的偏移比例。如果想要在一个已经通过垂直约束定义了起始点和结束点的视图中，进行更细致的垂直位置调整时非常有用。例如，如果你有一个按钮，它的顶部和底部都已经通过约束与布局中的其他元素对齐，但是你想让它在视觉上稍微向上或向下移动，就可以通过调整layout_constraintVertical_bias属性来实现。

alignRules简单介绍

查看通用属性_位置信息中说明，api9中引入了alignRules属性，属性的选项说明如下：

名称	类型	描述
left	{ anchor: string, align:HorizontalAlign}	设置左对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。
right	{ anchor: string, align:HorizontalAlign}	设置右对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。
middle	{ anchor: string, align:HorizontalAlign}	设置横向居中对齐方式的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。
top	{ anchor: string, align:VerticalAlign}	设置顶部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。
bottom	{ anchor: string, align:VerticalAlign}	设置底部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。
center	{ anchor: string, align:VerticalAlign}	设置纵向居中对齐方式的参数。
bias	Bias	设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。

一种熟悉的感觉扑面而来；废话不多说，具体样例请看实例展示

使用过程中注意点

1、bias属性在OpenHarmony4.1（api11）版本以上才支持

2、RelativeContainer中的子组件必须设置id，否则不显示

3、指定bias时必须同时指定起始和结束锚点：垂直方向必须同时指定top和bottom锚点，水平方向必须同时指定left和right锚点

实例

安卓布局xml

<androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/page_management_button"
      android:layout_width="0dp"
      android:layout_height="52dp"
      android:background="@color/white"
      android:clickable="true"
      android:focusable="true"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toLeftOf="@id/setting_button"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintHorizontal_weight="0.5" >
      
<ImageView
    android:id="@+id/page_management_image"
    android:layout_width="19dp"
    android:layout_height="21dp"
    android:layout_marginTop="8dp"
    android:layout_gravity="center"
    android:src="@drawable/page_management_2x"
    android:clickable="false"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/page_management_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="2dp"
    android:text="Page Manage"
    android:textAlignment="center"
    android:textColor="#4A5970"
    android:textFontWeight="400"
    android:textSize="11sp"
    android:clickable="false"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/page_management_image"
    app:layout_constraintVertical_bias="0.656" />
</androidx.constraintlayout.widget.ConstraintLayout>

OpenHarmony ets布局写法

RelativeContainer() {
  Image(this.page_management_icon)
    .width(19)
    .height(21)
    .margin({ top: 8 })
    .alignRules({
      top: { anchor: "__container__", align: VerticalAlign.Top },//__container__ 指容器id
      middle: { anchor: "__container__", align: HorizontalAlign.Center }
    })
    .id('page_management_icon')

    Text('Page Manage')
      .fontColor('#4A5970')
      .fontWeight(400)
      .fontSize(11)
      .margin({ top: 2 })
      .alignRules({
        top: { anchor: "page_management_icon", align: VerticalAlign.Bottom }, //必须要加
        bottom:{anchor:"__container__", align:VerticalAlign.Bottom},//必须要加
        middle: { anchor: "__container__", align: HorizontalAlign.Center },
        bias:{vertical:0.656}
      })
      .height('13fp') //必须要加
      .id("page_management_text") //必须要加
}