试试这个

Question

我正在尝试创建一个列表视图，以显示TextViews的两个TextView和一个ImageView。我尝试使用Relative Layout，RelativeLayout和嵌套的LinearLayout和ConstraintLayout来设计它。一切似乎都有效，但不足以适应不同的屏幕。例如，它在移动设备上显示效果很好，但在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>

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

Answer 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或RelativeLayout

2 个答案:

试试这个