Key and difficulty 1 in Android development: RelativeLayout (relative layout,

Key and difficulty 1 in Android development: RelativeLayout (relative layout,
Preface

La la ~ The blogger has launched a new series ~

The previous Android development series mainly focused on the experiment completion process and often integrated a lot of knowledge to write, so it is inevitable that there will be a mixture of knowledge points, giving people a sense of confusion.

Therefore, the bloggers launched the "Key and difficulty" series to write down the difficulties or problems encountered by the bloggers during the experiment, so that you can better learn about Android Development (I know that I am a good guy and you don't have to praise me ~ Manual funny ).

The previous lab sections will be updated as well ~

Next, go to the topic ~ Naturally, starting with the layout, we can understand the linear layout. This blog will introduce RelativeLayout (relative layout ~

 

Key knowledge

Like LinearLayout, RelaiveLayout is also one of the most widely used la S. Relative, as the name suggests, it is determined by a sibling component or parent container (sibling component is a component in the same layout, an error occurs if one component in the layout references the component in another layout ). Properly Utilize the weight attribute of LinearLayout and relative layout of RelativeLayout, which can solve the adaptive problem of different screen resolutions.

For example, when James is on his way to school, his location can be expressed by the number of meters away from home or the number of meters away from school, that is, using different references.

 

Okay. Let's just talk about the common attributes ~

Set the method of all components in the layout:

Android: gravity: sets the alignment of each sub-component in the container.

Android: ignoreGravity: If this attribute is set for a component, the component is not affected by the gravity attribute.

Locate Based on the parent container:

Set the attribute to true if you want to locate it.

Left alighparentleft: android: layout_alighParentLeft

Right-aligned: android: layout_alighParentRight

Top alighparenttop: android: layout_alighParentTop

Bottom alighparentbottom: android: layout_alighParentBottom

Horizontal center: android: layout_centerHorizontal

Vertical center: android: layout_centerVertical

Central location: android: layout_centerInParent

Previous figure ~ (It's a bit ugly... let's take a look ~)

Locate Based on the sibling component (the property value on the right is the id of the sibling component)

Left: android: layout_toLeftOf

Right side: android: layout_toRightOf

Above: android: layout_abve

Below: android: layout_below

Aligntop

Align the bottom boundary: android: layout_alignBottom

Align the Left Border: android: layout_alignLeft

Align the Right Border: android: layout_alignRight

 

Here is a typical example ~

Plum Blossom layout:

 

The related code is as follows:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/RelativeLayout1" android: layout_width = "match_parent" android: layout_height = "match_parent"> <! -- This is in the center of the container --> <ImageView android: id = "@ + id/img1" android: layout_width = "80dp" android: layout_height = "80dp" android: layout_centerInParent = "true" android: src = "@ drawable/pic1"/> <! -- On the left of the intermediate image --> <ImageView android: id = "@ + id/img2" android: layout_width = "80dp" android: layout_height = "80dp" android: layout_toLeftOf = "@ id/img1" android: layout_centerVertical = "true" android: src = "@ drawable/pic2"/> <! -- On the right of the intermediate image --> <ImageView android: id = "@ + id/img3" android: layout_width = "80dp" android: layout_height = "80dp" android: layout_toRightOf = "@ id/img1" android: layout_centerVertical = "true" android: src = "@ drawable/pic3"/> <! -- On the top of the intermediate image --> <ImageView android: id = "@ + id/img4" android: layout_width = "80dp" android: layout_height = "80dp" android: layout_above = "@ id/img1" android: layout_centerHorizontal = "true" android: src = "@ drawable/pic4"/> <! -- Under the middle image --> <ImageView android: id = "@ + id/img5" android: layout_width = "80dp" android: layout_height = "80dp" android: layout_below = "@ id/img1" android: layout_centerHorizontal = "true" android: src = "@ drawable/pic5"/> </RelativeLayout>

 

There are two more common attributes of Margin and Padding!

Margin: sets the Margin between the component and the parent container (usually layout ).

Android: layout_margin:Specify a margin for the exterior of the control.
Android: layout_marginLeft:Specify a margin for the exterior on the left of the control.
Android: layout_marginTop:Specify a margin for the external side of the control.
Android: layout_marginRight:Specifies a margin for the external side of the control.
Android: layout_marginBottom:Specify a margin for the exterior of the control.

Padding: Set the Padding between elements in the component (can be understood as filling)

Android: padding:Specify the internal margin of the control.
Android: paddingLeft:Specify the internal margin on the left of the control.
Android: paddingTop:Specify the internal margin of the control.
Android: paddingRight:Specify the internal margin on the right of the control.
Android: paddingBottom:Specify the internal margin of the control.

The two are followed by a parameter, usually using dp as the unit, eg: android: margin = "10dp"

 

As follows:

 

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <Button        android:id="@+id/btn1"         android:layout_height="wrap_content"        android:layout_width="wrap_content"        android:text="Button"        />    <Button        android:paddingLeft="100dp"         android:layout_height="wrap_content"        android:layout_width="wrap_content"        android:text="Button"        android:layout_toRightOf="@id/btn1"        />            

Code explanation:

This code is very simple, that is, a combination of two buttons.

The second button of the first combination is set with paddingleft = "100dp:, and the result button is stretched by DP because the element spacing is filled with DP;

The second button of the second combination sets marginleft = "100dp", and the result button is shifted to 100dp.

 

Summary

Some important attributes used by RelativeLayout:

Class 1: the property value is true or false.

Android: layout_centerHrizontal horizontal center
Android: layout_centerVertical vertical center
Android: layout_centerInparent is completely centered over the parent Element
Android: layout_alignParentBottom: attach the lower edge of the parent Element
Android: layout_alignParentLeft: Stick the left edge of the parent Element
Android: layout_alignParentRight: attaches the right edge of the parent element.
Android: layout_alignParentTop: top the parent Element
Android: layout_alignWithParentIfMissing

Class 2: the property value must be the reference name "@ id/id-name" of the id"

Android: layout_below is under an element
Android: layout_abve is above an element.
Android: layout_toLeftOf on the left of an element
Android: layout_toRightOf on the right of an element
Android: layout_alignTop: Align the top edge of an element with the top edge of an element.
Android: layout_alignLeft: Align the left edge of an element with the left edge of an element.
Android: layout_alignBottom: the bottom edge of the current element is aligned with the bottom edge of an element.
Android: layout_alignRight: the right edge of an element is aligned with the right edge of an element.

Category 3: attribute values are specific pixel values, such as 30dip and 40px.

Android: layout_marginBottom distance from the bottom edge of an element
Android: layout_marginLeft distance from the left edge of an element
Android: layout_marginRight distance from the right edge of an element
Android: layout_marginTop distance from the edge of an element

Android: hint of EditText

Prompt information in the input box when EditText is set to null.

Android: gravity

Android: gravity attribute is a limitation on the view content. for example, text on a button. you can set the text to the left and right of the view. take the button as an example. For android: gravity = "right", the text on the button is right-aligned.

Android: layout_gravity

Android: layout_gravity is used to set the location of the view relative to the parent view. for example, if a button is in linearlayout, you can set it by placing it on the left or right. take the button as an example. For android: layout_gravity = "right", the button is right-aligned.

Android: layout_alignParentRight

Align the right end of the current control with the right end of the parent control. The attribute value can only be true or false. The default value is false.

Android: scaleType:

Android: scaleType controls how images are resized/moved to match the size of ImageView.

ImageView. ScaleType/android: the differences between scaleType values:

CENTER/center is centered according to the original size of the image. When the length/width of the image exceeds the length/width of the View, the CENTER part of the screenshot is displayed;

CENTER_CROP/centerCrop scales up the image size in the center, so that the image length (width) is equal to or greater than the View length (width );

CENTER_INSIDE/centerInside shows the entire content of the image in the center. The image length/width is equal to or less than the View length/width by proportional reduction or the original size;

FIT_CENTER/fitCenter scales up/down the image proportionally to the width of the View and is displayed in the center;

FIT_END/fitEnd scales up/down the image proportionally to the width of the View, which is displayed in the lower part of the View;

FIT_START/fitStart scales up or down an image to the width of the View, and displays the image in the top part of the View;

FIT_XY/fitXY increase or decrease the image size proportionally to the View size;

MATRIX/matrix is drawn using a MATRIX to dynamically zoom in and zoom in images.

Note that the names of images in the Drawable folder cannot be capitalized.