Android 上的响应式布局

Question

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

1. 图像（箭头）有 9 个补丁
2. 图像尽可能宽
3. 图片已设置最小宽度
4. 左右文本变宽，文本更长，但只是为了满足图像的 minWidth，然后出现新行

以下是来自 Android Studio 布局预览的几张截图，它们是通过不同的布局获得的。

我尝试过的：

• 相对布局：图片居中，设置最小宽度，文本设置为 toRightOf/toLeftOf
• 相对布局：图像已设置为 toRightOf/toLeftOf
• 约束布局：“约束箭头”从图像转到文本
• 约束布局：“约束箭头”从文本到图像
• 线性布局：使用权重（不是真正响应式）

我总是得到什么：

我想要的东西对我来说似乎很简单，但我做不到。我错过了什么还是真的不可能？提前谢谢你。

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

这是通过约束布局通过创建水平链完成的另一个答案。

按您的要求更新

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