Question

我正在开发新闻应用程序，我想在CardView内实现constrainlayout并实现与下图相同的ui 但是我可以在xml文件下实现我想要的我在cardview内实现了constrainlayout

<TextView
    android:id="@+id/articleTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/articleTitle"
    tools:ignore="NotSibling" />

<TextView
    android:id="@+id/articleAuthor"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:text="hhhhh"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView" />


<TextView
    android:id="@+id/articleImageView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/articleTitle" />

<TextView
    android:id="@+id/articleDescription"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:text="hhhhh"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

<ImageView
    android:id="@+id/articleImageUrl"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="@id/articleTitle"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="ContentDescription" />

在我的layouteditor 的xml ui输出下面

Answer 1

您需要实现的目标一点都不困难（尽管很难说，因为我不知道您的项目）。

根据您提供的图像，这是使用基本约束布局功能（没有链条或任何花哨的东西）的粗略近似值；同样，我不知道确切的规格和要求，但这应作为起点。

这是最终产品在Android Studio编辑器中的显示方式，我没有运行它，因此有些工件没有100％正确地呈现（例如CardView的边框），因为Android Studio的“近似值”为外观：

根布局

您提到要使用CardView，因此根目录自然是MaterialDesign Card View：

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@android:color/darker_gray"
        android:elevation="4dp">

约束布局

在卡片视图中，只有一个viewGroup：约束布局

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/innerRoot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white">

此ConstraintLayout将以平面层次结构包含Card的所有内容。它在宽度上匹配其父代（卡），但与卡本身一样，其包裹高度。

大图

我没有放置图片，但是添加了代表图片的蓝色背景。我给它设置了250dp的任意高度，但这不是强制性的，您可以更改此值；它给你一个主意。

此图片被限制在上述标题下方，并带有“热门新闻”等信息，并且它覆盖了卡的整个宽度。

        <ImageView
                android:id="@+id/bigImage"
                android:layout_width="0dp"
                android:layout_height="250dp"
                android:background="@android:color/holo_blue_dark"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/topFlameImageView" />

标题+图标

在大图的下面，似乎有一个标题（及其图标）。就像上面的“标题”一样，没有什么特别的图像和文本。 这是我没有做过的事情：在您的图片中，该图片中的文字与图标的左侧/开始对齐，甚至在图标下方；在此示例中，TextView被限制在图标的末尾/右侧，因此，如果它是多行的，它将不会“正确”地对齐其文本以使其适合图标下方。换句话说，在上图中，“更新”一词应位于红色的“闪电”图标下方，但并非如此。（无论如何，我认为这样看起来更好...但是我还没有想到如何使其看起来像您真正想要的那样）。在TextView中使用drawableStart不会产生相同的效果，因此这就是为什么我对这些“图标”使用单独的imageVIew以便更好地控制图像的位置的原因。

  <ImageView
                android:id="@+id/titleImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:contentDescription="Title"
                android:padding="8dp"
                android:src="@drawable/ic_flash_on_black_24dp"
                android:tint="@android:color/holo_red_light"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/bigImage" />

        <com.google.android.material.textview.MaterialTextView
                android:id="@+id/titleTextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Real Madrid provide Toni Kroos injury update"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/titleImageView"
                app:layout_constraintTop_toTopOf="@id/titleImageView" />

用户头像，名称和时间戳（？）

这类似于标题和开头的标题，只是您希望 timestamp （17 m）位于用户名单足足球。


        <ImageView
                android:id="@+id/userAvatarImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:contentDescription="Title"
                android:padding="8dp"
                android:src="@drawable/ic_account_circle_black_24dp"
                android:tint="@android:color/holo_green_light"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/titleTextView" />

        <com.google.android.material.textview.MaterialTextView
                android:id="@+id/userNameTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Onefootball"
                android:textColor="@android:color/black"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="@id/userAvatarImageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toEndOf="@id/titleImageView"
                app:layout_constraintTop_toTopOf="@id/userAvatarImageView" />

        <com.google.android.material.textview.MaterialTextView
                android:id="@+id/timestampTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:text="- 17m"
                android:textColor="@android:color/darker_gray"
                android:textSize="14sp"
                app:layout_constraintBaseline_toBaselineOf="@id/userNameTextView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toEndOf="@id/userNameTextView" />

一个图像，一个文本，另一个文本；没什么幻想。

关闭标签

最后但并非最不重要的是，您必须关闭ConstraintLayout 和 CardView ...

    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

仅此而已。

最终评论|结论

在此组合的开头，我告诉您 StackOverflow 不是免费的编码站点；它是免费的。这仍然是正确的，我已经做出了努力，因为似乎您正在学习Android，并且我喜欢帮助他人，但是请记住，通常，如果您先尝试并可以逐步提出20个不同的小问题。

我本可以尝试一点点解决这个问题（就像我在上面介绍的那样），并且当某些事情表现不如预期时，在这里问“嘿，看看这个小事情，为什么不这样做”会更容易些。 XYZ吗？？？”而不是尝试发布整个内容，并希望有人来为您解决它，这样您就可以复制粘贴解决方案而忘了它。

我真的希望您能从中学到东西，而不仅仅是复制/粘贴它。

祝您的项目好运。

我如何实现与图像相同的ui

1 个答案:

根布局

约束布局

热门新闻标题，图标和副文本：

大图

标题+图标

用户头像，名称和时间戳（？）

关闭标签

最终评论|结论