问题
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" />
below my xml ui output from layouteditor
回答1:
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.
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:
Root Layout
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">
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">
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.
Top News Header, Icon, and subtext:
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" />
Notice it's just an ImageView, and two TextViews, one below the other, all constrained together.
Big Image
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" />
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" />
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.
Closing the tags
Last but not least, you have to close the ConstraintLayout and the CardView...
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
And that's all.
Final Comment | Conclusion
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.
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.
Good luck with your project.
来源：https://stackoverflow.com/questions/58269105/how-can-i-implement-ui-the-same-as-on-the-image