色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

HarmonyOS應用開發之Java UI框架

jf_Vqngj70R ? 來源:美男子玩編程 ? 作者:美男子玩編程 ? 2023-08-09 14:02 ? 次閱讀

TableLayout使用表格的方式劃分子組件。

f3555d2e-3669-11ee-9e74-dac502259ad0.png

TableLayout的共有XML屬性繼承自:Component。

TableLayout的自有XML屬性見下表:

屬性名稱 中文描述 取值 取值說明 使用案例
alignment_type 對齊方式 align_edges 表示TableLayout內的組件按邊界對齊。 ohos:alignment_type="align_edges"
align_contents 表示TableLayout內的組件按邊距對齊。 ohos:alignment_type="align_contents"
column_count 列數 integer類型 可以直接設置整型數值,也可以引用integer資源。 ohos:column_count="3"
ohos:column_count="$integer:count"
row_count 行數 integer類型 可以直接設置整型數值,也可以引用integer資源。 ohos:row_count="2"
ohos:row_count="$integer:count"
orientation 排列方向 horizontal 表示水平方向布局。 ohos:orientation="horizontal"
vertical 表示垂直方向布局。 ohos:orientation="vertical"

在XML中創建TableLayout,示例代碼如下:

在graphic文件夾下創建Text的背景table_text_bg_element.xml,示例代碼如下:


    ohos:radius="5vp"/>
    

在TableLayout布局中添加子組件。

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
    ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>


    

TableLayout默認一列多行。

f3715d12-3669-11ee-9e74-dac502259ad0.png

設置行列數:

...
    ohos:row_count="2"
    ohos:column_count="2">

設置TableLayout的行為2,列為2效果。

f387031a-3669-11ee-9e74-dac502259ad0.png

在XML中設置布局排列方向,以“vertical”為例:

...
    ohos:orientation="vertical">
    ...

設置布局排列方向為“vertical”的效果。

f3a872b6-3669-11ee-9e74-dac502259ad0.png

TableLayout提供兩種對齊方式,邊距對齊“align_contents”、邊界對齊“align_edges”,默認為邊距對齊“align_contents”。代碼如下:

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_contents"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp">


    ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>


    

邊距對齊效果:

f3bdfd52-3669-11ee-9e74-dac502259ad0.png

將TableLayout的對齊方式修改為邊界對齊。

...
ohos:alignment_type="align_edges">
    ...

邊界對齊效果:

f3cf6dbc-3669-11ee-9e74-dac502259ad0.png

引用graphic文件夾下的背景資源文件為layout_borderline.xml,示例代碼如下:

TableLayout合并單元格的效果可以通過設置子組件的行列屬性來實現。

設置子組件的行列屬性均為2的效果展示:

f3e010d6-3669-11ee-9e74-dac502259ad0.png

在XML中創建TableLayout,并添加子組件,代碼如下:

xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_edges"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp"
    ohos:row_count="3">


    ohos:id="$+id:text_one"
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>


    

Java代碼中設置子組件的行列屬性,代碼如下:

@Override
    protected void onStart(Intent intent) {
        ...
        Component component = findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        component.setLayoutConfig(tlc);
    }


    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }

在設置子組件的行列屬性時,TableLayout剩余的行數和列數必須大于等于該子組件所設置的行數和列數。

目前僅支持Java代碼設置TableLayout子組件的行列屬性。

在創建子組件的行列屬性時,還可設置子組件的對齊方式,修改上述Java代碼如下:

@Override
    protected void onStart(Intent intent) {
        ...
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        ...
    }

子組件的對齊方式設置為ALIGNMENT_FILL的效果:

f3fe30fc-3669-11ee-9e74-dac502259ad0.png

設置子組件的權重,代碼如下:

@Override
    protected void onStart(Intent intent) {
        ...
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);


        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);
    }

上述代碼將子組件的寬度權重設置為1.0,每行子組件會均分TableLayout的寬度,所以需要設置TableLayout為固定寬度或match_parent。

ohos:width="match_parent"
    ...>


    ohos:id="$+id:text_one"
        .../>


    

將子組件的寬度權重設置為1.0的效果展示:

f4144324-3669-11ee-9e74-dac502259ad0.png

審核編輯:湯梓紅

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • JAVA
    +關注

    關注

    19

    文章

    2966

    瀏覽量

    104704
  • XML
    XML
    +關注

    關注

    0

    文章

    188

    瀏覽量

    33078
  • 框架
    +關注

    關注

    0

    文章

    403

    瀏覽量

    17477
  • HarmonyOS
    +關注

    關注

    79

    文章

    1974

    瀏覽量

    30147

原文標題:HarmonyOS學習路之開發篇—Java UI框架(Table Layout)

