Android Notes | Breaking down the “Top 10 Layouts” stuff

Recent mood, recent state, seems impossible to say one, two, three, four, five.

Do Android for several years, from pure Android, to now a mixed bag, this flavor, is really mixed feelings.

The content type of the article has always been Notes, so let’s take a look at the old line.

Hard ah, what if accidentally excellent? In case you accidentally end up side by side with the chicken boss

Review the Android Layout

Once, whether in an interview or in a small talk, when talking about Android layout, I always speak out the five layout without thinking. And now at the end of 2020, is it still the same big five layout?

Here’s a brief summary, sorted by frequency of personal use:

• ConstraintLayout: ConstraintLayout
• LinearLayout: a LinearLayout
• RelativeLayout: Relative positioning layout
• FrameLayout: FrameLayout
• CoordinatorLayout: Coordinates the layout
• Percentlayout: PercentRelativeLayout, PercentFrameLayout
• GridLayout: GridLayout
• TableLayout: TableLayout
• AbsoluteLayout (deprecated) : Absolute positioning layout
• BlinkLayout (private class) : BlinkLayout flash

Here I say how to find these layouts, convenient and I as small white draw inferences.

To quote Flutter, everything is Weight. In Android, intuitively speaking, all you can see are views, and views also have different functions, such as TextView, ImageView and other basic commonly used views, only to display or indirectly respond to user operations. The ViewGroup derived from the View is wrapped around various views and finally presents a unique effect. For example, LinearLayout adds horizontal/vertical arrangement to the original ViewGroup, and RelativeLayout adds arrangement based on a control to the original ViewGroup. Search for the direct and indirect subclasses of ViewGroup in Android API Reference, as shown below:

The corresponding link has been attached at the end of the article, welcome you to give advice ~

Five stars I think it is necessary to master, the comparison of actual combat appeared high rate of review. One star simple understanding of the interview and the interviewer blow the water ~

Space is limited, not an example ~

Anyway, knowing is definitely better than knowing nothing

The article borrows the picture, the article ends with the attached address link ~

A, ConstraintLayout ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️

• ConstraintLayout Arranges the layout of child views with various constraints.

The cool thing about this thing is that it supports visual tools, and it’s very easy to operate. In the following examples, you will experience more or less a wave of ~

Usage:

• Add Maven repository

repositories {
    google()
}
Copy the code

• Add the ConstraintLayout dependency

Dependencies {implementation "androidx constraintlayout: constraintlayout: 2.0.4"}Copy the code

Of course, if you update Android Studio to the latest version, the default layout is ConstraintLayout, so check it out in build. I also forget which version set the default root layout.

Of course, Android Studio also offers one-click conversion of the root layout, as shown below:

1. Locate layout_constraintXXX

Relative positioning is one of the basic building blocks for creating a layout in ConstraintLayout. These constraints allow a View to be positioned based on a View, and we can also constrain views in both horizontal and vertical directions:

• Horizontal axis: left, right, start and end
• Vertical axis: top, bottom and text baseline

Button B is positioned to the right of button A as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/buttonA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" /> <Button android:id="@+id/buttonB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" app:layout_constraintStart_toEndOf="@+id/buttonA" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

To better understand the following properties, borrow the official graph below:

attribute	role
layout_constraintLeft_toLeftOf	The left side of the current View marks the left side of the target View
layout_constraintLeft_toRightOf	The left side of the current View marks the right side of the target View
layout_constraintRight_toLeftOf	The right side of the current View marks the left side of the target View
layout_constraintRight_toRightOf	The right side of the current View marks the right side of the target View
layout_constraintTop_toTopOf	The top of the current View aligns the top of the target View
layout_constraintTop_toBottomOf	The top of the current View marks the bottom of the target View
layout_constraintBottom_toTopOf	The bottom of the current View marks the top of the target View
layout_constraintBottom_toBottomOf	The bottom of the current View marks the bottom of the target View
layout_constraintBaseline_toBaselineOf	The current View is aligned with the target View text baseline
layout_constraintStart_toEndOf	The current View start points to the target View end point
layout_constraintStart_toStartOf	The current View starting point is the target View starting point
layout_constraintEnd_toStartOf	The end of the current View is the start of the target View
layout_constraintEnd_toEndOf	The current View endpoint is the target View endpoint

2. The margin Margins

attribute	role
android:layout_marginStart	Distance between the current View and the left side of the target View
android:layout_marginEnd	Distance between the current View and the target View on the right
android:layout_marginLeft	Distance between the current View and the left side of the target View
android:layout_marginTop	Distance between current View and top of target View
android:layout_marginRight	Distance between the current View and the target View on the right
android:layout_marginBottom	Distance between the current View and the bottom of the target View

