在CardView中创建视图?

时间:2016-09-10 21:56:07

标签: android android-layout view android-cardview

我想在View内创建CardView。它只是一个灰色视图,涵盖CardView的一部分。如果您在此图片的卡片视图中看到,您可以在此处显示的人物照片之间以及此处显示的名称右侧看到此灰色视图:

enter image description here

我试图模仿这个,如下所示,但我有点困惑。我试图添加一个灰色的View,但有一点,View不会扩展到整个CardView,因为我已声明android:layout_margin="16dp" RelativeLayout中的嵌套CardView。其次,我不想硬编码CardView的高度,但是当尝试放置android:layout_height="match_parent"之类的内容时,View甚至不会显示。如果有人能指出我正确的方向,我将如何在View内完成灰色的CardView权利,这个名字很棒。谢谢!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/material_color_grey_200"
    xmlns:fresco="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    >

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv_news_feed"
        android:minHeight="100dp"
        card_view:cardElevation="2dp"
        card_view:cardUseCompatPadding="true"
        card_view:cardCornerRadius="5dp"
        >

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

            <TextView
                android:textColor="@color/black"
                android:layout_alignParentTop="true"
                android:id="@+id/txt_post_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:ellipsize="end"
                android:paddingRight="80dp"
                android:maxLines="2"
                android:fontFamily="sans-serif-medium" />


            <TextView
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:id="@+id/txt_timestamp"
                android:layout_marginTop="4dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:textColor="@color/material_color_grey_400"
                android:layout_marginLeft="8dp"
                android:textSize="14sp" />


            <TextView
                android:layout_below="@id/txt_post_title"
                android:id="@+id/txt_statusMsg"
                android:layout_marginTop="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:ellipsize="end"
                android:maxLines="3"
                android:textSize="16sp" />


            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/poster_profile_photo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:roundedCornerRadius="5dp"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundingBorderWidth="1dp"
                android:layout_alignParentLeft="true"
                android:layout_marginRight="8dp"
                android:layout_marginTop="16dp"
                android:layout_below="@id/txt_statusMsg"
                />

            <TextView
                android:layout_below="@id/txt_statusMsg"
                android:layout_toRightOf="@id/poster_profile_photo"
                android:id="@+id/txt_name"
                android:ellipsize="end"
                android:maxLines="1"
                android:textSize="16sp"
                android:layout_marginTop="16dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="wrap_content"
                android:maxWidth="125dp"
                android:layout_height="wrap_content" />

            <View
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:background="@color/material_color_grey_200"
                android:layout_below="@id/txt_name"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/privacy_status"
                    android:paddingTop="8dp"
                    android:paddingLeft="8dp"
                    android:fontFamily="sans-serif"
                    android:layout_toRightOf="@id/txt_name"
                    />

                <TextView
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:fontFamily="sans-serif"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:id="@+id/num_comments" />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_one"
                android:layout_width="30dp"
                android:layout_height="30dp"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:roundedCornerRadius="5dp"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundingBorderWidth="1dp"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/num_comments"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_two"
                android:layout_width="30dp"
                android:layout_height="30dp"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:roundedCornerRadius="5dp"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundingBorderWidth="1dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="20dp"
                android:layout_toLeftOf="@id/num_comments"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_three"
                android:layout_width="30dp"
                android:layout_height="30dp"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:roundedCornerRadius="5dp"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginRight="40dp"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/num_comments"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_four"
                android:layout_width="30dp"
                android:layout_height="30dp"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:roundedCornerRadius="5dp"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginRight="60dp"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/num_comments"
                />

        </RelativeLayout>

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

</LinearLayout>

1 个答案:

答案 0 :(得分:1)

你去吧。改变颜色我替换它们。父级是wrap_content,但页脚高度必须是硬编码的,或者元素大小在其中,边缘顶部用于图像。我还使用了您已定义的底部图像。文字在右侧而不是图像的左侧

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="2dp">

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

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


            <TextView
                android:id="@+id/txt_post_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:ellipsize="end"
                android:fontFamily="sans-serif-medium"
                android:maxLines="2"
                android:paddingRight="80dp"
                android:textColor="#000"
                android:textSize="20sp"/>

            <TextView
                android:id="@+id/txt_timestamp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="4dp"
                android:fontFamily="sans-serif"
                android:textColor="#99000000"
                android:textSize="14sp"/>


            <TextView
                android:id="@+id/txt_statusMsg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/txt_post_title"
                android:layout_marginTop="8dp"
                android:ellipsize="end"
                android:fontFamily="sans-serif"
                android:maxLines="3"
                android:textSize="16sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="88dp">

            <TextView
                android:id="@+id/txt_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_toRightOf="@+id/poster_profile_photo"
                android:layout_toEndOf="@+id/poster_profile_photo"
                android:ellipsize="end"
                android:maxLines="1"
                android:maxWidth="125dp"
                android:textColor="@color/colorPrimary"
                android:textSize="16sp"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/txt_name"
                android:background="#33000000"/>

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@id/poster_profile_photo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginRight="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginStart="16dp"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                />


            <TextView
                android:id="@+id/privacy_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/txt_name"
                android:layout_toEndOf="@id/txt_name"
                android:fontFamily="sans-serif"
                android:paddingLeft="8dp"
                android:paddingTop="8dp"
                />

            <TextView
                android:id="@+id/num_comments"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:fontFamily="sans-serif"
                fresco:text="asdasd"
                android:layout_marginBottom="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginEnd="8dp"/>

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_one"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_two"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_three"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="40dp"
                android:layout_marginEnd="40dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_four"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="60dp"
                android:layout_marginEnd="60dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

        </RelativeLayout>

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