如何创建与图片相同的ui答案

【问题标题】：how can I create ui the same as picture如何创建与图片相同的ui
【发布时间】：2020-02-03 17:39:42
【问题描述】：

我正在开发 android 应用程序，如何创建如下图所示的用户界面

在我的 xml 下面我玩过但它没有给出预期的输出任何建议将不胜感激并欢迎提示我不知道我到底在哪里犯了错误

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardPreventCornerOverlap="false"
    card_view:cardCornerRadius="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

<androidx.constraintlayout.widget.ConstraintLayout

     android:layout_width="wrap_content"
     android:layout_height="wrap_content">


        <TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/articleSource"
            android:paddingBottom="45dp"
            android:text="22222222"
            tools:layout_editor_absoluteX="25dp"
            tools:layout_editor_absoluteY="16dp" />


    <ImageView
        android:layout_width="60dp"
        android:contentDescription="@string/bbc_sport"
        android:layout_height="60dp"/>

    <TextView
        android:id="@+id/articleSource"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="90dp"
        android:text="News blalalalal"/>




    <TextView
        android:id="@+id/articleTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="90dp"
        android:text="News blalalalal"/>
</androidx.constraintlayout.widget.ConstraintLayout
        >

</androidx.cardview.widget.CardView>

【问题讨论】：

您好，您想知道如何在列表中构建行项布局还是整个布局？
您在该约束布局中没有正确使用任何东西。当您彻底浏览这些链接并应用它们时，它将正常工作。检查这些官方文档链接：developer.android.com/training/constraint-layout codelabs.developers.google.com/codelabs/constraint-layout/…

标签： android cardview

【解决方案1】：

如果你的意思是项目列表，你也许可以这样做

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="85dp"
            android:layout_marginStart="16dp"
            android:contentDescription="bbc"
            tools:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/articleTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_toEndOf="@id/imageView"
            android:ellipsize="end"
            android:lines="3"
            android:maxLines="3"
            android:text="1\n2\n3\n" />

        <ImageView
            android:id="@+id/imageCategory"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@id/imageView"
            tools:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/articleCategory"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@id/imageCategory"
            android:gravity="center|start"
            android:text="Onefootbal" />

        <TextView
            android:id="@+id/articleTime"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_below="@id/articleTitle"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_toEndOf="@id/articleCategory"
            android:gravity="center|start"
            android:text="- 1h"
            android:textColor="@android:color/darker_gray" />
    </RelativeLayout>

</androidx.cardview.widget.CardView>

【讨论】：

【解决方案2】：

如果您正在寻找构建整个屏幕的方法，我建议您使用 Airbnb 的 Epoxy 库https://github.com/airbnb/epoxy

您基本上会将这个屏幕视为RecyclerView，它有两种类型的布局 - 没有图像的项目（作为顶部的那个）和有图像的项目（所有底部的）。

学习这个库需要一些时间，但它会非常方便，特别是如果你的布局是可重用的并且其他屏幕使用类似的项目

【讨论】：