使布局适应不断变化的 imageView 宽度

Question

我有一个布局，其中一个元素动态改变其大小（红色 imageView）。问题是下方的视图消失或未居中对齐。

前两张图片显示了它的外观：

下面的 LinearLayout 设置为 match_parent:

下面的 LinearLayout 设置为 wrap_content:

如果 LinearLayout layout:width 属性错误，它是这样的：

这里是 xml 代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:id="@+id/imageView"
            android:layout_gravity="center_horizontal"
            android:background="#ffff0000" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal">

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:id="@+id/imageView2"
                android:background="#ff0000ff" />

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:id="@+id/imageView3"
                android:background="#ff00ff00" />

            <Space
                android:layout_width="20px"
                android:layout_height="20px"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

如何调整布局，使绿色和蓝色元素始终居中，space 在红色 imageView 大时扩展，但在红色 imageView 大时不切断小？

我更喜欢 xml 解决方案，因为这只是一个简单的示例，否则以编程方式执行此操作可能会变得复杂。

Answer 1

是的，你可以玩 LinearLayout 和权重，比如

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0dp"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="10dp">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_gravity="center"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000ff" />

        </FrameLayout>

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="10dp">

            <ImageView
                android:layout_gravity="center"
                android:id="@+id/imageView3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff00ff00" />

        </FrameLayout>

    </LinearLayout>

Answer 2

我原来的回答没有达到 "and the space expands when the red imageView is big" 的要求。

您可以使用 GridLayout 执行此操作 - layout_columnWeight 仅适用于 21？或者其他的东西。所以你可能想要使用 v7.gridlayout 支持库，但它看起来像这样：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="400dp"
        android:layout_height="200dp"
        android:layout_columnSpan="5"
        android:layout_gravity="center"
        android:layout_row="0"
        android:background="#ffff0000"
        />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="0"
        android:layout_row="1"
        android:layout_columnWeight="1"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_column="1"
        android:layout_row="1"
        android:background="#ff0000ff" />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:layout_row="1" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_column="3"
        android:layout_row="1"
        android:background="#ff00ff0a" />

    <Space
        android:layout_width="20px"
        android:layout_height="20px"
        android:layout_column="4"
        android:layout_columnWeight="1"
        android:layout_row="1" />

</GridLayout>
</FrameLayout>

使布局适应不断变化的 imageView 宽度

Adapt layout to changing width of imageView

android

android-layout

android-linearlayout