HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

这篇具有很好参考价值的文章主要介绍了HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

PositionLayout

在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。

PositionLayout示意图

HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

布局方式

PositionLayout以坐标的形式控制组件的显示位置,允许组件相互重叠。

  • 在layout目录下的XML文件中创建PositionLayout并添加多个组件,并通过position_x和position_y属性设置子组件的坐标。

使用PositionLayout的布局效果

HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

 示例代码:

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:position"
    ohos:height="match_parent"
    ohos:width="300vp"
    ohos:background_element="#3387CEFA">

    <Text
        ohos:id="$+id:position_text_1"
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="50vp"
        ohos:position_y="8vp"
        ohos:text="Title"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_2"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="8vp"
        ohos:position_y="64vp"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_3"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="92vp"
        ohos:position_y="188vp"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

设置子组件的坐标时(position_x和position_y属性),除了上述示例中的XML方式,还可以在对应的AbilitySlice中通过setPosition(int x, int y)接口设置,Java示例代码如下:

        Text title = (Text)findComponentById(ResourceTable.Id_position_text_1);
        Text content1 = (Text)findComponentById(ResourceTable.Id_position_text_2);
        Text content2 = (Text)findComponentById(ResourceTable.Id_position_text_3);
        
        title.setPosition(vp2px(50), vp2px(8));
        content1.setPosition(vp2px(8), vp2px(64));
        content2.setPosition(vp2px(92), vp2px(188));

单位转换的方法如下:

    private int vp2px(float vp){
        return AttrHelper.vp2px(vp,this);
    }
  • 对于超过布局本身大小的组件,超出部分将不显示。

 Right组件右侧超出部分将不显示

HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

 示例代码:

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    ...>

    ...

    <Text
        ohos:id="$+id:position_text_4"
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="212vp"
        ohos:position_y="64vp"
        ohos:text="Right"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

AdaptiveBoxLayout

AdaptiveBoxLayout是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。

  1. 该布局中的每个子组件都用一个单独的“盒子”装起来,子组件设置的布局参数都是以盒子作为父布局生效,不以整个自适应布局为生效范围。
  2. 该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数,高度为match_content,每一行中的所有盒子按高度最高的进行对齐。
  3. 该布局水平方向是自动分块,因此水平方向不支持match_content,布局水平宽度仅支持match_parent或固定宽度。
  4. 自适应仅在水平方向进行了自动分块,纵向没有做限制,因此如果某个子组件的高设置为match_parent类型,可能导致后续行无法显示。

 AdaptiveBoxLayout示意图

HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

常用方法

AdaptiveBoxLayout布局常用方法如下。

方法

功能

addAdaptiveRule(int minWidth, int maxWidth, int columns)

添加一个自适应盒子布局规则。

removeAdaptiveRule(int minWidth, int maxWidth, int columns)

移除一个自适应盒子布局规则。

clearAdaptiveRules()

移除所有自适应盒子布局规则。

场景示例

在AdaptiveBoxLayout中添加和删除自适应盒子布局规则的效果对比如下。

HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

 XML布局示例代码:

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <AdaptiveBoxLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:id="$+id:adaptive_box_layout">

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 1"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 2"
            ohos:text_size="18fp" />

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:multiple_lines="true"
            ohos:text="AdaptiveBoxLayout, where a number of boxes with the same width but varied heights are laid out. The height of a row is determined by the highest box."
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 4"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="Add"
            ohos:text_size="18fp" />



        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 5"
            ohos:text_size="18fp" />

        <Text
            ohos:height="160vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 6"
            ohos:text_size="18fp" />
    </AdaptiveBoxLayout>

    <Button
        ohos:id="$+id:add_rule_btn"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="10vp"
        ohos:padding="10vp"
        ohos:background_element="#A9CFF0"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);"/>

    <Button
        ohos:id="$+id:remove_rule_btn"
        ohos:padding="10vp"
        ohos:top_margin="10vp"
        ohos:layout_alignment="horizontal_center"
        ohos:bottom_margin="10vp"
        ohos:background_element="#D5D5D5"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);"/>

</DirectionalLayout>

Java关键代码:文章来源地址https://www.toymoban.com/news/detail-489888.html

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);

findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
    // 添加规则
    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));

findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
    // 移除规则
    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));

到了这里,关于HarmonyOS学习路之开发篇—Java UI框架(PositionLayout&&AdaptiveBoxLayout)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS学习路之方舟开发框架—方舟开发框架(ArkUI)概述

    方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。 UI: 即用户界面。开发者可以将应用的用户界面设计为多个功能

    2024年02月16日
    浏览(45)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 四)

    当创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量

    2024年02月17日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 五)

    如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。 @Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位

    2024年02月17日
    浏览(54)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 二)

    在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成

    2024年02月04日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 三)

    在开始之前,先明确自定义组件和页面的关系: 自定义组件: @Component 装饰的 UI 单元,可以组合多个系统组件实现 UI 的复用。 页面:即应用的 UI 页面。可以由一个或者多个自定义组件组成, @Entry 装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有

    2024年02月16日
    浏览(59)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 二)

    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。 @Prop装饰的变量和父组件建立单向的同步关系: @Prop变量允许在本地修改,但修改后的变化不会同步回父组件。 当父组件中的数据源更改时,与之相关的@Prop装饰的变

    2024年02月14日
    浏览(45)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 六)

    AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是,LocalStorage是页面级的,通常应用于页面内的数据共享。而对于AppStorage,是应用级的全局状态共享。 AppStorage是在应用启动

    2024年02月20日
    浏览(51)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 一)

    ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在 TypeScript (简称 TS )生态基础上做了进一步扩展,继承了 TS 的所有特性,是 TS 的超集。因此,在学习 ArkTS 语言之前,建议开发者具备 TS 语言开发能力。 当前, ArkTS 在 TS 的基础上主要扩展了如下能力: 基本语法:

    2024年02月16日
    浏览(68)
  • HarmonyOS学习路之开发篇—流转

    随着全场景多设备生活方式的不断深入,用户拥有的设备越来越多,每个设备都能在适合的场景下提供良好的体验,例如:手表可以提供及时的信息查看能力,电视可以带来沉浸的观影体验。但是,每个设备也有使用场景的局限,例如:在电视上输入文本相对手机来说是非常

    2024年02月15日
    浏览(42)
  • HarmonyOS学习路之开发篇—AI功能开发(分词)

    随着信息技术的发展,网络中的信息量成几何级增长逐步成为当今社会的主要特征。准确提取文本关键信息,是搜索引擎等领域的技术基础,而分词作为文本信息提取的第一步则尤为重要。 分词作为自然语言处理领域的基础研究,衍生出各类不同的文本处理相关应用。 分词

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包