Question

我想要以水平线性布局显示TextView和方形ImageView。每个应该占父视图宽度的一半，高度应该适合内容（即图像）。文本应垂直居中。

附加约束条件是图片不应超出给定的maxWidth（= maxHeight），并且应该为TextView提供超出的宽度。显然，这与上面的50/50规则相冲突。有没有办法优先考虑约束，即允许图像占用一半的空间，除非它超过给定的大小？

这些是我尝试过的布局：

第一个很好地将左侧拉伸到可用空间。但是图像占用宽度的一半以上，因为未指定layout_weight（如下图所示）。

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Some text."/>
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="200dp"
        android:adjustViewBounds="true"
        android:src="@drawable/image" />
</LinearLayout>

当我向layout_weight添加ImageView时，它总是占用宽度的一半而忽略maxWidth（见下图）。

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:maxWidth="200dp"
        android:adjustViewBounds="true"
        android:src="@drawable/image" />

将ImageView包含在另一个LinearLayout中会再次启用maxWidth，但封闭的LinearLayout仍会占用一半的可用空间（参见下图）。

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxWidth="200dp"
            android:adjustViewBounds="true"
            android:src="@drawable/image" />
    </LinearLayout>

我为similar scenarios找到的另一个选项是使用带有不可见视图的RelativeLayout作为中心分隔符，但是将分区锁定为50/50（或放置分隔符的任何位置）。

Answer 1

好的，继续前进并发布我创建的xml，它非常简单，它可以满足您的大部分条件。我遇到的一件事就是每个视图占用父视图宽度的一半的部分。希望这仍然可以帮助你。

sample_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:background="@android:color/darker_gray">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/img_sample"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="2dp"
        android:layout_toLeftOf="@id/img_sample"
        android:background="@color/colorPrimary"
        android:gravity="center_vertical"
        android:text="Some text." />

    <ImageView
        android:id="@id/img_sample"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="2dp"
        android:adjustViewBounds="true"
        android:maxWidth="200dp"
        android:src="@drawable/sample_img" />

</RelativeLayout>

以下是截图示例：

如果您想知道如何对每个的一半 ，请在此处进行评论，了解它以备将来使用可能会很好。：）

PS：您是否考虑过以编程方式执行每个 事件的 一半？比如检查LayoutParams然后动态设置weightSum和layout_weight s。

从此link
中检索的示例图像

Answer 2

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@color/blue"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:layout_toStartOf="@id/imageView"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Some text. " />
</RelativeLayout>

Answer 3

在性能方面，它不是一个完美的解决方案。但是你可以通过使用FrameLayout和ImageView来实现它。

以下是输出：

<强> Layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/textGray"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/skyBlue">

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

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/white">

                <ImageView
                    android:id="@+id/imageView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxWidth="200dp"
                    android:src="@drawable/ic_settings"
                    android:visibility="invisible" />

                <TextView
                    android:id="@+id/TextView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:text="!" />
            </FrameLayout>

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:maxWidth="200dp"
                android:src="@drawable/ic_settings" />
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

为了实现欲望行为，您必须在此布局中为两个图像视图设置相同的图像。其中一个是隐形的，它只是帮助制作具有相同宽度和高度的父级，这将导致我们创建具有相同尺寸的TextView。
注意： 如果您想更改textView对齐方式，可以使用layout_gravity或gravity。

灵活的水平布局，带有`layout_weight`和`maxWidth`

3 个答案: