What you don't know about the android:layout_weight attribute

When I first started developing Android, I used the android:layout_weight attribute when writing layouts in xml.
First of all, the attribute must be effective in the Linearlayout layout.
This attribute is the meaning of weight: the width or height of the View is equal to the original width or height (android:layout_width) plus the proportion of the remaining space! (Be careful of the remaining space here)

Directly on the code:

<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.dgg1.weight.MainActivity">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ff00ff"
        android:text="按钮1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#ffff00"
        android:text="按钮2" />
</LinearLayout>

The effect achieved:
Write picture description here

This is also the official way of writing.

Let me change the way of writing:

<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.dgg1.weight.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ff00ff"
        android:text="按钮1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#ffff00"
        android:text="按钮2" />
</LinearLayout>

Hey, isn't this exactly the same (hey, people who don't look closely may really think it hasn't changed anything) here I changed layout_width from 0 to match_parent.
The effect achieved:
Write picture description here

You will find that the effect is exactly the opposite of the previous effect. Why does this effect occur? The meaning of layout_weight attribute is the original width of the control + the proportional width of the remaining space!
The first case: Assuming that the width of the screen is 100, when you set the width to 0dp, the width of button2 is 0 (the width of the control) + 100 (the remaining width) * 2/3 (ratio) = 67 (Actual width), the width of button1 is 0+100*1/3 = 33;

Case 2: Assuming that the width of the screen is 100, when you set the width to match_parent, the width of button1 is 100, and the width of button2 is also 100, then the remaining width is 100-(100+100)=- 100 (the remaining width is -100), then continue to convert the actual width of button1 to 100+(-100)*1/3 = 67, and the actual width of button2 to 100+(-100)*2/3 = 33 .
So there will be exactly the opposite result. (The official recommendation is to use the first writing method)

But sometimes the second way of writing may be needed when using the reuse layout of the include tag.

(If you have any questions or omissions, please leave a message to discuss and make progress together)

Guess you like

Origin blog.csdn.net/qq77485042/article/details/77446571