在RelativeLayout中控制嵌套的ViewGroup大小:使用wrap_content仍然匹配parent

时间:2016-09-12 22:07:42

标签: android android-layout android-relativelayout android-percentrelativelayout

我有一个小部件,它使用PercentRelativeLayout将4个ImageViews放在其中。我需要百分比功能,因为我将图像沿着盒子的四边放置但具有不同的相对尺寸:顶部的孩子占据了高度的约60%。我已经预览了这个布局,它工作得很好,没问题。对于w和h,这个小部件执行wrap_content(我不在乎这么多,但是h很重要,正如您将看到的那样。)

我需要在更大的布局中使用此小部件。现在我有另一个父亲RelativeLayout。这个布局应该包含顶部描述的小部件,然后是它下面的一些按钮,以大多数线性方式:|--(group widget)--(text button)--(image button)—-|,其中“|”表示它应该贴合父级。 (这是一个亲戚的原因是我想在右下角浮动另一个视图。)

所以目标是:这个父布局应该调整到某个预定义的大小(基本上是屏幕,虽然在我的完整代码中也有更多高于这个级别 - 但我的问题发生只是在这个级别隔离),2按钮应该计算它们的自然大小并使用它,然后顶部的PercentRelativeLayout应该采用“剩余”高度并将其用于其子项%大小。

实际上,正如屏幕截图所示(来自布局预览工具) - PercentRelativeLayout吸收了所有大小。

简而言之,您是否可以将相对布局中的一系列视图拼接在一起并拥有一个可变子项?在iOS中,我会将第一个视图固定到父级顶部,将最后一个视图固定到父级底部,以及它上面的所有内容,按钮具有其固有大小,然后我的神秘小部件会吸收其余部分。

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:id="@+id/matchPlay">

    <ImageView
        android:src="@drawable/model_2"
        tools:background="#954f47"
        app:layout_heightPercent="59%"
        app:layout_aspectRatio="100%"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView1"
        android:scaleType="centerInside" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#ff0000"
        app:layout_heightPercent="20%"
        app:layout_aspectRatio="100%"
        app:layout_marginTopPercent="2%"
        android:layout_below="@id/avatarView1"
        android:layout_alignParentLeft="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView2"
        android:scaleType="centerCrop" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#00ff00"
        app:layout_heightPercent="20%"
        app:layout_aspectRatio="100%"
        app:layout_marginTopPercent="2%"
        android:layout_below="@id/avatarView1"
        android:layout_alignParentRight="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView3"
        android:scaleType="centerCrop" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#0000ff"
        app:layout_heightPercent="22%"
        app:layout_aspectRatio="100%"
        android:layout_below="@id/avatarView2"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView4"
        android:scaleType="centerCrop" />

</android.support.percent.PercentRelativeLayout>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/matchplay_add_shout"
    android:id="@+id/shoutButton"
    android:enabled="false"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/matchPlay" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/submitButton"
    android:src="@drawable/matchplay_submit"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/shoutButton"
    android:minWidth="50dp"
    android:contentDescription="@string/matchplay_send_contentdesc" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/passButton"
    android:src="@drawable/matchplay_pass"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:contentDescription="@string/matchplay_pass_contentdesc" />

编辑:我更新了此代码,不使用alignParentBottom,认为这是关键问题;我改为使用alignParentTop。没变。还尝试在根处使用垂直LinearLayout。 :(

enter image description here 顺便说一下,图像组小部件将是一个PercentRelativeLayout子类,所以如果我需要通过一些覆盖来实现一些魔法,我可以这样做。

1 个答案:

答案 0 :(得分:0)

我学到了一些关于RelativeLayout野兽的事情:

  • 儿童的大小和位置似乎齐头并进。没有尝试与位置分开计算尺寸。
  • RelativeLayout似乎没有进行第二次测量。它非常贪婪:当它到达一个给定的孩子决定把它放在哪里时,它就会做出决定。也许有一些情况确实如此,我不确定,但他们可能并不常见。
  • 最后,把它们联系在一起的东西:你如何指定关系很重要,因为RL计算宽度和高度的依赖顺序;因为依赖的东西首先是大小,使用上面的贪婪属性,如果那个孩子没有固定的大小,它将吸收RL提供的任何剩余空间。因此,由于我安排的内容取决于上面的内容而matchPlay是根,因此matchPlay的大小是第一位的。

因此,我只是将依赖项向后移动,将事物固定在底部,因此matchPlay是依赖关系链中的最后一个。下面是奇怪但功能正常的XML。非常奇怪的实现方面,并且文档没有说明相对layout_ attrs中缺乏关联性。 (显然它应该,因为它可以极大地影响你如何使用相对的attrs!)

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/matchplay_add_shout"
    android:id="@+id/shoutButton"
    android:layout_above="@+id/submitButton"
    android:layout_marginTop="15dp"
    android:layout_centerHorizontal="true"
    android:enabled="false" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/submitButton"
    android:src="@drawable/matchplay_submit"
    android:minWidth="50dp"
    android:contentDescription="@string/matchplay_send_contentdesc" />

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/shoutButton"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:id="@+id/matchPlay">

    <ImageView
        android:src="@drawable/model_2"
        tools:background="#954f47"
        app:layout_heightPercent="60%"
        app:layout_aspectRatio="100%"
        app:layout_marginBottomPercent="2%"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView1"
        android:scaleType="centerInside" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#ff0000"
        app:layout_heightPercent="23%"
        app:layout_aspectRatio="100%"
        android:layout_below="@id/avatarView1"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView2"
        android:scaleType="centerCrop" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#00ff00"
        app:layout_heightPercent="23%"
        app:layout_aspectRatio="100%"
        android:layout_below="@id/avatarView1"
        android:layout_alignParentRight="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView3"
        android:scaleType="centerCrop" />
    <ImageView
        android:src="@drawable/model_2"
        tools:background="#0000ff"
        app:layout_heightPercent="23%"
        app:layout_aspectRatio="100%"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="false"
        android:id="@+id/avatarView4"
        android:scaleType="centerCrop" />

</android.support.percent.PercentRelativeLayout>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/passButton"
        android:src="@drawable/matchplay_pass"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:contentDescription="@string/matchplay_pass_contentdesc" />