Question

我在布局中有三个元素，两个TextView和一个ImageView。我试图实现这种行为：

图片（箭头）有9patch
图片尽可能宽
图片已设置最小宽度
左右文字随着文字越长越宽，但只能满足图片的最小宽度，然后出现新行

以下是Android Studio布局预览的几个截图，通过不同的布局获得。

我尝试过：

相对布局：以图像为中心，minWidth设置，文本设置为RightOf / toLeftOf
相对布局：图片已设置为RightOf / toLeftOf
约束布局：＆＃34;约束箭头＆＃34;从图像到文本
约束布局：＆＃34;约束箭头＆＃34;从文本到图像
线性布局：使用重量（不是真正的响应）

我一直得到的东西：

我想要的东西对我来说似乎很简单，但我无法做到。我错过了什么或者它真的不可能吗？提前谢谢。

Answer 1

使用以下代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/left_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="100dp"
        android:layout_toLeftOf="@+id/right_tv"
        android:layout_toRightOf="@+id/left_tv"
        app:srcCompat="@drawable/arrow" />

    <TextView
        android:id="@+id/right_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="TextView" />
</RelativeLayout>

用arrow

替换您的图片

Answer 2

通过创建水平链，还有另外一个通过constraintLayout完成的答案。

按照您的要求更新了

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">

    <TextView
        android:id="@+id/left_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ajn sdhbch chf nbhjgvbf vkjf vhf bvihfijnvj vfknvv ihvb jnvkjnfv kjnvfn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/imageView6"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left_tv"
        app:layout_constraintRight_toLeftOf="@+id/right_tv"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_next_button" />

    <TextView
        android:id="@+id/right_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 3

已更新：代码已更新，以获得更具响应性的布局。

现在使用两个文字视图中的maxwidth。

对于您的问题，以编程方式更新maxwidth会更好。

此代码使用线性布局方法完成。还有一个GridLayout方法以及constraintLayout方法。如果您知道正确的技术，可以通过多种布局实现。

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/left_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView is long and very long" />
    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_add_circle_green" />
    <TextView
        android:id="@+id/right_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="60dp"
        android:text="TextView is long and very long" />
</LinearLayout>

Android上的响应式布局

3 个答案: