current position:Home>Tablelayout and FrameLayout of Android layout controls

Tablelayout and FrameLayout of Android layout controls

2022-01-27 03:50:11 Run, chicken wings

This is my participation 8 The fourth of the yuegengwen challenge 18 God , Check out the activity details :8 Yuegengwen challenge

List of articles


brief introduction
Table layout TableLayout yes LinearLayout Subclasses of , Allows us to arrange components in a tabular way , It's the way rows and columns .

Tablelayout Class manages controls in the form of rows and columns , Every action is a TableRow object , Or a View Control .

When it comes to TableRow Object time , Can be found in TableRow Add child controls , By default , Each child control occupies a column .

When it comes to View when , The View Will be exclusive to one line .

The determination of the number of rows and columns
TableLayout The number of rows is directly specified by the developer , That is, how many TableRow object ( or View Control ), Just how many lines .

TableLayout The number of columns is equal to the number of columns with the most child controls TableRow Columns of . As first TableRow contain 2 Child controls , the second TableRow contain 3 individual , Third TableRow contain 4 individual , Then the TableLayout The number of columns in is 4.

TableLayout The settable properties include global properties and cell properties .

1、 Global attributes, that is, column attributes , There are the following 3 Parameters :

android:stretchColumns Set expandable Columns . The column can be extended in the row direction , It can occupy a whole line at most . for example :android:stretchColumns="0" It means the first one 0 Columns can be extended . This field is for Give Way table Automatically fill the screen

android:shrinkColumns Set shrinkable Columns . When the column child control has too much content , It's full of people who are good at it , Then the contents of the child control will be displayed in the column direction . for example android:shrinkColumns="1,2" It means the first one 1、2 All columns can shrink

android:collapseColumns Set the columns to hide . for example android:collapseColumns="*" Indicates that all rows are hidden

explain : Columns can have both stretchColumns And shrinkColumns attribute , If the , So when the contents of this column N a long time , take “ Multiple lines ” Show its contents .( This is not really multiline , Instead, the system automatically adjusts the value of the line as needed layout_height)

2、 Cell properties , There are the following 2 Parameters :

android:layout_column Specifies the column in which the cell is displayed , for example android:layout_column="1" Indicates that the control is displayed on the 1 Column

android:layout_span Specifies the number of columns the cell occupies ( Unspecified time , by 1), for example :android:layout_span="2" Indicates that the control occupies 2 Column

explain : A control can also have these two features at the same time .

Table layout exercise

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="3dip">

    <!--  The first 1 individual TableLayout, Used to describe column attributes in a table . The first 0 Columns can be extended , The first 1 Column shrinkable  , The first 2 Columns are hidden -->
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#7f00ffff" android:text=" surface 1: Global settings : Column property settings " android:textSize="15sp" />

    <TableLayout android:id="@+id/table1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:collapseColumns="2" android:padding="3dip" android:shrinkColumns="1" android:stretchColumns="0">


            <Button android:text=" This column can be extended 12345678901234567890" />

            <Button android:text=" This column shrinks 12345678901234567890" />

            <Button android:text=" I was hidden " />


            <TextView android:text=" I stretch in the direction of the line , I can be very long  " />

            <TextView android:text=" I shrink in the direction of the column , I can be very deep " />


    <!--  The first 2 individual TableLayout, Used to describe the properties of cells in the table , Include :android:layout_column  And  android:layout_span-->
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#7f00ffff" android:text=" surface 2: Cell settings : Specify cell property settings " android:textSize="15sp" />

    <TableLayout android:id="@+id/table2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="3dip">


            <Button android:text=" The first 0 Column " />

            <Button android:text=" The first 1 Column " />

            <Button android:text=" The first 2 Column " />


            <TextView android:layout_column="2" android:text=" I was appointed in the 2 Column " />


            <TextView android:layout_column="1" android:layout_span="2" android:text=" I cross 1 To 2 Column , Don't believe it. !" />


    <!--  The first 3 individual TableLayout, Use stretchable properties -->

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#7f00ffff" android:text=" surface 3: Uniform layout " android:textSize="15sp" />

    <TableLayout android:id="@+id/table3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="6dip" android:stretchColumns="*">


            <Button android:layout_width="1dip" android:text=" One " />

            <Button android:layout_width="1dip" android:text=" Two words " />

            <Button android:layout_width="1dip" android:text=" Three words " />

            <Button android:layout_width="1dip" android:text=" Four words " />

            <Button android:id="@+id/button" style="?android:attr/buttonStyleSmall" android:layout_width="1dip" android:layout_height="wrap_content" android:text="New Button" />

 Copy code 

Run the program :
 Insert picture description here

Reference resources
android:TableLayout Table layout details


brief introduction
Frame layout FrameLayout It can be said to be the simplest of the six layouts , This layout creates a blank area directly on the screen , When we add controls to it , By default, they will be placed in the upper left corner of this area , But this kind of layout does not have any positioning way , So it doesn't have many application scenarios .

The size of the frame layout is determined by the largest child control in the control , If the size of the control is the same , Then you can only see the top component at the same time . Subsequent controls will overwrite the previous one . Although the control will be placed in the upper left corner by default , But we can also go through layout_gravity attribute , Assign to another location .
It is generally used to realize cascading layout

android:foreground Set the foreground image of the reformatted layout container
android:foregroundGravity Set the position of the foreground image display

The foreground image is always at the top of the frame layout , Face the user's image directly , It's a picture that won't be covered .

Frame layout exercise


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="@mipmap/heart" android:foregroundGravity="right|bottom">

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button1" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="button2" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:text="button3" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="button4" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="button5" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:text="button6" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="button7" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|bottom" android:layout_marginBottom="50dp" android:text="button8" />

 Copy code 

Run the program :
 Insert picture description here

copyright notice
author[Run, chicken wings],Please bring the original link to reprint, thank you.

Random recommended