3. When the target View is hidden, the current View margin is Margins

When the visibility of the target View is view.gone, you can also use the following properties to set the margin of the current View in the case of view.gone.

attribute	role
layout_goneMarginStart	Distance between the current View and the left when the target View is hidden
layout_goneMarginEnd	Distance between the current View and the right when the target View is hidden
layout_goneMarginLeft	Distance between the current View and the left when the target View is hidden
layout_goneMarginTop	Distance between current View and top when target View is hidden
layout_goneMarginRight	Distance between the current View and the right when the target View is hidden
layout_goneMarginBottom	Distance between current View and bottom when target View is hidden

The following effects:

By default, the Margin of buttons A and B is 50dp. When button A is hidden, the Margin between button B and button A is 30DP:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="50dp" android:text="A" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="50dp" android:text="B" app:layout_constraintStart_toEndOf="@+id/button" app:layout_constraintTop_toTopOf="parent" app:layout_goneMarginStart="30dp" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

4. Center positioning and proportion bias

Most of the time, we want the effect to be centered, and in some cases we also need to set the proportion, such as the width percentage.

The code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:layout_width="180dp" android:layout_height="180dp" android:scaleType="fitXY" android:src="@drawable/img" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" App: layout_constraintHorizontal_bias = "0.19" app: layout_constraintStart_toStartOf = "parent" App: layout_constraintTop_toTopOf = "parent" app: layout_constraintVertical_bias = "0.16000003" / > </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

To recap the key points of the current example:

attribute	role
layout_constraintStart_toStartOf	If the value is parent, it is aligned with the parent container
layout_constraintEnd_toEndOf
layout_constraintTop_toTopOf
layout_constraintBottom_toBottomOf

Here’s how each combination works:

• The combination of start and end is horizontally centered
• The combination of top and bottom means vertical center
• The combination of start, end, top and bottom is horizontal/vertical center

attribute	role
layout_constraintVertical_bias	Vertical ratio
layout_constraintHorizontal_bias	Proportion of horizontal mode

5. Circular positioning

Here, for convenience, I’ll take a screenshot directly:

Let’s do the following:

The code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button Android :id="@+id/buttonA" Android :layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" I am the center" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/buttonB" app:layout_constraintCircle="@id/buttonA" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintCircleAngle="45" app:layout_constraintCircleRadius="100dp" Android: text = "I am a flower" / > < / androidx. Constraintlayout. Widget. Constraintlayout >Copy the code

attribute	role
layout_constraintCircle	Specify the center View ID
layout_constraintCircleAngle	Set the current View Angle
layout_constraintCircleRadius	Set the radius

6. Size limitation

You can also define a minimum and maximum size for ConstraintLayout itself:

attribute	role
android:minWidth	Sets the minimum width of the layout
android:minHeight	Sets the minimum height of the layout
android:maxWidth	Sets the maximum width of the layout
android:maxHeight	Sets the maximum height of the layout

When ConstraintLayout internal child View width/height is 0dp, it is equal to match_parent.

7. Size percentage

I actually like this one. It’s like a percentage layout. It’s cool.

Note when using this:

• When setting the width/height percentage, set the width/height to 0DP.
• The default value should be set to percent app:layout_constraintWidth_default=”percent” or app:layout_constraintHeight_default=”percent”; (This feeling is not useful, do not believe you see below)
• The layout_constraintWidth_percent or layout_constraintHeight_percent attribute is set to a value between 0 and 1;

Let’s do the following:

The width and height ratio of the first View is 0.3:0.2, and the width ratio of the second View is 1:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button Android :id="@+id/buttonA" Android :layout_width="0dp" Android :layout_height="0dp" Android :layout_height="0dp" Android :text=" I am center" App: layout_constraintEnd_toEndOf = "parent" app: layout_constraintHeight_percent = "0.2" App: layout_constraintWidth_percent = "0.3" app: layout_constraintStart_toStartOf = "parent" / > < Button Android :id="@+id/buttonB" Android :layout_width="0dp" Android :layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" App: layout_constraintTop_toTopOf = "parent" app: layout_constraintVertical_bias = "0.32" app:layout_constraintWidth_percent="1" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

attribute	role
layout_constraintHeight_percent	High proportion
layout_constraintWidth_percent	The width of

As a true programmer, can save things absolutely save things, the width and height of the above have to write twice, can you do it once?