文章出處:【微信號:美男子玩編程,微信公眾號:美男子玩編程】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦

    HarmonyOS】應用開發文檔

    .com/cn/docs/documentation/doc-guides/start-first-page-0000000000038014Java UI框架添加到相關API參考的鏈接,方便
    發表于 10-14 18:04

    HarmonyOS HiSpark AI Camera試用連載 】鴻蒙JS UI介紹

    的FA應用,這里的FA應用特指JS FA應用。使用Java開發FA應用請參考Java UI框架。Framework前端
    發表于 01-11 20:10

    請教鴻蒙應用開發JAVA UI 框架ProgressBar或者RoundProgressBar怎么實現滑動調節

    如題https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java
    發表于 01-12 15:23

    基于HarmonyOS Java UI使用元數據綁定框架實現UI和數據源的綁定

    1. 介紹元數據綁定框架是基于HarmonyOS SDK開發的一套提供UI和數據源綁定能力的框架。通過使用元數據綁定
    發表于 08-18 10:23

    基于HarmonyOS Java UI,使用元數據綁定框架,實現UI和數據源的綁定

    1. 介紹元數據綁定框架是基于HarmonyOS SDK開發的一套提供UI和數據源綁定能力的框架。通過使用元數據綁定
    發表于 09-01 14:54

    鴻蒙應用開發的JS UI框架如何實現高德地圖的訪問?

    鴻蒙應用,現在分為Java UI框架和Ark UI框架,其中JS UI
    發表于 04-28 11:44

    HarmonyOS自動化測試框架—Hypium

    的API提供查找和操作界面控件的能力,支持開發基于界面操作的自動化測試腳本。下面為大家一一介紹Hypium的單元測試框架UI測試框架。二、單元測試
    發表于 08-10 17:13

    4天帶你上手HarmonyOS ArkUI開發——《HarmonyOS ArkUI入門訓練營健康生活實戰》

    框架實現。ArkUI采用極簡的聲明式UI描述界面語法,只需用幾行簡單直觀的聲明式代碼,即可完成界面功能,內置了豐富而精美HarmonyOS Design的UI組件和API,可滿足大部分
    發表于 01-05 11:49

    HarmonyOS版本下如何基于JS UI框架開發

    作者:zhenyu ,華為軟件開發工程師 在當前HarmonyOS版本下,如何基于JS UI框架開發呢? 1JS
    的頭像 發表于 07-13 09:24 ?2166次閱讀

    華為開發HarmonyOS零基礎入門:HarmonyOS UI編程框架快速上手

    華為開發HarmonyOS零基礎入門:從零開始HarmonyOS UI編程框架快速上手,用于幫助開發
    的頭像 發表于 10-23 09:50 ?1867次閱讀
    華為<b class='flag-5'>開發</b>者<b class='flag-5'>HarmonyOS</b>零基礎入門:<b class='flag-5'>HarmonyOS</b> <b class='flag-5'>UI</b>編程<b class='flag-5'>框架</b>快速上手

    華為開發HarmonyOS零基礎入門:UI組件設計開發實踐

    華為開發HarmonyOS零基礎入門:UI組件設計開發實踐圖庫應用介紹,應用數據加載顯示模型圖片加載渲染功能快速在其他應用上。
    的頭像 發表于 10-23 10:58 ?1669次閱讀
    華為<b class='flag-5'>開發</b>者<b class='flag-5'>HarmonyOS</b>零基礎入門:<b class='flag-5'>UI</b>組件設計<b class='flag-5'>開發</b>實踐

    零基礎入門HarmonyOS-UI編程框架

    HDC 2021華為開發者分論壇零基礎入門HarmonyOS-UI編程框架
    的頭像 發表于 10-23 13:09 ?1770次閱讀
    零基礎入門<b class='flag-5'>HarmonyOS-UI</b>編程<b class='flag-5'>框架</b>

    HarmonyOS測試技術與實戰-分布式UI測試框架

    HDC 2021華為開發者大會 HarmonyOS測試技術與實戰-分布式UI測試框架演示
    的頭像 發表于 10-23 14:49 ?1378次閱讀
    <b class='flag-5'>HarmonyOS</b>測試技術與實戰-分布式<b class='flag-5'>UI</b>測試<b class='flag-5'>框架</b>

    全面解讀HarmonyOS新一代UI框架

    開發工具DevEco Studio3.0,以及基于TS/JS語言的API 7,全面提升開發者體驗。 本期,我們要為大家重點介紹HarmonyOS新一代聲明式UI
    的頭像 發表于 10-29 10:21 ?2698次閱讀
    全面解讀<b class='flag-5'>HarmonyOS</b>新一代<b class='flag-5'>UI</b><b class='flag-5'>框架</b>

    方舟開發框架(Ark UI)概述及開發實戰

    本期要為大家介紹的是ArkUI入門課程——HarmonyOS技術訓練營第四期《方舟開發框架(Ark UI)概述及開發實戰》。相信學習完這個課
    的頭像 發表于 12-17 14:49 ?8229次閱讀
    主站蜘蛛池模板: 国产三级在线免费观看| 浴室里强摁做开腿呻吟的漫画| 嗯好舒服嗯好大好猛好爽| 精品无码无人网站免费视频| 国产精品一区二区在线观看| 高冷师尊被CAO成SAO货| 波多野结衣 熟女| free俄罗斯性xxxxhd派对| 最近免费中文字幕MV在线视频3| 一个人在线观看视频| 一个人免费播放高清在线观看| 亚洲精品无码成人AAA片| 亚州综人网| 亚洲精品电影久久久影院| 亚洲国产综合久久精品| 亚洲精品成人a| 亚洲在线视频自拍精品| 伊人热人久久中文字幕| 1000部做羞羞事禁片免费视频网站| 夜夜骑夜夜欢| 3d在线看小舞被躁视频| 97国产蝌蚪视频在线观看| av天堂网站avtt2017| 草莓视频在线免费观看 | 美女乱草鲍高清照片| 美女逼逼毛茸茸| 嫩草影院久久国产精品| 泡妞高手在都市免费观看 | 国产在线亚洲精品观看不卡| 极品虎白在线观看| 久久午夜夜伦痒痒想咳嗽P| 美女裸露100%奶头视频| 日本一本免费线观看视频| 污漫日本E同人| 一二三四免费中文在线1| 18videosex性欧美黑色| RAPPER性骚扰大开黄腔| 国产精品免费视频能看| 久久国产精品福利影集| 女人被躁到高潮嗷嗷叫免费| 色婷婷狠狠97成为人免费|