LinearLayout设置 weight 无法绘制的问题

项目地址:ChildLayout

一. 问题起因：

新项目中首页有这么一个需求：看布局：



主要就是“大牌专场”这个栏目的布局问题，呈现一个，

左——右上——右下

的形式，因为不能像 iOS 那样直接根据 UED 给的标注来写死布局尺寸，Android 混乱的分辨率决定了这个布局需要采用

android:layout_height="wrap_content"

的形式来决定它的高。

二. 解决方法1:使用 LinearLayout——失败

要画这个布局很简单的，比例都是确定的，那就能直接上

LinearLayout

嘛，为水平：

android:orientation="horizontal"

。 左边使用

ImageView

设置

weight="1"

， 右边使用

LinearLayout

设置

weight="1"

以及垂直：

android:orientation="vertical"

，里面包裹两个

ImageView

同时也设置它的

weight="1"

就行了，实际代码如下：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="@+id/iv_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0.5dp"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="2">
<ImageView
android:id="@+id/iv_right_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test2" />
<ImageView
android:id="@+id/iv_right_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="0.5dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test2" />
</LinearLayout>
</LinearLayout>

根据上面的代码，得到的布局就是

图1

中的

LinearLayout布局

在 Android Studio 中的

Design

显示效果了。但是我们的需求不是直接从

res

中拿取图片文件，而是从服务器中获取到图片，然后显示到界面上的，然后从服务器中获取图片这个需求是异步进行的，界面肯定先画好的，然后再绘到 UI 上的，然后它会出现

图2

的中

1

的这种情况，即：右边的两张图片无法显示出来了。实际原因就是，由于我们设置的

weight

属性，系统无法计算出它是应该根据什么条件来画，因为右边两张的图片的高无法再进行计算了。（抱歉，这里我解释不了非常清楚）

三. 解决方法2:使用 GridLayout——成功

为了这个问题，我花了一个下午来解决，在各种重写 LinearLayout 来计算高度再去绘制都无效的情况下，我换了一个角度：使用

GridLayout

来画，它是 Android4.0开始用的，刚好，我们这个新项目决定不再兼容 Android4.0以下的系统了，这样我们就可以使用更多酷炫的效果和 API 了，

GridLayout

有一个很重要的说明：

"GridLayout does not provide support for the principle of weight,
as defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ...
For complete control over excess space distribution in a row or column;
use a LinearLayout subview to hold the components in the associated cell group."`

GridLayout

的布局如下：

<GridLayout
android:id="@+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="2">

<ImageView
android:id="@+id/grid_iv_left"
android:layout_column="0"
android:layout_gravity="start"
android:layout_rowSpan="2"
android:scaleType="centerCrop"
android:src="@drawable/test1" />

<ImageView
android:id="@+id/grid_iv_right_top"
android:layout_column="1"
android:layout_gravity="end|top"
android:scaleType="centerCrop"
android:src="@drawable/test2" />

<ImageView
android:id="@+id/grid_iv_right_bottom"
android:layout_column="1"
android:layout_gravity="end|bottom"
android:layout_marginTop="0.5dp"
android:scaleType="centerCrop"
android:src="@drawable/test2" />
</GridLayout>

但是！！看

图1

中的

GridLayout布局

项，很明显，右边的两张图片被挤出了画面，因为该布局是根据控件的实际大小来绘制的，而不是说你设置了

android:layout_width="match_parent"

就会根据屏幕尺寸来的。so…万能的 stackoverflow 给我们提供了解决方案:链接在此 根据第二个答案，我得到了一个解决方案，在 java 代码中加入如下方法：

private void setLayoutTODO(GridLayout gridLayoutParent, View child){
GridLayout.LayoutParams params = (GridLayout.LayoutParams) child.getLayoutParams();
params.width = (gridLayoutParent.getWidth()/gridLayoutParent.getColumnCount())
-params.rightMargin - params.leftMargin;
child.setLayoutParams(params);
}

这个方法在加载图片方法之后调用即可，不需要等到图片回调成功了再调的，实际效果就是

图2

中的

2

了

四. 解决方法3:使用 RelativeLayout——成功

我们老大，在看到我这么艰辛的折腾一个这么 easy 的问题之后，深深的鄙视了我一番之后，回到了他自己的座位上，然后5分钟后丢给了我下面这段代码：

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/linear_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffe0e0e0"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="@+id/rel_iv_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test1" />
</LinearLayout>
<View
android:id="@+id/interval"
android:layout_width="1px"
android:layout_height="1px"
android:layout_centerHorizontal="true" />
<LinearLayout
android:id="@+id/linear_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/linear_left"
android:layout_alignTop="@id/linear_left"
android:layout_marginLeft="0.5dp"
android:layout_toRightOf="@id/interval"
android:orientation="vertical"
android:weightSum="2">
<ImageView
android:id="@+id/rel_iv_right_top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test2" />
<ImageView
android:id="@+id/rel_iv_right_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="0.5dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/test2" />
</LinearLayout>
</RelativeLayout>

然后。见证奇迹的时刻到了，就是

图3

中的

3

了…item 的高度会根据左边图片的大小来实际变化的。。啊。。我已经深深的捂脸跑走了。。。

代码很简单，使用

RelativeLayout

来布局，两个关键点，左图使用

LinearLayout

设置

android:weightSum="2"

这样，里面的

ImageView

就只占屏幕的左半部分了，中间使用了一个像素点的

View

，它有一个属性

android:layout_centerHorizontal="true"

，这样右边的

LinearLayout

就有了一个布局的点了，然后右边再去设置

weight="1"

就 OK 了，很 easy 有木有，嗯…没想到呢…

我是图1: 注:该图是 Android Studio 在 Design 中显示的布局预览，而不是实际的应用图片，里面的显示都是 res/drawble 下的测试图片

我是图2:

我是图3: