Weight of Android Development Note (layout_weight)

I believe that you have used weights (layout_weight) in the layout file, which is only in the linear layout (linearlayout), but many people may simply understand it.

In fact, the weight is:
Proportionally distributes the remaining space on the screen

We first remember this sentence, here to deeply understand the weight, here to the horizontal arrangement as an example (that is, the weight of the width), understand the horizontal, vertical arrangement (that is, the height of the weight) naturally.

① first case (width is wrap_content):

A.

<linearlayout  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:orientation  =" horizontal " tools:context  = "com.example.weight.MainActivity" ;     <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "wrap_content"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="1"android:layout_width="Wrap_ Content "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

Now the width of the two buttons is wrap_content, so the remaining screen width is:

Math_parent-2*wrap_content, with a weight of 1:1

Then the width of the BTN1 is: the width of itself + the width of the remaining screen = Wrap_content
+ (Math_parent-2*wrap_content)

The width of the BTN2 is: the width of itself + the width of the remaining screen = Wrap_content
+ (Math_parent-2*wrap_content)

From the above see two equal, so two buttons should be split the entire screen width

B.

<linearlayout 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:orientation="Horizontal"  Tools:context="com.example.weight.MainActivity" >                        <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "wrap_content"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="2"android:layout_width="Wrap_ Content "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

As can be seen, these two buttons are not 1:2, that is why, we come to calculate,

Now the width of the two buttons is wrap_content, so the remaining screen width is:

Math_parent-2*wrap_content, with a weight of 1:2

Then the width of the BTN1 is: the width of itself + the width of the remaining screen 1/3 = Wrap_content
+ 1/3 (math_parent-2*wrap_content)

The width of the BTN2 is: itself width + 2/3 of the width of the remaining screen = Wrap_content
+ 2/3 (math_parent-2*wrap_content)

Look at these two formulas do not seem to see, we come with a number, assuming wrap_content = 120dp,math_parent = 900DP

Then the width of the BTN1 is: 340DP

The width of the btn2 is: 560DP

Now you know why it's not 1:2.

C.

<linearlayout  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:orientation  =" horizontal " tools:context  = "com.example.weight.MainActivity" ;     <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "wrap_content"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="$"android:layout_width="Wrap_ Content "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

As you can see, the weight of btn2 has been set very large, btn1 weight of 1, but btn1 still be able to display.

Continue to calculate, now the width of the two buttons is wrap_content, so the remaining screen width is:

Math_parent-2*wrap_content, with a weight of 1:2000

Then the width of the BTN1 is: the width of itself + the width of the remaining screen 1/2001 = Wrap_content
+ 1/2001 (math_parent-2*wrap_content)

The width of the BTN2 is: the width of itself + the width of the remaining screen 2000/2001 = Wrap_content
+ 2000/2001 (math_parent-2*wrap_content)

Now you can know why the weight no matter how big, can not occupy full screen of the reason it.

② second case (width is math_parent):

A.

<linearlayout  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:orientation  =" horizontal " tools:context  = "com.example.weight.MainActivity" ;     <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "match_parent"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="1"android:layout_width="Match_ Parent "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

Now the width of the two buttons is match_parent, so the remaining screen width is:

Math_parent-2*match_parent =-match_parent with a weight of 1:1

Then the width of the BTN1 is: the width of itself + the width of the remaining screen = Match_parent
+ (math_parent-2*match_parent) = 1/2match_parent

The width of the BTN2 is: the width of itself + the width of the remaining screen = Match_parent
+ (math_parent-2*match_parent) = 1/2match_parent

From the above see two equal, so two buttons should be split the entire screen width

B.

<linearlayout 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:orientation="Horizontal"  Tools:context="com.example.weight.MainActivity" >                        <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "match_parent"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="2"android:layout_width="Match_ Parent "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

You can see a very strange phenomenon, the weight of the btn2 more, but it is more than the width of btn1 accounted for less, for what, calculate a calculation.

Now the width of the two buttons is match_parent, so the remaining screen width is:

Math_parent-2*match_parent =-match_parent with a weight of 1:2

Then the width of the BTN1 is: the width of itself + the width of the remaining screen 1/3 = Match_parent
+ 1/3 (math_parent-2*match_parent) = 2/3match_parent

The width of the BTN2 is: itself width + 2/3 of the width of the remaining screen = Match_parent
+ 2/3 (math_parent-2*match_parent) = 1/3match_parent

Now you know why.

C.

<linearlayout 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:orientation="Horizontal"  Tools:context="com.example.weight.MainActivity" >                        <button  android:layout_ Weight  = "1"  android:layout_width  =< Span class= "Hljs-value" > "match_parent"  android:layout_height  = "wrap_content"  android:text  =" btn1 "/>     <buttonandroid:layout_weight="$"android:layout_width="Match_ Parent "android:layout_height=" Wrap_content "android:text=" btn2 " />                                 </linearlayout>

Effect:

Why did you just see BTN1?

Now the width of the two buttons is match_parent, so the remaining screen width is:

Math_parent-2*match_parent =-match_parent with a weight of 1:2000

Then the width of the BTN1 is: the width of itself + the width of the remaining screen 1/2001 = Match_parent
+ 1/2001 (math_parent-2*match_parent) = 2000/2001match_parent

The width of the BTN2 is: its width + the width of the remaining screen 2000/2001= match_parent
+ 2000/2001 (math_parent-2*match_parent) = 1/2001match_parent

This shows that the width of the btn2 can be negligible.

③ third case (0DP):

From the above example, everyone should know how to calculate the weight of it, here to demonstrate the next 1:2 of the situation

<linearlayout  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:orientation  =" horizontal " tools:context  = "com.example.weight.MainActivity" ;     <buttonandroid:layout_weight="1"android:layout_width="0DP" android:layout_height="Wrap_content"android:text="btn1" />                                    <buttonandroid:layout_weight="2"android:layout_width=  "0DP"android:layout_height="Wrap_content"android:text="Btn2" />                                </linearlayout>

Effect:

Now the width of the two buttons is 0DP, so the remaining screen width is:

Math_parent-2*0 = Match_parent with a weight of 1:2

The width of the BTN1 is: 1/3 of the width of the remaining screen =
0 + 1/3 (math_parent-2*0) = 1/3match_parent

The width of the btn2 is: 2/3 of the width of the remaining screen =
0+ 2/3 (math_parent-2*0) = 2/3match_parent

It can be seen that the actual width ratio of btn1 and btn2 is equal to their weight ratio.

Summarize:

① weights are proportional to the remaining space on the screen.

② if wrap_content, then the larger the weight, the more position accounted for, then small but wrap_content

③ if match_parent, then the larger the weight, the less the position accounted for, and then greatly match_parent

④ if 0DP is used, the actual width ratio is equal to the weight ratio

Weight of Android Development Note (layout_weight)