在右上角放置标签

Question

我正在尝试将 "New" 标签放入卡片视图右侧的布局中：

我在 Android Studio 中没有得到任何预览：显示布局但未显示内容可能是因为存在避免显示文本的约束。

你看到我的布局有什么错误吗？

代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:clickable="true"
            app:cardElevation="2dp"
            app:cardCornerRadius="4dp"
            >

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <ImageView
                    android:id="@+id/img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="16dp"
                    android:layout_marginTop="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginBottom="16dp"
                    android:contentDescription="@string/img_desc"
                    android:src="@mipmap/ic_launcher"
                     />

            <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@+id/img"
                    android:layout_centerVertical="true">

                <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                    <TextView
                            android:id="@+id/text1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="16dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:textColor="@color/cardview_head"
                            android:textSize="16sp"
                            android:textStyle="bold"
                            tools:text="test" />

                    <TextView
                            android:id="@+id/labelNew"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/new_label"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:paddingLeft="6dp"
                            android:paddingRight="6dp"
                            android:text="@string/new_label"
                            android:textColor="@color/white"
                            android:textSize="12sp"
                            tools:text="New" />

                </LinearLayout>

                <TextView
                        android:id="@+id/text2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="16dp"
                        android:ellipsize="end"
                        android:maxLines="1"
                        android:textColor="@color/cardview_subhead"
                        tools:text="test" />

            </LinearLayout>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

Answer 1

使用ConstraintLayout

  <androidx.cardview.widget.CardView 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:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="4dp"
            app:cardElevation="2dp">

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <ImageView
                    android:id="@+id/img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_margin="10dp"
                    android:contentDescription="@string/app_name"
                    android:src="@mipmap/ic_launcher"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.77" />

            <TextView
                    android:id="@+id/text1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="#FFC107"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:padding="10dp"
                    android:textSize="16sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toTopOf="@+id/labelNew"
                    app:layout_constraintEnd_toStartOf="@+id/text2"
                    app:layout_constraintStart_toEndOf="@+id/img"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="test" />

            <TextView
                    android:id="@+id/labelNew"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="#00BCD4"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:padding="10dp"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="@+id/text1"
                    app:layout_constraintStart_toStartOf="@+id/text1"
                    app:layout_constraintTop_toBottomOf="@+id/text1"
                    tools:text="New" />

            <TextView
                    android:id="@+id/text2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:background="#E91E63"
                    android:ellipsize="end"
                    android:maxLines="1"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.77"
                    tools:text="test" />

            <TextView
                    android:id="@+id/text3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:background="#FFC107"
                    android:ellipsize="end"
                    android:maxLines="1"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintBottom_toTopOf="@+id/labelNew"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.77"
                    tools:text="test" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

输出

试试这个方法

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content">

    <androidx.cardview.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardCornerRadius="4dp"
            app:cardElevation="2dp">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

            <ImageView
                    android:id="@+id/img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="16dp"
                    android:layout_marginTop="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginBottom="16dp"
                    android:contentDescription="@string/img_desc"
                    android:src="@mipmap/ic_launcher" />

            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="horizontal">

                <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="vertical">

                    <TextView
                            android:id="@+id/text1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="16dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:textColor="@color/cardview_head"
                            android:textSize="16sp"
                            android:textStyle="bold"
                            tools:text="test" />

                    <TextView
                            android:id="@+id/labelNew"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="@drawable/new_label"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:paddingLeft="6dp"
                            android:paddingRight="6dp"
                            android:text="@string/new_label"
                            android:textColor="@color/white"
                            android:textSize="12sp"
                            tools:text="New" />

                </LinearLayout>

                <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                    <TextView
                            android:id="@+id/text2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="16dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:textColor="@color/cardview_subhead"
                            tools:text="test" />

                    <TextView
                            android:id="@+id/text3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginEnd="16dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:textColor="@color/cardview_subhead"
                            tools:text="A day ago" />

                </LinearLayout>
            </LinearLayout>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

输出

在右上角放置标签

Putting a label on the top-right corner

android

android-layout

android-linearlayout

android-relativelayout