Shulou(Shulou.com)06/03 Report--

This article introduces the "TableLayout layout method tutorial" related knowledge, in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Introduction to TableLayout

TableLayout means table layout, also known as grid layout, which allows us to arrange components in a tabular way, that is, rows and columns.

TableLayout provides an interface for aligning and arranging components in a table. You can configure the arrangement of tables, the number of rows and columns, and the location of components.

Common attribut

Ohos:alignment_type sets the alignment in the grid layout, defaults to align_contents (for margin alignment), and another parameter is align_edges (for boundary alignment).

Xmlns:ohos= "http://schemas.huawei.com/res/ohos" ohos:id=" $+ id:tableLayout "ohos:height=" match_parent "ohos:width=" match_parent "ohos:alignment_type=" align_contents "ohos:background_element=" # 8AA7AA ">

Ohos:row_count represents the number of rows in the set grid layout, and ohos:column_count represents the number of columns in the set grid layout. If no value is set for the child component, the default number of rows and columns for the parent component is used. If the number of sub-components in a grid layout exceeds the number of columns set, the number of rows will be added automatically. For example, in the following code, we set one row, two columns, but three subcomponents, and we listen for the click event of one of the buttons to display the number of rows in the text component.

Xmlns:ohos= "http://schemas.huawei.com/res/ohos" ohos:id=" $+ id:tableLayout "ohos:height=" match_content "ohos:width=" match_content "ohos:row_count=" 1 "ohos:column_count=" 2 "ohos:background_element=" # 8AA7AA "> ohos:id=" $+ id:tableTxt "ohos:height=" match_content "ohos:width=" match_content "ohos:text=" I am the text component "ohos:text_size=" 20fp "/ > ohos:id=" $+ id:button "ohos:height=" match_content "ohos:width=" match_content "ohos:text=" I am the first button "ohos:background_element=" # 5C6E71 "ohos:text_color=" # FFFFFF "ohos:text_size=" 20fp "/ > ohos:id=" $+ id:btn "ohos:height=" match_content "ohos:width=" match_content "ohos:text=" I am the second button "ohos:background_" Element= "# 5C6E71" ohos:text_color= "# FFFFFF" ohos:text_size= "20fp" / >

The page displays the effect when the button click event is not triggered.

The page displays the effect when the button click event is triggered.

Ohos:orientation means to set the arrangement of components in the table, horizontal (vertical) and vertical (horizontal). If we set behavior 1, column 2, three subcomponents, and set the horizontal display, then our column will be invalidated and a column will be added automatically.

Xmlns:ohos= "http://schemas.huawei.com/res/ohos" ohos:id=" $+ id:tableLayout "ohos:height=" match_parent "ohos:width=" match_parent "ohos:orientation=" horizontal "ohos:background_element=" # 8AA7AA ">

Xmlns:ohos= "http://schemas.huawei.com/res/ohos" ohos:id=" $+ id:tableLayout "ohos:height=" match_parent "ohos:width=" match_parent "ohos:orientation=" vertical "ohos:background_element=" # 8AA7AA ">

Example

Xmlns:ohos= "http://schemas.huawei.com/res/ohos" ohos:id=" $+ id:tableLayout "ohos:height=" match_parent "ohos:width=" match_parent "ohos:row_count=" 3 "ohos:column_count=" 5 "ohos:background_element=" # 8AA7AA "> ohos:height=" match_content "ohos:width=" match_content "ohos:text=" I am the first button "ohos:background_element=" # 07CCFF "ohos:text_ Color= "# FFFFFF" ohos:text_size= "20fp" ohos:padding= "10vp" / >.

This is the end of the "TableLayout layout method tutorial". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.