In the past period of time, xiaobai because of some objective reasons, no matter in work or personal life, some great changes have taken place, so we have to keep writing. Android native development is also on and off. There are two things I am happy to share with you: First of all, the first Android native development application developed by Xiaobai has finally been put into use after several months of development and nearly half a year. I hope it can continue to grow. Another is to join a QQ Android learning group, met some nice partners, also shared some useful knowledge to help some people, which is a very happy thing. Therefore, after a period of time, Xiaobai still think to continue the xiaobai series, leaving their own learning android native development footprint, can also share with you.

Next, Xiaomai will start a new chapter in the Android native development series, which focuses on the use of layout and list containers in Android native development. Layout involves some basic controls: LinearLayout, RelativeLayout, FrameLayout, ConstraintLayout and CoordinatorLayout. In this section, the little white will record the LinearLayout layout control.

First of all, we need to understand what is layout? Is it the planning and arrangement of things? ! Oh, stop it. Why are you doing this? In other words, where in the interface do we want to display xyz. Layout is to help us arrange the interface of the tool, of course, a single layout control can not help us complete the more complex interface layout, so usually through combination, nesting and other layout application methods to achieve.

The so-called work to good things, must first sharpen its tools, short step without a thousand miles. The simplest layout is horizontal and vertical, criss-crossing, so in android layout is called LinearLayout, the corresponding layout control is LinearLayout. Before introducing the use of LinearLayout, first gossip a small problem, that is the father Of Google is not very welcome to the son LinearLayout, the reason given is performance, of course, xiaobai believe that the reason for LinearLayout is true. LinearLayout will cause performance problems when used in depth, but this is the pit buried in Google’s earlier design of LinearLayout. But for regular use, not heavily nested and dependent on weights, LinearLayout will not cause performance problems. After all, many built-in controls are not secretly used LinearLayout. So for this problem, the white guess the truth has two aspects: one is that the heavy use of LinearLayout does have performance problems, and the second is to give way to Google’s new love, ConstraintLayout. But haku didn’t think it was the right way. So let’s take a good look at the use of LinearLayout.

Horizontal & Vertical

The most basic use of LinearLayout is similar to the most basic form of streaming layout in the Web, which is top to bottom and left to right. But the LinearLayout cannot be done simultaneously from top to bottom and from left to right. We can only choose one of the two. This is the horizontal or vertical selection of the LinearLayout, which is controlled by the orientation attribute of the LinearLayout, as shown in figure 1.

Figure 1. Horizontal and vertical Settings of the LinearLayout

In the example above, we can see two main elements: the image and the title of the book, so in landscape, what do we do? First, you need to set the Orientation of the LinearLayout to horizontal, that is, from left to right, and then drop an ImageView and TextView into the LinearLayout to display the image and the title of the book, as shown in Figure 2:

Figure 2 LinearLayout horizontal example code

To view the LinearLayout from top to bottom, you can set orientation to vertical, and the example above will look like Figure 3:

Figure 3 LinearLayout vertical example code

So why doesn’t Google design a layout control that works from top to bottom and left to right? The assumption was that the early mobile devices could not match the performance of the box-type computers of their time, and the Web streaming layout required a lot of computing power. If this is true, then the LinearLayout is flawed; otherwise, ConstraintLayout would not exist.

The weight

A very important concept for LinearLayout is difficult to get around, that is the weight. The weight is simply the proportion, the proportion used to allocate space, of course, this proportion needs to be calculated, and the weight is a value to help calculate the proportion. But the weight also has the choice of setting and not setting, so in addition to consider the weight is not set and the internal control size overflow LinearLayout, so in general will be more complex.

There is no weight

Xiaobai in using horizontal LinearLayout mode, often ignore the fact that the LinearLayout in horizontal mode can be set without weight. So how will the LinearLayout behave without setting the weights? First small white first set a normal weight instance:

Figure 4. Normal weighted example

In the above example, we have three elements in total:

  1. Fixed size book icon picture

  2. Weighted title text

  3. Small functional ICONS of fixed size

So if we get rid of the layout_weight of all the children of the LinearLayout we get rid of the weight and give the children a valid width value. For example, if we remove the layout_weight from the title text and set its layout_width to wrap_content, the result would look like this:

Figure 5. Unauthorized redo example

As you can see in the figure above, the LinearLayout does not calculate the space ratio of the controls, but instead displays them sequentially based on the space size of the child controls. If there is no extra space to display any part of the control, even if the control space compression cannot achieve the purpose of display, will not be displayed.

Unweighted collocation

The little white above describes how the LinearLayout handles the layout of the internal controls without weights, but if we assign weights to one or more but not all of the controls. As shown in the example in Figure 4 above, we add permissions to a title text and the LinearLayout will work differently. First, it will first according to the right to reset the control of the need for space, and then through the remaining space according to the weight of the weight control space, and finally according to the calculation results to display the control. This is one of the reasons why LinearLayout depth is used for performance reasons. However, it can be more complicated than that, so here are a few tips and cautions:

  1. In LinearLayout landscape mode, do not set match_parent to the layout_width of the child control unless necessary. Match_parent will make the child controls take up all of the space in the LinearLayout and either fill the LinearLayout or make the other controls fail to display.
  2. If the LinearLayout has both unweighted and weighted subcontrols, then it’s best to estimate how much space the unweighted subcontrols may require, and then set a fixed layout_width for those unweighted subcontrols. Because that way, if we have multiple LinearLayout layouts that form list layouts, we can align the page elements up and down, which is cleaner and more beautiful.
  3. Try not to set the weight of multiple LinearLayout sub-control prices, because multiple sub-control prices with weights will appear unpredictable display performance.

In horizontal LinearLayout mode, set weights for only one child control that needs to display as much content as possible, and set a reasonable fixed layout_width for the other controls. The total number of child controls is controlled within 5, preferably 3. The reason is that it’s stable.

Full proportional weight

So how will the LinearLayout behave if all of its children are weighted? In fact, it behaves the same as with or without weight collocation. The only difference is that in this mode, the LinearLayout will be based on the weight ratio, as shown in the figure below:

FIG. 6 Proportional weight

As shown in the figure above, Xiaobai divides the book images, title text and operation buttons into 2:6:1 proportions. The LinearLayout will automatically allocate according to the proportions. What we usually need to do is estimate the proportion of space that each part of the LinearLayout takes up in the whole LinearLayout. In addition, when the space allocated by the LinearLayout is less than the minimum space required by the child control, that is, the LinearLayout allocation space is completely unable to display a child control, then a lot of unexpected situations can happen. But in general, the odds are not that high.

Finally, about the LinearLayout small white record here, usually remember the simple horizontal and vertical layout with LinearLayout. In addition, try to avoid deep use weight and deep nesting of LinearLayout, using a relatively stable proportion distribution mode. Another sentence is layout_below, layout_above, layout_centerVertical, etc.