我如何实现与图像相同的ui [英] how can I implement ui the same as on the image

问题描述

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

I am developing news app and I want to implement constrainlayout inside CardView and achieve ui the same as image below but I could achieve what I want below my xml file where I have implemented constrainlayout inside cardview

<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" />

在我的xml ui输出下面，来自layouteditor

below my xml ui output from layouteditor

推荐答案

您需要实现的目标一点也不困难(尽管很难说，因为我不知道您的项目).

What you need to achieve is not difficult at all (although, it's hard to tell because I don't know your project).

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

Based upon the image you provided, here's a rough approximation using basic Constraint Layout features (no Chains, or anything too fancy); again, I don't know the exact specs and requirements, but this should serve as a starting point.

这是最终产品在Android Studio编辑器中的显示方式，我没有运行它，所以有些工件没有100％正确地呈现(例如CardView的边框)，因为Android Studio的近似值"为外观如何:

Here's how the final product looks in the Android Studio Editor, I didn't run this, so there are some artifacts not 100% correctly rendered (like the borders of the CardView), because Android Studio does an "approximation" of how it looks:

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

You mentioned you wanted a CardView, so the root is naturally a 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:约束布局

Constraint Layout

Inside the card view, there's one single viewGroup: a Constraint Layout

    <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的所有内容.它在宽度上与其父代(卡)匹配，但与卡本身一样，它也包裹了其高度.

This ConstraintLayout is going to contain all the Card's contents in a flat hierarchy. It matches its parent (the card) in width, but it wraps its height, just like the Card itself.

有多种方法可以实现此目的，并且根据您的要求，您可能需要使用垂直链条，限制宽度等，以避免文本彼此重叠和/或启用/禁用多线路支持或省略号等.无法从您的静态图片中推断出这些信息.

THere are various ways to achieve this, and depending upon your requirements, you may want to play with vertical chains, constraining the width, etc., to avoid text from overlapping each other, and/or to enable/disable multi-line support, or ellipsis, etc. None of this information can be inferred from your static image.

 <ImageView
                android:id="@+id/topFlameImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="Header 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_toTopOf="parent" />

        <com.google.android.material.textview.MaterialTextView
                android:id="@+id/topTitleTextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Top News"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/topFlameImageView"
                app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.textview.MaterialTextView
                android:id="@+id/bottomTitleTextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Editor on duty: Dan"
                android:textColor="@android:color/darker_gray"
                app:layout_constraintBottom_toBottomOf="@id/topFlameImageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/topFlameImageView"
                app:layout_constraintTop_toBottomOf="@id/topTitleTextView" />

请注意，这只是一个ImageView，两个TextView(一个在另一个下面)都被限制在一起.

Notice it's just an ImageView, and two TextViews, one below the other, all constrained together.

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

I didn't put an image, but did add a blue background representing the image. I gave it an arbitrary height of 250dp, but this is not mandatory, you may change this; it gives you an idea.

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

This image is constrained to be below the above header with "Top News", etc, and it spans the whole width of the card.

        <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被限制在图标的末尾/右侧，因此，如果它是多行，它将不会正确"地对齐其文本以使其适合图标下方.换句话说，在上图中，单词"Update"应该在红色的"lightning bolt"图标下方，但不是. (无论如何，我认为这样看起来更好...但是我还没有想到如何使它看起来像您真正想要的那样).在TextView中使用drawableStart不会产生相同的效果，因此这就是为什么我对这些图标"使用单独的imageVIew以便更好地控制图像的位置的原因.

Title + Icon

Below the big image, there's what appears to be a Title (and its icon). Nothing special, just like the "header" above, an image and a text. Here is where there's something that I didn't do: In your image, the text in this, aligns to the left/start, even below the icon; in this example, the TextView is constrained to the end/right of the icon, and so if it's multi-line, it will not "properly" justify its text to fit below the icon. In other words, in the image above, the word "Update" should be below the red "lightning bolt" icon, but it's not. (I think it looks better this way anyway... but I haven't thought how to make it look like what you exactly want). Using drawableStart in the TextView, doesn't give the same effect, so that's why I used a separate imageVIew for these "icons", to better control the image's placement.

  <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)位于用户名单足足球.

User Avatar, Name, and Timestamp (?)

This is similar to the Title, and the Header at the beginning, except you want the timestamp (17 m) to be at the end/right of what appears to be the user name Onefootball.

        <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" />

一个图像，一个文本，另一个文本；没什么花哨的.

One image, one Text, another text; nothing fancy.

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

Last but not least, you have to close the ConstraintLayout and the CardView...

    </androidx.constraintlayout.widget.ConstraintLayout>

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

仅此而已.

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

At the beginning of this combo, I told you StackOverflow is not a Free Coding Site; this is still true, and I've made this effort because it seems like you are learning Android and I love helping people, but keep in mind that in general, it's much much better if you try firsts and come up with 20 different small questions as you go through it.

我本来会尝试一点点解决这个问题(如我在上面介绍的那样)，并且当某些行为与预期不符时，在这里问嘿，看看这个小问题，为什么不这样做"会更容易些.它是XYZ吗???"而不是尝试发布整个内容，并希望有人来为您解决它，这样您就可以复制粘贴解决方案而忘了它.

I would have personally tried to solve this in small bits (like I presented it above) and when something didn't behave as expected, it would have been easier to ask here "Hey look at this small thing, why doesn't it do X Y Z????" than to try to post the whole thing, and hope someone comes around and fixes it for you so you can copy paste the solution and forget about it.

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

I really hope you learn from this and don't just copy/paste it.

祝您的项目好运.

这篇关于我如何实现与图像相同的ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！