HarmonyOS探索(UI篇——布局)

前言

HarmonyOS 于2020.12.16召开发布会,宣布登录华为手机系统
今天开始就尝试将Android应用搬迁到HarmonyOS上。

预警:本文案根据个,讲述的内容可能会有较大跳跃性。
阅读本文需要Android开发基础
github:https://github.com/yooking-git/harmony.git
个人博客:https://blog.yookingh.cn

布局篇

根据开发文档可知:共有四种常见布局,他们分别是
方向布局:LineraLayout DirectionalLayout
依赖布局:RelativeLayout DependentLayout
堆叠布局:FrameLayout StackLayout
表格布局:TableLayout
中文名是我瞎编的 咳咳...)

DirectionalLayout

  1. ohos:orientation 排列方式
    DirectionalLayout有两种排列方式,和android一样,是由orientation来控制的,分别是横向布局(horizontal)和纵向布局(vertical)

  2. ohos:background_element 背景设置
    背景设置使用element,可以直接写颜色如:

    <DirectionalLayout ohos:background_element="#000000"/>
    

    也可以引用graphic中的布局,如:

    <DirectionalLayout 
        ohos:background_element="$graphic:bg_btn_common"
        />
    

    graphic文件夹的作用和drawable是一样的,例如bg_btn_common.xml就是一个shape:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
           ohos:shape="rectangle">
        <corners ohos:radius="10"/>
        <solid ohos:color="#007CFD"/>
    </shape>
    

    这里有个槽我一定要吐:$graphic:为什么没有代码提示!!!

  3. ohos:alignment 对齐方式
    对齐方式与Android中的gravity用法一致如:ohos:alignment="center"
    其值分别有:lefttoprightbottomhorizontal_centervertical_centercenter
    值得注意的是:DirectionalLayout是中线对齐,LinearLayout是边线对齐,两个词都是我生造的,笑...
    上代码,感受下中线对齐:

    <?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:alignment="top"
        ohos:padding="12vp"
        ohos:background_element="$graphic:bg_common"
        ohos:orientation="horizontal">
    
            <Button
                ohos:id="$+id:btn_main_hello"
                ohos:height="50vp"
                ohos:width="100vp"
                ohos:background_element="$graphic:bg_btn_common"
                ohos:text="你好呀~"
                ohos:text_color="#ffffff"
                ohos:text_size="15fp"
                />
    
            <Button
                ohos:id="$+id:btn_main_harmony"
                ohos:height="30vp"
                ohos:width="100vp"
                ohos:background_element="$graphic:bg_btn_common"
                ohos:text="Harmony"
                ohos:text_color="#ffffff"
                ohos:text_size="15fp"
                ohos:left_margin="10vp"
                />
    
            <Button
                ohos:id="$+id:btn_main_next"
                ohos:height="80vp"
                ohos:width="100vp"
                ohos:background_element="$graphic:bg_btn_common"
                ohos:text="Next"
                ohos:text_color="#ffffff"
                ohos:text_size="15fp"
                ohos:left_margin="10vp"
                />
    </DirectionalLayout>
    

    在Android中,我们的理解应该是,这三个button的顶部都是与父布局相距12vp的(vp我们不妨放后面解chao释xi),但在HarmonyOS中,却有不同,三个button的文本高度是一致的,反而布局边界的顶部是不一致的...看图吧。Android中的效果自行脑补~

    image-20201218142739018.png

与Android相同的是,ohos:alignment在子布局中也有对应的ohos:layout_alignment,在官方文档中特别注明了,如果是horizontal布局,则:ohos:layout_alignment="left|right|horizontal_center"等横向属性均无效,vertical同理

  1. Height&Width
    上一个小标题中发现vp,fp没有介绍呢,赶紧补齐(摘自:官方文档)

    HarmonyOS 重新定义了界面换算单位,使用虚拟像素(virtual pixels, vp)作为一台设备针对应用而言所具有的虚拟尺寸, 是定义应用内参数尺寸的度量单位。虚拟像素是一种可灵活使用和缩放的单位,它与屏幕像素的关系是 1vp 约等于 160dpi 屏幕密度设备上的 1px。在不同密度的设备之间,HarmonyOS 会针对性的转换设备间对应的实际像素值。

    另外,针对文本,HarmonyOS 提供了字体像素(font-size pixels, fp)的单位。

    字体像素大小默认情况下与vp相同,但当用户在设置中修改了字体显示大小,那么字体大小则会在vp的基础上乘以 scale 系数。即默认情况下 1 fp = 1vp,如果设置了字体显示大小 1fp = 1vp * scale。

    可以这样理解:vp是用来替代dp的,fp是用来替代sp的
    好了,扯回本标题:

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        />
    

    width和height大体上还是按照android时写法的,差别是wrap_content在这儿是match_content,其实match_content和match_parent都是match开头,真的很不好区别,wrap_cotent反而能够一眼看出来,何必呢?
    顺便一提:不带单位的话,在Android中是错误的,在这里为px,比如ohos:width="60"等价于ohos:width="60px"

DependentLayout

DependentLayout默认是左上角对齐的,其用法基本上和RelativeLayout一致,只需要注意下:(看注释)

<?xml version="1.0" encoding="utf-8"?>
<!--当我给DependentLayout设置了alignment=center时,整个布局居中了-->
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:padding="10vp"
    ohos:alignment="center"
    >

    <Button
        ohos:id="$+id:btn_next_hello"
        ohos:height="50vp"
        ohos:width="120vp"
        ohos:background_element="$graphic:bg_btn_common"
        ohos:text="你好呀~"
        ohos:text_color="#ffffff"
        ohos:text_size="15fp"
        />

    <!--当我给其中任意一个子控件设置了align_parent_right="true"时,其他控件的左右居中也无效了-->
    <!--当我给子布局设置了below时,该布局将无法再设置align_Parent_top/bottom-->
    <Button
        ohos:below="$id:btn_next_hello"
        ohos:id="$+id:btn_next_harmony"
        ohos:align_parent_right="true"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:background_element="$graphic:bg_btn_common"
        ohos:text="Harmony"
        ohos:text_color="#ffffff"
        ohos:text_size="15fp"
        ohos:top_margin="10vp"
        />

    <Button
        ohos:top_margin="10vp"
        ohos:below="$id:btn_next_harmony"
        ohos:id="$+id:btn_next_finish"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:background_element="$graphic:bg_btn_common"
        ohos:text="Finish"
        ohos:text_color="#ffffff"
        ohos:text_size="15fp"
        />
</DependentLayout>

可知:align_parent_right会覆盖父布局的alignmenthorizontal相关属性(是的,包括left、right),而同样的,below/right_of等属性又优先于align_Parent_相关属性。

StackLayout

StackLayout的子布局的默认位置是左上角。
位置变换:可以用layout_alignmentmargin等属性控制其位置。
层级关系:StackLayout的子布局是逐级覆盖的。

TableLayout

TableLayout中row_count属性——行数:暂时没发现其作用
column_count——列数,是有效的。
alignment_type——对齐方式:

属性值 效果
align_edges 表示子组件边界对齐,默认对齐方式。
align_contents 表示子组件边距对齐。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,002评论 6 509
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,777评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,341评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,085评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,110评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,868评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,528评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,422评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,938评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,067评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,199评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,877评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,540评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,079评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,192评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,514评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,190评论 2 357

推荐阅读更多精彩内容