引言
安卓约束布局 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") //必须要加
}
写在最后
●如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
●点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
●关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
●更多鸿蒙最新技术知识点,请移步前往小编:https://gitee.com/