Android Knowledge Point Anatomy Series: in-depth understanding of layout_weight properties

Objective

Layout_weight This attribute in Android is certainly not unfamiliar to us, which is often a UI-crunching. However, when we really use this property, there are often some strange and wonderful layout effect, if we just know it but do not know why, some unexpected layout effect must make us quite a headache. In this article, the Layout_weight attribute is analyzed in detail.

Body

From the code:

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical">    <ButtonAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:text= "Button1"        />    <ButtonAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:text= "Button2"        />    <ButtonAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:text= "Button3"        /></LinearLayout>

As follows:

We can see that the three buttons do not occupy the entire screen, but are adapted to the size of the content.

We add an attribute android:layout_weight= "1" to the Button2 and find out that the layout has changed:

We found that the screen was occupied by three buttons, and that the first and third buttons remained the same size as the content, while the second button occupied the remaining screen space.

We explain the above situation:

1, we only use the Layout_weight property in Button2, and assign a value of 1, but Button1 and button2 do not use this property, according to the API can be known that their Layout_weight property equals 0.

2. LinearLayout If you explicitly include the Layout_weight property, it will measure two times, the first time the width of the three button is calculated normally, and the second will be combined with the value of Layout_weight to allocate the remaining space.

　　Popular point to summarize: the Android system first according to your set of 3 button height layout_height=wrap_content, assigning you 3 of their height, and then the remaining screen space will be assigned to Button2, because only his weight value is 1, This is why Button2 occupies such a large space.

So we probably have a clearer understanding of the layout_weight attributes.

Then take a look at the following code:

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "Horizontal">    <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:text= "1"Android:background= "#ff0000"        />    <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_weight= "2"Android:text= "2"Android:background= "#00ff00"        />    <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_weight= "3"Android:text= "3"Android:background= "#0000ff"        /></LinearLayout>

When we set the layout_width of these three textview to wrap_content , we get the following layout:

This layout is in line with our analysis above:

The system assigns 3 TextView their width value wrap_content(width enough to contain their content), and then assigns the remaining screen space to 3 TextView according to the 1:2:3 column, So there is the image above.

If we set the above three TextView layout_width to match_parent, respectively, to three TextView set their layout_weight to 1, 2, 2, there will be a reverse layout effect:

We can probably tell that the percentage of the 3:1:1 they occupy is the same. This will result in one more effect: the larger the weight weight, the smaller the space the control takes up.

So there are people on the Internet that summed up:

When Layout_width is set to Match_parent, Layout_weight represents your control as large as possible, but this is limited, that is, match_parent.
When Layout_width is set to Wrap_content, Layout_weight represents that your control should take precedence as small as possible, but this large is limited, that is, wrap_content.

This is for this just remember how to use, but not why the use of the practice, as a pursuit of the ideal programmer will not agree, because maybe one day, we forget the formula, so we have to understand the principle of why this is the case.

According to the above understanding, the appearance of this phenomenon lies in layout_width= "fill_parent" this cause; start the following analysis:

1, the system first assigns 3 TextView the width match_parent that they want, also specified each TextView is fills his parent control, here is the entire screen width.

2, because if contains layout_width this attribute, LinearLayout will carry on the second measure, at this time will allocate the remaining space according to the weight, here remaining space =1 parent_width-3 parent_ Width=-2 x parent_width (Parent_width refers to the screen width).

3. The actual occupied width of the first TextView =parent_width (width of match_parent) + 1/5 (the weight of his remaining space Billy) * remaining space size ( -2 parent_width) =3/5parent_ Width

In the same vein the actual occupied width of the second TextView =parent_width + 2/5* ( -2parent_width) =1/5parent_width;

The actual occupied width of the third TextView =parent_width + 2/5* ( -2parent_width) =1/5parent_width;

So we can see why it is shown by this ratio of 3:1:1.

What if we were to Layout_weight 1, 2, 3? The third textview disappeared straight away with wood there!

We can calculate the answer by the above method:

1, the system first assigns 3 TextView the width match_parent that they want, also specified each TextView is fills his parent control, here is the entire screen width.

2, because if contains layout_width this attribute, LinearLayout will carry on the second measure, at this time will allocate the remaining space according to the weight, here remaining space = 1 parent_width-3 parent_width= -2 x parent_width (Parent_width refers to the screen width).

3. The actual occupied width of the first TextView =parent_width (width of match_parent) + 1/6 (the weight of his remaining space Billy) * remaining space size ( -2 parent_width) =2/3parent_ Width

In the same vein the actual occupied width of the second TextView =parent_width + 2/6* ( -2parent_width) =1/3parent_width;

The actual occupied width of the third TextView =parent_width + 3/6* ( -2parent_width) =0parent_width;

So the display ratio of the three textview should be 2:1:0, and the third TextView disappears, because there is no space for him to be allocated on the basis of calculations.

Seeing that this calculation principle is well understood here, it is believed that the UI layouts used for match_parent and wrap_content can be calculated by using this method to help design the UI layout.

And then I'll take it with you. Another property related to Layout_weight: WeightSum

As the name implies, is the total value of the weight, if you do not specify the Weightsum, the system will add the values of the individual layout_weight as a weight value, of course, we can also be explicitly specified here, it is also convenient for us to use the layout, I'm going to give you an application about the Weightsum attribute:

See such an effect, a button that always occupies half the screen

In fact, the XML code is simple:

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:gravity= "Center"Android:weightsum= "2"android:orientation= "Horizontal">    <ButtonAndroid:layout_width= "0DP"Android:layout_height= "Wrap_content"Android:layout_weight= "1"Android:text= "button"        /></LinearLayout>

The Layout_weight property is described in the development documentation as follows: Defines the maximum value of the weight sum. If this value is not specified, the cumulative value of the Layout_weight property of all child views is used as the maximum value of the sum. A typical case is: by specifying the Layout_weight property of the child view to 0.5, and setting the LinearLayout's Weightsum property to 1.0, the implementation child view occupies 50 of the available width.

From the XML above we can know that we set the Weightsum to 2, and for the button set Layout_width is 0 and Layout_weight is 1 (that is, half of weightsum), we can draw the above effect, Makes the button occupy half of the screen without hard coding.

The code is relatively simple, here is not the demo AH.

Enjoy wind chimes
Source: http://www.cnblogs.com/net168/
This article is copyright to the author and the blog Park is shared, welcome reprint, but without the author's consent must retain this paragraph statement, and in the article page obvious location to the original connection, or next time not to you reproduced

Android Knowledge Point Anatomy Series: in-depth understanding of layout_weight properties