【问题标题】：How to build a responsive ListView using ConstraintLayout or RelativeLayout如何使用 ConstraintLayout 或 RelativeLayout 构建响应式 ListView
【发布时间】：2017-11-02 07:01:20
【问题描述】：

我正在尝试创建一个列表视图来显示两个 TextView 和一个 ImageView 右侧的 TextView。我曾尝试仅使用相对布局、带有嵌套线性布局和约束布局的相对布局来设计它。一切似乎都有效，但响应速度不足以适应不同的屏幕。例如，它在移动设备上显示效果很好，但在 Android TV 模拟器上却不够好。
我不同意如何修改以下布局以在右侧显示图像并在左侧显示两个 TextView 并尝试适应屏幕，但让图像彼此对齐。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/padding"
    android:paddingRight="@dimen/padding">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_video_title"
        android:layout_width="179dp"
        android:layout_height="117dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="16dp"
        android:paddingEnd="@dimen/padding"
        android:paddingLeft="@dimen/padding"
        android:paddingRight="@dimen/padding"
        android:paddingStart="@dimen/padding"
        android:text=""
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_video_descr"
        android:layout_width="184dp"
        android:layout_height="239dp"
        android:layout_below="@+id/tv_video_title"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:paddingEnd="@dimen/padding"
        android:paddingLeft="@dimen/padding"
        android:paddingRight="@dimen/padding"
        android:paddingStart="@dimen/padding"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_video_title"
        app:layout_constraintVertical_bias="0.044" />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/iv_video_thumbnail"
        android:layout_width="163dp"
        android:layout_height="381dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_toEndOf="@+id/tv_video_descr"
        android:layout_toRightOf="@+id/tv_video_descr"
        android:contentDescription="@string/video_thumbnail_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/video" />
</android.support.constraint.ConstraintLayout>

【问题讨论】：

对于电视，您应该始终创建一个单独的布局
view 想要显示的内容
@VishalYadav 这在我的 ArrayAdapter 中用作 ListView 项。

标签： android android-linearlayout android-relativelayout android-constraintlayout

【解决方案1】：

试试这个

根据你的说法是这样显示的

<?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="match_parent">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_video_title"
        android:layout_width="179dp"
        android:layout_height="117dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="16dp"
        android:text=""
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/iv_video_thumbnail"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="8dp" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_video_descr"
        android:layout_width="184dp"
        android:layout_height="239dp"
        android:layout_below="@+id/tv_video_title"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_video_title"
        app:layout_constraintVertical_bias="0.044"
        app:layout_constraintRight_toLeftOf="@+id/iv_video_thumbnail"
        android:layout_marginRight="8dp" />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/iv_video_thumbnail"
        android:layout_width="163dp"
        android:layout_height="381dp"
        app:layout_constraintLeft_toRightOf="@+id/tv_video_descr"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_toEndOf="@+id/tv_video_descr"
        android:layout_toRightOf="@+id/tv_video_descr"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="0dp"
        app:layout_constraintVertical_bias="0.047" />
    
</android.support.constraint.ConstraintLayout>

【讨论】：

您应该使用 Ctrl+K 来正确格式化源代码。

【解决方案2】：

这是你更新的 xml 文件，我使用线性布局并分配布局权重，因此它根据可用宽度覆盖所有屏幕尺寸

<?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="match_parent"
    android:paddingLeft="@dimen/padding"
    android:paddingRight="@dimen/padding">

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

        <android.support.v7.widget.AppCompatTextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/tv_video_title"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="16dp"
            android:paddingEnd="@dimen/padding"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingStart="@dimen/padding"
            android:text=""
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_video_descr"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_below="@+id/tv_video_title"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:paddingEnd="@dimen/padding"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingStart="@dimen/padding"
            android:text=""
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_video_title"
            app:layout_constraintVertical_bias="0.044" />

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_video_thumbnail"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:layout_toEndOf="@+id/tv_video_descr"
            android:layout_toRightOf="@+id/tv_video_descr"
            android:contentDescription="@string/video_thumbnail_image"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@drawable/video" />

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

【讨论】：

它会起作用的朋友让我知道如果你遇到一些问题也不要忘记将我的帖子标记为答案如果它适合你:)
ConstraintLayout 内的LinearLayout？使用 ConstraintLayout 的主要目标是扁平化布局并避免使用嵌套布局Understanding the performance benefits of ConstraintLayout
如果你想在 ConstraintLayout 中使用权重，你必须考虑使用加权“spread”或“spread_inside”链Control linear groups with a chain。