簡體   English   中英

android,如何垂直居中對齊RelativeLayout的子項

[英]android, how to vertical center align children items of the 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>

讓它工作,但希望有更好的方法。

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM