Android introductory tutorial | UI layout RelativeLayout relative layout

Insert image description here

RelativeLayout brief description

RelativeLayout inherits from android.widget.ViewGroup and completes layout according to the positional relationship between sub-elements. As the most flexible and commonly used layout method among the five major layouts of the Android system, it is very suitable for some more complex interface designs.

RelativeLayout is similar to LinearLayout, both are ViewGroups and can "accommodate" multiple subviews.

RelativeLayout is a view group that displays subviews in relative positions. Each view's position can be specified relative to a sibling element (for example, to the left or below another view) or relative to the parent RelativeLayout region (for example, aligned to the bottom, left, or center).

The subview can be TextView, Button, or LinearLayout, RelativeLayout, etc. If no other configuration is added, they default to the upper left corner of the RelativeLayout.

In RelativeLayout, a sub-View can be positioned based on another sub-View. But it must be noted that RelativeLayout and its sub-View cannot depend on each other. For example, RelativeLayout sets the height to wrap_content, and the sub-View sets ALIGN_PARENT_BOTTOM, so you will find that RelativeLayout is stretched to the maximum. RelativeLayout eliminates nested view groups and keeps the layout hierarchy flat.

Property introduction

RelativeLayout properties :

img

RelativeLayout can specify the position of subviews relative to the parent view or to each other (determined by ID). So you can align two elements according to their right borders, or have them one above the other, center on the screen, center on the left, etc. By default, all subviews are drawn in the upper left corner of the layout, so the position of each view must be defined using the various layout properties provided in RelativeLayout.LayoutParams.

There are many layout properties available for views in RelativeLayout, some examples include:

android:layout_alignParentTop

If "true", aligns the top edge of this view to the top edge of the superview.

android:layout_centerVertical

If "true", this child will be vertically centered within the parent.

android:layout_below

Positions the top edge of this view below the view specified with the resource ID.

android:layout_toRightOf

Positions the left edge of this view to the right of the view specified with the resource ID.

Example :

In order to make the UI look better, first define the style and add a new style in the style.xml file.

<style name="RelativeLayoutDemo1Item">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:padding">4dp</item>
    <item name="android:background">@color/colorAccent</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">12sp</item>
</style>

Example 1 :

Add RelativeLayout and some sub-Views to the layout. The child View sets different attributes, which are distributed in the top, bottom, left, and right places of the parent View.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:text="default" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:text="layout_alignParentEnd" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_centerInParent="true"
            android:text="layout_centerInParent" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom | End" />

    </RelativeLayout>

img

Example 2 :

A sub-View can use another sub-View as a position basis.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="120dp">

        <TextView
            android:id="@+id/tv1"
            style="@style/RelativeLayoutDemo1Item"
            android:text="天" />

        <TextView
            android:id="@+id/tv2"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv1"
            android:layout_toEndOf="@id/tv1"
            android:text="天" />

        <TextView
            android:id="@+id/tv3"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv2"
            android:layout_toEndOf="@id/tv2"
            android:text="向" />

        <TextView
            android:id="@+id/tv4"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv3"
            android:layout_toEndOf="@id/tv3"
            android:text="上" />

    </RelativeLayout>

Share one last time

[Produced by Tencent Technical Team] Getting started with Android from scratch to mastering it, Android Studio installation tutorial + full set of Android basic tutorials

Android programming introductory tutorial

Java language basics from entry to familiarity

Insert image description here

Kotlin language basics from entry to familiarity

Insert image description here

Android technology stack from entry to familiarity

Insert image description here

Comprehensive learning on Android Jetpack

Insert image description here

For novices, it may be difficult to install Android Studio. You can watch the following video to learn how to install and run it step by step.

Android Studio installation tutorial

Insert image description here

With the Java stage of learning, it is recommended to focus on video learning at this stage and supplement it with book checking and filling in gaps. If you mainly focus on books, you can type the code based on the book's explanations, supplemented by teaching videos to check for omissions and fill in the gaps. If you encounter problems, you can go to Baidu. Generally, many people will encounter entry-level problems and give better answers.

You need to master basic knowledge points, such as how to use the four major components, how to create Service, how to layout, simple custom View, animation, network communication and other common technologies.

A complete set of zero-based tutorials has been prepared for you. If you need it, you can add the QR code below to get it for free.

A complete set of basic Android tutorials

Insert image description here

Insert image description here

Insert image description here

Insert image description here
Insert image description here
Insert image description here
Insert image description here

Guess you like

Origin blog.csdn.net/Android23333/article/details/133353733