Layout and controls (i)--common concepts for layouts and controls

Section 1th general concepts of layout and controls

The control in the interface design is what we often see, and 按钮 滑动条 文字显示区 so on, they are like the furniture in the room, is the smallest unit of the interface design.

A layout is a container that can hold other layouts (or controls). It's like a big room where you can put a variety of furniture (controls), or you can isolate it into more rooms (put in another layout).

However, there are many common areas, such as defining their size, margins, and so on.

1.1 Size Units

When you work with layouts or controls, you sometimes need to specify their dimensions. The Android system offers three types of units:

1. px: Set in pixels, each point on the screen is a pixel, such as an Android phone, the screen pixel is, that is 1920 x 1080 , the screen height has a 1920 pixel point, Width has 1080 a pixel point, but in the Android system, it is best not to use this unit to set the size, but with dp;
2. sp: For font size settings, it allows the font size to be scaled according to the user 设置 's settings in.
3. dp: Density-independent pixels, which are the units that should be used in layouts and controls;

Introduction of 1.1.1 DP

If you set the size of the device area in PX, there is usually a big problem.

Suppose there are two screens of 5 inches in physical size, their screen resolutions are different, one is 1080*1920 and the other is 450*800.

If you specify a button with a size of 200px long and 200px wide, they appear as if they were. Obviously, the difference between the two is too big, the interface is seriously deformed. So, to make the size of an area appear on different screens, you need to consider pixel density. In order to show the same length, on the screen with high density, more pixels are used, and fewer pixels will be used on the screen with less density.

So to solve this problem, Android introduced the concept of dip-device independed pixel-referred to as DP.

Definition of 1.1.2 dpi

In the next step, we introducedpBefore you start talking aboutdpi。dpiCalled the screen pixel density, is the number of pixels per inch. We use simple mathematical principles. d PI= length 2 + width 2 ￣ ￣ ￣ ￣ ￣ ￣ ￣ ￣ √ theAngleLineRulerinch Can figure out the dpi of just two screens, one is440dpi, the other is184dpi。

Note that dpi , dip(dp) like the way you do it, don't confuse the former with density , which is related to pixels .

Division of 1.1.3 DPI

Android uses a dpi value of 160 as a benchmark-- baseline

1. If a device is dpi exactly equal to this benchmark, then it is the MDPI device;
2. If a device dpi is 1.5 times times the benchmark, then it is the HDPI device;
3. If a device dpi is twice times the benchmark, then it is the XHDPI device;
4. If a device dpi is 3 times times the benchmark, then it is the XXHDPI device;

This is the basis for dividing the density of different screens.

pixel density type	pixel density size	ratio to baseline
mdpi	160	1
hdpi	240	1.5
xhdpi	320	2
Xxhpi	480	3

In accordance with such a convention,

1. Just now the 1080*1920 screen should belong to the xxhdpi type;
2. 450*800 screen should belong to the MDPI type;

Today's Android phones are almost always on the high-definition screen, so xhdpi and xxhdpi are the most common types of devices.

The calculation of the screen dpi is not necessarily an integer multiple of the benchmark (160), and the Android system does not necessarily use the value we have calculated as the DPI of the device.

The device typically assigns a DPI value close to that value in the system, for example, your NEXUS5, although calculated as 440, but the system actually assigns it 480, which is just 3 times times the benchmark.

In the file of the system's directory /system/build.prop , you can see that

//这里指定了一个dpi值ro.sf.lcd_density=480

1.1.4 DP-PX Relationship

Android has introduceddp(dip), the actual displayed pixel can be calculated from the following formula Px =d P? dpi the

In the same dp case, the density of the equipment, the actual pixel accounted for the large, dense dot device, the actual pixel occupies a small. So with DP This unit, the actual display size of the button on two different screens is almost the same.

For example just two kinds of screens. If I specify the size of the buttons as 200DP*200DP, the actual pixels they occupy on their screens are 230px*230px and 550px*550px, and the real device looks exactly the same.

1.2 Size setting

When you set the layout or the size of the control, you use their android:layout_width and android:layout_height properties.

<View    android:layout_width="match_parent"    android:layout_width="wrap_content"/>

Their values can be set to,

1. A specific value: for example 5dp . Of course you can also use dp other than the size of units, but considering the screen pixel density is different, we are used dp as units;
2. match_parent: the width (or length) of the parent layout is bounded to occupy as much space as possible;
3. wrap_content: the width (or length) of the child layout or control content is bounded to occupy as little space as possible;

1.3 Margins

1. margin: The margin of a control or layout relative to an outer component is called margin , such as an LinearLayout interval between one another adjacent to it FrameLayout . In a layout or control, use the following properties to define the

   android:layout_margin="5dp"android:layout_marginLeft="5dp"android:layout_marginTop="5dp"android:layout_marginRight="5dp"android:layout_marginBottom="5dp"

2. padding: The margin that a control or layout retains for an inner area is called padding , such as an interval between one and the inside of LinearLayout it FrameLayout , or TextView between the border and its inner text. In a layout or control, use the following properties to define the

   android:padding="5dp"android:paddingLeft="5dp"android:paddingTop="5dp"android:paddingRight="5dp"android:paddingBottom="5dp"

1.4 Visibility

Layouts and controls also have a common android:visiblility property,

<View    android:layout_width="match_parent"    android:layout_width="wrap_content"    android:visibility="visible"/>

It has 3 optional parameters,

1. visible: This control or layout is visible;
2. invisible: This control or layout is not visible, but its position is still there, but the interface does not see it, the other control or layout still need to consider its location;
3. gone: This control or layout is not visible, and its position is no longer there, and when displayed, no other control or layout takes its place.

By default, if you do not specify this property, the system typically uses parameters for them visible .

1.5 position

The

Either the control or the layout can set its own preferred position relative to the parent layout, such as centering or left. For example, if you put a Button in linearlayout , and you want to be in the upper position of the parent layout, you can add the android:layout_gravity property, set the value to top ,

< LinearLayout  android:layout_width  = "Match_ Parent " android:layout_height  =" match_parent ";  <button  android:layout_gravity  =" top " android: Layout_width  = "wrap_content"  android:layout_ Height  = "wrap_content"  android:text  =< Span class= "Hljs-value" > "Hello world!"  />,  </linearlayout ;   

There are other values that you can set bottom left right center center_horizontal center_vertical .

The actual effect also depends on the type of the parent layout, for example, in the example above, the position property of the child control is only to LinearLayout request, but LinearLayout still need to start from their own reality-it does not necessarily meet all the child control or layout requirements.

For example, the use bottom of values here is meaningless. This LinearLayout is because the child layout (or control) is required to be arranged from top to bottom. So even if the bottom value is set, it Button will be above.

control or layout, you can also set your own content relative to the internal location. For example, in the example above, you Button LinearLayout can set the property to the bottom-right position android:gravity bottom|right . Here's the | expression 并且 ,

< LinearLayout  android:layout_width  = "Match_ Parent " android:layout_height  =" match_parent " android:gravity  =" bottom|right " >  <button  android:l Ayout_width  = "wrap_content"  android:layout_ Height  = "wrap_content"  android:text  =< Span class= "Hljs-value" > "Hello world!"  />,  </linearlayout ;   

Here's why you can LinearLayout arrange the child controls from below: This is LinearLayout your own property, not the read control's arrangement. The android:gravity attribute tells LinearLayout you to lay down the edge and left when you arrange it.

Layout and controls (i)--common concepts for layouts and controls