前言

HarmonyOS 于2020.12.16召開發(fā)布會(huì)，宣布登錄華為手機(jī)系統(tǒng)
今天開始就嘗試將Android應(yīng)用搬遷到HarmonyOS上。

預(yù)警：本文案根據(jù)個(gè)_想人_到開_哪發(fā)_寫習(xí)_到慣_哪，講述的內(nèi)容可能會(huì)有較大跳躍性。
閱讀本文需要Android開發(fā)基礎(chǔ)
github：https://github.com/yooking-git/harmony.git
個(gè)人博客：https://blog.yookingh.cn

布局篇

根據(jù)開發(fā)文檔可知：共有四種常見布局，他們分別是
方向布局：LineraLayout DirectionalLayout
依賴布局：RelativeLayout DependentLayout
堆疊布局：FrameLayout StackLayout
表格布局：TableLayout
（中文名是我瞎編的 咳咳...）

DirectionalLayout

1. ohos:orientation 排列方式
   DirectionalLayout有兩種排列方式，和android一樣，是由orientation來控制的，分別是橫向布局(horizontal)和縱向布局(vertical)

2. ohos:background_element 背景設(shè)置
   背景設(shè)置使用element，可以直接寫顏色如：

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

   也可以引用graphic中的布局，如：

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

   graphic文件夾的作用和drawable是一樣的，例如bg_btn_common.xml就是一個(gè)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>
   

   這里有個(gè)槽我一定要吐：$graphic:為什么沒有代碼提示?。?！

3. ohos:alignment 對(duì)齊方式
   對(duì)齊方式與Android中的gravity用法一致如：ohos:alignment="center"
   其值分別有：left、top、right、bottom、horizontal_center、vertical_center、center
   值得注意的是：DirectionalLayout是中線對(duì)齊，LinearLayout是邊線對(duì)齊，兩個(gè)詞都是我生造的，笑...
   上代碼，感受下中線對(duì)齊：

   <?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中，我們的理解應(yīng)該是，這三個(gè)button的頂部都是與父布局相距12vp的（vp我們不妨放后面解chao釋xi），但在HarmonyOS中，卻有不同，三個(gè)button的文本高度是一致的，反而布局邊界的頂部是不一致的...看圖吧。_{Android中的效果自行腦補(bǔ)~}

   image-20201218142739018.png

與Android相同的是，ohos:alignment在子布局中也有對(duì)應(yīng)的ohos:layout_alignment，在官方文檔中特別注明了，如果是horizontal布局，則：ohos:layout_alignment="left|right|horizontal_center"等橫向?qū)傩跃鶡o效，vertical同理

4. Height&Width
   上一個(gè)小標(biāo)題中發(fā)現(xiàn)vp，fp沒有介紹呢，趕緊補(bǔ)齊(摘自：官方文檔)

   HarmonyOS 重新定義了界面換算單位，使用虛擬像素（virtual pixels, vp）作為一臺(tái)設(shè)備針對(duì)應(yīng)用而言所具有的虛擬尺寸， 是定義應(yīng)用內(nèi)參數(shù)尺寸的度量單位。虛擬像素是一種可靈活使用和縮放的單位，它與屏幕像素的關(guān)系是 1vp 約等于 160dpi 屏幕密度設(shè)備上的 1px。在不同密度的設(shè)備之間，HarmonyOS 會(huì)針對(duì)性的轉(zhuǎn)換設(shè)備間對(duì)應(yīng)的實(shí)際像素值。

   另外，針對(duì)文本，HarmonyOS 提供了字體像素（font-size pixels, fp）的單位。

   字體像素大小默認(rèn)情況下與vp相同，但當(dāng)用戶在設(shè)置中修改了字體顯示大小，那么字體大小則會(huì)在vp的基礎(chǔ)上乘以 scale 系數(shù)。即默認(rèn)情況下 1 fp = 1vp，如果設(shè)置了字體顯示大小 1fp = 1vp * scale。

   可以這樣理解：vp是用來替代dp的，fp是用來替代sp的
   好了，扯回本標(biāo)題：

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

   width和height大體上還是按照android時(shí)寫法的，差別是wrap_content在這兒是match_content，其實(shí)match_content和match_parent都是match開頭，真的很不好區(qū)別，wrap_cotent反而能夠一眼看出來，何必呢？
   順便一提：不帶單位的話，在Android中是錯(cuò)誤的，在這里為px，比如ohos:width="60"等價(jià)于ohos:width="60px"

DependentLayout

DependentLayout默認(rèn)是左上角對(duì)齊的，其用法基本上和RelativeLayout一致，只需要注意下：（看注釋）

<?xml version="1.0" encoding="utf-8"?>
<!--當(dāng)我給DependentLayout設(shè)置了alignment=center時(shí)，整個(gè)布局居中了-->
<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"
        />

    <!--當(dāng)我給其中任意一個(gè)子控件設(shè)置了align_parent_right="true"時(shí)，其他控件的左右居中也無效了-->
    <!--當(dāng)我給子布局設(shè)置了below時(shí)，該布局將無法再設(shè)置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會(huì)覆蓋父布局的alignment的horizontal相關(guān)屬性（是的，包括left、right），而同樣的，below/right_of等屬性又優(yōu)先于align_Parent_相關(guān)屬性。

StackLayout

StackLayout的子布局的默認(rèn)位置是左上角。
位置變換：可以用layout_alignment和margin等屬性控制其位置。
層級(jí)關(guān)系：StackLayout的子布局是逐級(jí)覆蓋的。

TableLayout

TableLayout中row_count屬性——行數(shù)：暫時(shí)沒發(fā)現(xiàn)其作用
column_count——列數(shù)，是有效的。
alignment_type——對(duì)齊方式：