android layout_weight详解

最新推荐文章于 2023-05-12 12:21:13 发布

转载最新推荐文章于 2023-05-12 12:21:13 发布 · 1.7k 阅读

文章标签：

#android #layout #encoding #each #rest #website

andorid基础知识专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨了Android中布局权重(layout_weight)的使用技巧及其注意事项。通过具体实例解释了如何利用layout_weight来分配视图元素的空间，并指出其在不同情况下可能遇到的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The popular Android OS uses layouts to display Views on the screen. A View is a widget that has an appearance on the screen. Examples of widgets are radio buttons, labels, edit boxes, etc.
The appearance and sequence of Views can be ordered and one of the ways to do that is through the use of the LayoutParam layout_weight. This is an often overlooked, extremely powerful, but also tricky feature of layouts.
The Android developers website (developer.android.com) defines layout_weightas follows:
Indicates how much of the extra space in the [ViewGroup] will be allocated to the view associated with these LayoutParams.
This definition does not help us very much, especially because it is only true under specific circumstances as we see below. Let’s have a look at some examples. In the first example we want to split the display in half vertically with the following layout:
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="vertical"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"><br />
    <LinearLayout<br />
        android:background="#0000FF"<br />
        android:layout_height="match_parent"<br />
        android:layout_width="match_parent" /><br />
    <LinearLayout<br />
        android:background="#00FF00"<br />
        android:layout_height="match_parent"<br />
        android:layout_width="match_parent" /><br />

Of course the split does not work because the layout_height of the firstLinearLayout is set to match_parent causing it to take up all available space and leaving no room for the second LinearLayout. Changing the layout_height towrap_content will not help because the LinearLayouts have 0 heights making them invisible.

At this point we can show what layout_weight can do. Have a look at this, changed, piece of code and the resulting screenshot below:

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="vertical"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"><br />
    <LinearLayout<br />
        android:background="#0000FF"<br />
        android:layout_height="match_parent"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="1" /><br />
    <LinearLayout<br />
        android:background="#00FF00"<br />
        android:layout_height="match_parent"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="1" /><br />
</LinearLayout><br />

By setting a layout_weight for the two inner LinearLayouts we can tell the parent layout to divide the available space between its children. In this example, we have set the two layout_weight values of the child layouts to the same value, and they will be given an equal part of the available space.

Setting a layout_weight means that the default value of this attribute is changed from 0. Assigning a value higher than zero will split up the rest of the available space in the parent View, according to the value of each View‘s layout_weightand its ratio to the overall layout_weight specified in the current layout for this and other View elements.

To give an example: in the above example we have two LinearLayouts. If thelayout_weight of each of the two LinearLayouts is set to 1, the remaining width in the parent layout will be split equally between them (as we have seen above). If the first one has a layout_weight of 1 and the second has a layout_weight of 2, then the total weight is three and one third of the remaining space will be given to the first, and two thirds to the second, see the screenshot below.

The divide is one third and two third but, still not exactly what we want. Take a close look at the code. We want the first LinearLayout to occupy two third of the screen. Its layout_weight is set to 2. What we see is that it only occupies one third of the screen. This is the tricky bit of using layout_weight.

The problems are the circumstances it is used in. In this case it is used withlayout_height set to match_parent. In some (!) cases this keeps Android from interpreting the layout_weights correctly. In this case, a vertical layout of view elements, the solution is setting layout_heights to 0dp. With a horizontal layout of view elements layout_width should be set to 0dp.

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="vertical"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"><br />
    <LinearLayout<br />
        android:background="#0000FF"<br />
        android:layout_height="0dp"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="2" /><br />
    <LinearLayout<br />
        android:background="#00FF00"<br />
        android:layout_height="0dp"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="1" /><br />
</LinearLayout><br />

In the above examples the total weight of a View element is calculated by adding all the weights of its children. This can be overridden by adding a weightSum to the parent layout. This provides us with even more control over things. The children LinearLayouts can be specified to take their respective screen parts (two fourth and one fourth) and the parent LinearLayout will take the rest (the remaining one fourth):

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="vertical"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"<br />
    android:background="#FF0000"<br />
    android:weightSum="4"<br />
    android:padding="5dp"> <!-- to show what the parent is --><br />
    <LinearLayout<br />
        android:background="#0000FF"<br />
        android:layout_height="0dp"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="2" /><br />
    <LinearLayout<br />
        android:background="#00FF00"<br />
        android:layout_height="0dp"<br />
        android:layout_width="match_parent"<br />
        android:layout_weight="1" /><br />
</LinearLayout><br />

As a conclusion let’s have another look at a potential gotcha when usinglayout_weights. First switch to a horizontal LinearLayout. This contains twoTextViews, each with a layout_width set to 1, but with text of very different lengths in each:

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="horizontal"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"><br />
    <TextView<br />
        android:layout_height="wrap_content"<br />
        android:text="small"<br />
        android:layout_width="wrap_content"<br />
        android:layout_weight="1" /><br />
    <TextView<br />
        android:layout_height="wrap_content"<br />
        android:text="A very very long text that needs to wrap."<br />
        android:layout_width="wrap_content"<br />
        android:layout_weight="1" /><br />
</LinearLayout><br />

As with the vertical layout the result is not what we expect. This time because of the specified layout_width. When calculating the layout, Android calculates the width of the two text controls first and the remaining space is then divided between them equally. Because the second TextView is wider, due to its longer text, it appears to be taking up most of the space. As seen earlier the solution is simple, using 0dp for layout_width:

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
    android:orientation="horizontal"<br />
    android:layout_width="match_parent"<br />
    android:layout_height="match_parent"><br />
    <TextView<br />
        android:layout_height="wrap_content"<br />
        android:text="small"<br />
        android:layout_width="0dp"<br />
        android:layout_weight="1" /><br />
    <TextView<br />
        android:layout_height="wrap_content"<br />
        android:text="A very very long text that needs to wrap."<br />
        android:layout_width="0dp"<br />
        android:layout_weight="1" /><br />
</LinearLayout><br />