Detailed explanation of the use of Android's four major layouts

cb72576e8900898f811c2c13dd18fa8d.gif

Learn with you for lifeXi, this is Programmer Android

Recommended classic articles. By reading this article, you will gain the following knowledge points:

1. LinearLayout linear layout
2. RelativeLayout relational layout
3. FrameLayout frame layout
4. TableLayout table layout

In Android , where there is an interface, there will be a layout, and layout Androidis very important to us. AndroidThe four most commonly used layouts are: LinearLayout、RelativeLayout、FrameLayout、TableLayout.

AbsoluteLayout has been deprecated and this question is skipped.

1. LinearLayout linear layout

Linear layout, Androidone of the commonly used layouts, mainly includes horizontal layout and vertical layout. Linear layout and horizontal layout are mainly distinguished by orientationattributes, vertical layout: android:orientation="vertical", horizontal layout:
android:orientation="horizontal".

1. Linear layout inheritance relationship

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout

2. LinearLayout simple example

fe1734ece4071802ce60c7ae5dfce309.jpeg

LinearLayout layout example

The above layout code is implemented as follows:

<LinearLayout
        android:id="@+id/ll_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_purple"
                android:gravity="center_horizontal"
                android:padding="10dp"
                android:text="水平布局" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="center_horizontal"
                android:padding="10dp"
                android:singleLine="true"
                android:text="水平布局" />
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_orange_light"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="垂直布局" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="垂直布局" />
    </LinearLayout>

2. RelativeLayout

Relational layout: RelativeLayout, Androidone of the commonly used layouts, mainly layout controls in relative positions, such as: left, center, right

1.Inheritance relationship:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.RelativeLayout

2.RelativeLayout simple example

b7a7893b5132fcd129a3a658032384c3.jpeg

RelativeLayout layout

  • The static code layout is as follows:

<RelativeLayout
        android:id="@+id/rl_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tittle_bg"
        android:padding="10dp"
        android:visibility="gone" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:drawableLeft="@drawable/arrow_pressed"
            android:drawablePadding="5dp"
            android:text="动态" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="好友动态" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/tittle_add" />
    </RelativeLayout>

3. FrameLayout

Frame layout FrameLayout: Android one of the commonly used layouts, mainly layout by frame, controls will be superimposed, and subsequent layouts will overwrite the previous layout.

1. The inheritance relationship of FrameLayout is as follows:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.FrameLayout

2. Simple FrameLayout example

095fb1dfb58fedeef11bb7ff2ec4ca4b.jpeg

FrameLayout layout

  • The above layout implementation code is as follows:

<FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_orange_light"
            android:gravity="center_vertical"
            android:text="  1"
            android:textColor="@android:color/black" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_green_light"
            android:gravity="center_horizontal"
            android:text="2" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_blue_bright"
            android:gravity="center"
            android:text="3" />
    </FrameLayout>

4. TableLayout table layout

TableLayoutTable layout: AndroidOne of the most commonly used layouts in Chinese. This layout is used when achieving table-like effects.

1.TableLayout inheritance relationship

TableLayout Inheritance  LinearLayout, the relationship is as follows:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout
               ↳    android.widget.TableLayout

2. A simple 2*2 example is as follows:

ed4f63e3fe2f0dfbf33cb59d2ad29d17.jpeg

TableLayout layout

  • The above layout implementation code is as follows:

<TableLayout
        android:id="@+id/tl_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="left"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="10dp"
                android:text="WeChat Number:" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_bright"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingRight="10dp"
                android:paddingTop="10dp"
                android:text="ProgramAndroid" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_bright"
                android:gravity="left"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="10dp"
                android:text="微信公众号:" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingRight="10dp"
                android:paddingTop="10dp"
                android:text="程序员Android" />
        </TableRow>
    </TableLayout>

references:

[Tencent Documentation] Android basic knowledge base
https://docs.qq.com/doc/DSWdKRWh1VnVHYWFP

Friendly recommendation:

Collection of useful information on Android development

At this point, this article has ended. The editor thinks the article is reprinted from the Internet and is excellent. You are welcome to click to read the original article and support the original author. If there is any infringement, please contact the editor to delete it. Your suggestions and corrections are welcome. We look forward to your attention and thank you for reading, thank you!

5cb0bea5e5466c95280a99c1d42e869a.jpeg

Click to read the original article and like the boss!

Guess you like

Origin blog.csdn.net/wjky2014/article/details/131693043