Implement an aspect ratio of 16:9:

<Button android:id="@+id/buttonA" Android :layout_width="0dp" Android :layout_height="0dp" Android :text=" I am the center" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />Copy the code

The effect is as follows:

8. The chain

This effect is also pretty good, some similar to the front end of Flex, feel good.

When the attribute layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle is set on the first element of the chain, The behavior of the chain changes based on the style specified (default: CHAIN_SPREAD).

The demo diagram is as follows:

The code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="130dp"> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" App: layout_constraintEnd_toStartOf = "@ + id/button3" app: layout_constraintHorizontal_bias = "0.5" app:layout_constraintStart_toEndOf="@+id/button1" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="C" App: layout_constraintEnd_toEndOf = "parent" app: layout_constraintHorizontal_bias = "0.5" app:layout_constraintStart_toEndOf="@+id/button2" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" App: layout_constraintEnd_toStartOf = "@ + id/button2" app: layout_constraintHorizontal_bias = "0.5" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

9. Guideline

Officially, this is the ConstraintLayout helper, which defaults to view.gone.

There are two main ways of use:

• Percentage location: layout_constraintGuide_percent
• Absolute positioning: layout_constraintGuide_begin/layout_constraintGuide_end

Finally, we can set the display mode of the current guide through orientation, horizontal/vertical.

I personally prefer the percentage method, but here’s the effect:

How do you make sure your images are 15 percent of the screen height on each model? Passing the auxiliary line to score a hundred minutes.

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="0dp" android:layout_height="0dp" android:scaleType="fitXY" android:src="@drawable/img" app:layout_constraintDimensionRatio="16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/guideline4" /> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline4" android:layout_width="wrap_content" android:layout_height="wrap_content" The android: orientation = "horizontal" app: layout_constraintGuide_percent = "0.15" / > </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

And absolute positioning is a little bit easier to understand. Here directly record the effect picture, everyone pay attention to the code and effect change after clicking Icon:

Learn about the performance benefits of constrained layouts

The link is attached at the end of the article, and only the parts of personal interest are selected here.

Use Google Translation to learn, with their own understanding, such as mistakes, welcome to correct ~

In view of the advantages of traditional layout and constrained layout, the following effects are taken as an example to make a simple comparison:

Traditional layout drawing hierarchy:

<RelativeLayout>
  <ImageView />
  <ImageView />
  <RelativeLayout>
    <TextView />
    <LinearLayout>
      <TextView />
      <RelativeLayout>
        <EditText />
      </RelativeLayout>
    </LinearLayout>
    <LinearLayout>
      <TextView />
      <RelativeLayout>
        <EditText />
      </RelativeLayout>
    </LinearLayout>
    <TextView />
  </RelativeLayout>
  <LinearLayout >
    <Button />
    <Button />
  </LinearLayout>
</RelativeLayout>
Copy the code

Constraint layout drawing hierarchy:

<android.support.constraint.ConstraintLayout>
  <ImageView />
  <ImageView />
  <TextView />
  <EditText />
  <TextView />
  <TextView />
  <EditText />
  <Button />
  <Button />
  <TextView />
</android.support.constraint.ConstraintLayout>
Copy the code

Intuitively, compared with the two schemes, the constrained layout has a greater advantage. At least draw a few fewer viewgroups than traditional RelativeLayout.

From the official blog post, it can be seen that the Android view drawing process includes the following three stages:

• Measure

  • The system traverses the View tree from the top down to determine the size of each ViewGroup and View element. And when you measure a ViewGroup, you’re also going to measure a subset of its views.

• Layout (Layout)

  • Traversal from top to bottom to determine the position of the child View by the size determined during the measurement phase.

• Draw

  • A top-down traversal performed by the system. For each object in the view tree, a Canvas object is created and the drawing command is sent to the GPU. These commands include ViewGroup and View size and position, which the system determined in the first two phases.

Therefore, we can derive the concept that the deeper the level of drawing, the more expensive it is. Conversely, the consumption is low and the performance is higher.

Measurement result: ConstraintLayout faster.

ConstraintLayout performs about 40% better than RelativeLayout in the measurement/layout phase:

Second, the LinearLayout ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️

• A LinearLayout is a container of layouts arranged horizontally/vertically within rows.

Common attributes:

attribute	role
android:orientation	Horizontal /vertical: The default value is horizontal
android:gravity	Inline View alignment
android:weightSum	Maximum intra-line weight that can be set
android:layout_weight	Current View weight
android:baselineAligned	Does the parent container layout align with the child View baseline
android:baselineAlignedChildIndex	Specifies the baseline-aligned child View

