android layout_weight详解

The popular Android OS uses layouts to display Views on the screen. A Viewis a widget that has an appearance on the screen. Examples of widgets are radio buttons, labels, edit boxes, etc.

The appearance and sequence ofViews can be ordered and one of the ways to do that is through the use of theLayoutParamlayout_weight. This is an often overlooked, extremely powerful, but also tricky feature of layouts.

The Android developers website (developer.android.com) defineslayout_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 thelayout_heightof the firstLinearLayoutis set to match_parent causing it to take up all available space and leaving no room for the secondLinearLayout. Changing thelayout_heighttowrap_contentwill not help because theLinearLayouts have 0 heights making them invisible.

At this point we can show whatlayout_weightcan 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 alayout_weightfor the two innerLinearLayoutswe can tell the parent layout to divide the available space between its children. In this example, we have set the twolayout_weightvalues of the child layouts to the same value, and they will be given an equal part of the available space.

Setting alayout_weightmeans 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 parentView, according to the value of eachView‘slayout_weightand its ratio to the overalllayout_weightspecified in the current layout for this and otherViewelements.

To give an example: in the above example we have twoLinearLayouts. If thelayout_weightof each of the twoLinearLayoutsis 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 alayout_weightof 1 and the second has alayout_weightof 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,stillnot exactly what we want. Take a close look at the code. We want the firstLinearLayoutto occupy two third of the screen. Itslayout_weightis set to 2. What we see is that it only occupies one third of the screen. This is the tricky bit of usinglayout_weight.

The problems are the circumstances it is used in. In this case it is used withlayout_heightset tomatch_parent. In some (!) cases this keeps Android from interpreting thelayout_weights correctly. In this case, a vertical layout of view elements, the solution is settinglayout_heights to0dp. With a horizontal layout of view elementslayout_widthshould be set to0dp.

<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 aViewelement is calculated by adding all the weights of its children. This can be overridden by adding aweightSumto the parent layout. This provides us with even more control over things. The childrenLinearLayouts can be specified to take their respective screen parts (two fourth and one fourth) and the parentLinearLayoutwill 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 horizontalLinearLayout. This contains twoTextViews, each with alayout_widthset 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 />

原文地址：http://www.chess-ix.com/2012/01/17/the-use-of-layout_weight-with-android-layouts/

官网地址：http://developer.android.com/guide/topics/ui/layout/linear.html

原文详细介绍了关于layout_weight的神奇魅力，本人喜欢原文就没有进行翻译，如果看了又不懂的可以互相讨论一下

更多相关文章

随机推荐