OpenHarmony开发者论坛

标题: OpenHarmony实现安卓约束布局bias属性的方法 [打印本页]

作者: 深开鸿_石悌君 时间: 2024-4-26 16:44
标题: OpenHarmony实现安卓约束布局bias属性的方法
[md]## 引言

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

## alignRules

### 安卓bias属性简介

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

### alignRules简单介绍

查看[通用属性\_位置信息](https://docs.openharmony.cn/page ... ributes-location.md)中说明，api9中引入了alignRules属性，属性的选项说明如下：

| 名称    | 类型                                                                                                                                                                            | 描述                                                                                                    |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| left    | { anchor: string, align:[HorizontalAlign](https://docs.openharmony.cn/page ... .md#horizontalalign)}       | 设置左对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。          |
| right    | { anchor: string, align:[HorizontalAlign](https://docs.openharmony.cn/page ... .md#horizontalalign)}       | 设置右对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。          |
| middle | { anchor: string, align:[HorizontalAlign](https://docs.openharmony.cn/page ... .md#horizontalalign)}       | 设置横向居中对齐方式的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 |
| top    | { anchor: string, align:[VerticalAlign](https://docs.openharmony.cn/page ... ms.md#verticalalign)}             | 设置顶部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。       |
| bottom | { anchor: string, align:[VerticalAlign](https://docs.openharmony.cn/page ... ms.md#verticalalign)}             | 设置底部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。       |
| center | { anchor: string, align:[VerticalAlign](https://docs.openharmony.cn/page ... ms.md#verticalalign)}             | 设置纵向居中对齐方式的参数。                                                                            |
| **bias** | [**Bias**](https://docs.openharmony.cn/page ... 1%E8%AF%B4%E6%98%8E) | **设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。**                   |

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

### 使用过程中注意点

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

2、[RelativeContainer](https://docs.openharmony.cn/page ... elativecontainer.md)中的子组件必须设置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") //必须要加
}
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)