For a simple effect:

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:baselineAligned="true" android:measureWithLargestChild="true" android:padding="15dp" android:weightSum="1" tools:context=".MainActivity"> < Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "0.5" <Button android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :layout_weight="0.5" Android :text=" OK "/> </LinearLayout>Copy the code

Third, the RelativeLayout ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️

• RelativeLayout is a view group that displays child views in relative positions.

Common attributes:

attribute	role
android:layout_alignParentTop	The top edge of the current View is aligned with the top edge of the parent container
android:layout_alignParentEnd	Align the top edge of the current View with the right edge of the parent container
android:layout_alignParentBottom	The top edge of the current View is aligned with the bottom edge of the parent container
android:layout_alignParentStart	The upper edge of the current View is aligned with the left edge of the parent container
android:layout_centerHorizontal	The current View is horizontally centered based on the parent container
android:layout_centerVertical	The current View is centered vertically based on the parent container
android:layout_centerInParent	The current View is centered horizontally and vertically based on the parent container
android:layout_alignTop	The current View is at the top of the target View
android:layout_toEndOf	The current View is to the right of the target View
android:layout_below	The current View is at the bottom of the target View
android:layout_toStartOf	The current View is to the left of the target View

Set out to achieve the following:

<? The XML version = "1.0" encoding = "utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="130dp" android:padding="15dp"> <ImageView android:id="@+id/ivAvatar" android:layout_width="100dp"  android:layout_height="100dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_alignParentBottom="true" android:scaleType="fitXY" android:src="@drawable/img" /> <TextView android:id="@+id/tvNickname" android:layout_width="wrap_content" android:layout_height="wrap_content" Android :layout_marginStart="12dp" Android :layout_toEndOf="@id/ivAvatar" Android :text=" HLQ_Struggle" /> <TextView android:id="@+id/tvLevel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNickname" android:layout_marginStart="12dp" Android :layout_marginTop="15dp" Android :layout_toEndOf="@id/ivAvatar" Android :text=" V1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvLevel" android:layout_alignParentBottom="true" android:layout_marginStart="12dp" Android :layout_marginTop="15dp" Android :layout_toEndOf="@id/ivAvatar" Android :text=" Gender: male "/> </RelativeLayout>Copy the code

Fourth, the FrameLayout ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️

• FrameLayout stacks the controls in the upper-left corner of the screen by default. The child View sets its display position via Android :layout_gravity.

Some of the more important attributes are:

• Android :layout_gravity: subview alignment
• Foreground: Foreground
• Android: foregroundGravity: picture position

Let’s start with the following effect:

<? The XML version = "1.0" encoding = "utf-8"? > <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:foreground="@android:drawable/btn_star" android:foregroundGravity="right|bottom" android:padding="30dp"> <TextView android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :text="< home "/> <TextView Android: Layout_width ="wrap_content" Android :layout_height="wrap_content" Android :layout_gravity="right" Android :text=" more "/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" Android :text=" home "/> </FrameLayout>Copy the code

Fifth, GridLayout ⭐ ️

• GridLayout is a View group that displays child View elements as a grid.

Let’s start with the key attributes:

• Android: columnCount: the number of columns
• Android: rowCount: number of rows

GridLayout child View property:

• Android :layout_column: the first column of the current View
• Android :layout_columnSpan: indicates the number of columns occupied by the View
• Android :layout_row: what line does the current View start from
• Android :layout_rowSpan: number of rows occupied by the current View
• Android :layout_gravity: alignment

A typical example is a calculator:

The code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:columnCount="4" android:rowCount="6"> <TextView android:layout_columnSpan="4" android:layout_gravity="fill" android:layout_margin="6dp" android:background="#f5f5f5" android:text="0" android:textSize="50sp" /> <Button android:layout_columnSpan="2" android:layout_gravity="fill" <Button android:layout_columnSpan="2" Android :layout_gravity="fill" Android :text=" empty "/> <Button android:layout_gravity=" 2" Android :layout_gravity="fill" Android :text=" empty" /> <Button android:text="+" /> <Button android:text="1" /> <Button android:text="2" /> <Button android:text="3" /> <Button android:text="-" /> <Button android:text="4" /> <Button android:text="5" /> <Button android:text="6" /> <Button android:text="*" /> <Button android:text="7" /> <Button android:text="8" /> <Button android:text="9" /> <Button android:text="/" /> <Button android:layout_width="wrap_content" android:text="." /> <Button android:text="0" /> <Button android:text="=" /> </GridLayout>Copy the code

