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:
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
;
sp
: For font size settings, it allows the font size to be scaled according to the user 设置
's settings in.
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 introducedp
Before you start talking aboutdpi
。dpi
Called 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
- If a device is
dpi
exactly equal to this benchmark, then it is the MDPI device;
- If a device
dpi
is 1.5 times times the benchmark, then it is the HDPI device;
- If a device
dpi
is twice times the benchmark, then it is the XHDPI device;
- 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,
- Just now the 1080*1920 screen should belong to the xxhdpi type;
- 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,
- 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;
match_parent
: the width (or length) of the parent layout is bounded to occupy as much space as possible;
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
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"
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,
visible
: This control or layout is visible;
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;
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