时间戳

首页 > 解决方案 > android，如何垂直居中对齐RelativeLayout的子项

android - android，如何垂直居中对齐RelativeLayout的子项

问题描述

有一个相对布局，它有左右两个子容器，右侧可能更高/或短高度，左侧容器有一些子项，其中一些可能动态可见或不可见。

像左侧这样的东西有垂直的 AAA、bbb、CCC 等。它们应该垂直分布可用空间。所以当bbb被隐藏时，剩下的AAA、CCC上下会有更多的空间。

-------------------  ------------------------
|  AAA            |  |                      |
|                 |  |                      |
|  bbb            |  |      Right side      |
|                 |  |                      |
|  CCC            |  |                      |
-------------------  ------------------------

bbb is visibility = "gone"

-------------------  ------------------------
|                 |  |                      |
|   AAA           |  |                      |
|                 |  |      Right side      |
|   CCC           |  |                      |
|                 |  |                      |
-------------------  ------------------------

更改为垂直 LinearLayout 以包裹左侧，如果左侧短于右侧，则在 AAA 上方和 CCC 下方添加间隔器将起作用，但如果左侧高于右侧则不起作用。

当左侧有更多内容并且高度高于右侧时，应该是这样的：

-------------------  ========================
|  AAA            |  |----------------------|
|                 |  |                      |
|  ddd            |  |                      |
|  bbb            |  |      Right side      |
|  eee               |                      |
|                 |  |                      |
|  CCC            |  |----------------------|
-------------------  ========================

具有如下布局，但是当左侧的某些子视图被隐藏时它不会调整，例如：

在此处输入图像描述

<RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >


        <!-- "@id/asset_container" is at right side, has a lot children views, not showing here -->
        <FrameLayout
            android:id="@id/asset_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="6dp"

            tools:visibility="visible"

            tools:layout_width="360dp"
            tools:layout_height="120dp"
            tools:background="#ff0000"
        >
        </FrameLayout>

        <!-- left side -->
        <TextView
            android:id="@id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="5dp"
            android:layout_toStartOf="@id/asset_container"
            android:ellipsize="end"
            android:maxLines="2"
            tools:text="ad title a little bit long, for testing what the title will look like wrap in second line"
            />

        <!-- "@id/wrapper" has a lot children views, not showing here -->
        <RelativeLayout
            android:id="@id/wrapper"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentStart="true"
            android:layout_marginEnd="8dp"
            android:layout_toStartOf="@id/asset_container"
            android:visibility="gone"
            android:layout_below="@id/title"
            android:layout_above="@+id/text"

            tools:visibility="gone"

            android:background="#ffff00"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text text"
                />
            <!-- -->
            <!-- -->
        </RelativeLayout>

        <TextView
            android:id="@id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/asset_container"
            android:layout_marginBottom="10dp"
            android:singleLine="true"
            android:text="test"
            />

        <ImageView
            android:id="@id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignTop="@id/text"
            android:layout_alignBottom="@id/text"
            android:layout_toEndOf="@id/text"
            android:src="@drawable/icon"

            android:layout_centerVertical="true"
            android:layout_gravity="center"
            />

        <TextView
            android:id="@id/name"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignTop="@id/text"
            android:layout_alignBottom="@id/text"
            android:layout_toEndOf="@id/icon"
            android:layout_toStartOf="@id/option"
            android:layout_gravity="center_horizontal"
            android:layout_centerHorizontal="true"
            android:gravity="center_vertical"
            tools:text="very long long long name"
            android:singleLine="true"
            android:ellipsize="end"
            />

        <ImageView
            android:id="@+id/optin"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginEnd="3dp"
            android:background="?attr/selectableItemBackground"
            android:src="@drawable/ic_more_vert_black_24dp"
            android:layout_centerVertical="true"
            android:layout_gravity="center"
            tools:visibility="visible"
            android:layout_toStartOf="@id/asset_container"
            android:layout_alignTop="@id/text"
            android:layout_alignBottom="@id/text"
            />
    </RelativeLayout>

标签： androidandroid-studiovertical-alignmentandroid-relativelayout

解决方案

让它工作，但希望有更好的方法。

<RelativeLayout>
   <!-- left side -->
   <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_toStartOf="@id/right_side_container"
            android:orientation="vertical">

            <Space
                android:layout_width="1dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                />

            <!-- item AAA --->
            <!-- item ddd --->
            <!-- item bbb --->
            <!-- item eee --->
            <!-- item ccc --->


            <Space
                android:layout_width="1dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                />
   <LinearLayout >

   <!-- right side -->
   <FrameLayout
            android:id="@id/right_side_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            tools:visibility="visible"
            >
        <!-- children items -->
   </FrameLayout>

</RelativeLayout>

推荐阅读