Six, TableLayout ⭐ ️

• TableLayout is a ViewGroup that displays rows and columns of child View elements.

A practical illustration of the effect:

TableLayout Row View occupies the width of the row by default. If you want to have more than one column in a row, you need to wrap it with TableRow, as follows:

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView 
        android:text="9*9=81" />

    <TableRow>

        <TextView 
            android:text="9*8=72" />

        <TextView 
            android:text="8*8=64" />
    </TableRow>

    <TableRow>

        <TextView 
            android:text="9*8=72" />

        <TextView 
            android:text="8*8=64" />

        <TextView 
            android:text="8*8=64" />
    </TableRow>

</TableLayout>
Copy the code

• Android :stretchColumns: Set the width of a column to the width of the remaining rows

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="0"> <! <Button Android :text=" I am the second column "/> </TableRow> </TableLayout>Copy the code

• Android :collapseColumns: hides a column

< TableLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: collapseColumns = "0, 2" > <TableRow> <Button android:text=" I am a column "/> <Button Android :text=" I am a column" /> <Button android:text=" I am a column "/> <Button android:text=" I am a column" /> <Button android:text=" I am a column "/> <Button Android :text=" I am a column" /> <Button Android :text=" I am the fourth column "/> </TableRow> </TableLayout>Copy the code

• Android :shrinkColumns: Shrink a column

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:shrinkColumns="0"> <! -... --> </TableLayout>Copy the code

Google here provides a good effect, interested in their own try, as follows:

Seven, AbsoluteLayout ⭐ ️

Usage:

• Determine its position according to the x/y coordinates of the child. Poor flexibility and difficult maintenance.

And deprecated in Api 30.

The following effect is achieved:

The second TextView is located in the first TextView and the x/y wheelbase is 100dp respectively:

<AbsoluteLayout android:layout_width="0dp" android:layout_height="300dp" app:layout_constraintBottom_toBottomOf="parent"  app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" The world is beautiful ~ "/> <TextView Android: Layout_width ="wrap_content" Android :layout_y="100dp" Android :layout_y="100dp" Android :layout_y="100dp" Android :text=" where are you ~ "/> </AbsoluteLayout>Copy the code

Eight, BlinkLayout ⭐ ️

This is a little more magical. Twinkle, twinkle, boo, boo. Here’s an effect:

The effect is to perform a drawing every 500ms, rendering the effect of the flash flash.

It is also easy to use:

<blink android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView Android :layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" The world is beautiful ~ "/> </blink>Copy the code

Source relatively less, the following paste, convenient later want to see at any time 👀 :

private static class BlinkLayout extends FrameLayout { private static final int MESSAGE_BLINK = 0x42; private static final int BLINK_DELAY = 500; private boolean mBlink; private boolean mBlinkState; private final Handler mHandler; public BlinkLayout(Context context, AttributeSet attrs) { super(context, attrs); mHandler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { if (msg.what == MESSAGE_BLINK) { if (mBlink) { mBlinkState = ! mBlinkState; makeBlink(); } invalidate(); return true; } return false; }}); } private void makeBlink() { Message message = mHandler.obtainMessage(MESSAGE_BLINK); mHandler.sendMessageDelayed(message, BLINK_DELAY); Override protected void onAttachedToWindow() {Override protected void onAttachedToWindow() { super.onAttachedToWindow(); mBlink = true; mBlinkState = true; makeBlink(); } /** * the View is separated from the window. Reset some operation * / @ Override protected void onDetachedFromWindow () {super. OnDetachedFromWindow (); mBlink = false; mBlinkState = true; mHandler.removeMessages(MESSAGE_BLINK); } @override protected void dispatchDraw(canvas) {if (mBlinkState) { super.dispatchDraw(canvas); }}}Copy the code

The end

Never stop exploring.

A lot of times, ten minutes of exploration can make a world of difference.

Work together, look forward to, work together to become good for the future ~

If there is a clerical error or misunderstanding, welcome to exchange ~

Thanks

• Android API reference
• Build a Responsive UI with ConstraintLayout
• ConstraintLayout
• Build a Responsive UI with ConstraintLayout
• Guideline
• Understanding the performance benefits of ConstraintLayout
• LinearLayout
• Relative to the layout
• FrameLayout
• GridLayout
• form
• The curious BlinkLayout
• OnAttachedToWindow and onDetachedFromWindow
• Difference between ondraw() and dispatchdraw ()