Question

以下是我尝试做的一个例子：

我尝试这样做的结果非常糟糕：

包含带有ImageView的CardView，2个TextView和ButtonImage的XML代码：

这是我的XML：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:background="@color/card"
    app:cardCornerRadius="5dp"
    app:cardElevation="6dp"
    app:cardMaxElevation="10dp"
    app:contentPadding="25dp">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/masarImg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:focusable="auto"
            android:scaleType="centerCrop" />


        <TextView
            android:id="@+id/masarTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/mapBtn"
            android:layout_alignParentStart="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="43dp"
            android:background="#AA000000"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="24dp"
            android:text="SomeText"
            android:textColor="#ffffffff"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/descreption"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/mapBtn"
            android:layout_alignParentStart="true"
            android:layout_gravity="center_horizontal"
            android:background="#AA000000"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="SomeText"
            android:textColor="#ffffffff"
            android:textSize="14sp" />

        <ImageButton
            android:id="@+id/mapBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:padding="8dp"
            app:srcCompat="@drawable/b" />

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

你能帮我解决我的XML代码以获得相当好的结果吗？

Answer 1

为了更好的设计，我建议您使用此库：

RoundedImageView：https://github.com/vinc3m1/RoundedImageView
（在卡内设置图像角）

布局代码：

RES / layout.xml

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:background="@android:color/white"
    android:layout_gravity="center"
    app:cardCornerRadius="10dp"
    app:cardElevation="20dp">

<!--Card Image-->
<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/test"
    app:riv_corner_radius="10dp"/>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <!--Title & Description Text-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start|bottom"
        android:orientation="vertical">
        <!--Title Text-->
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/transparent_card">
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textAlignment="center"
                android:text="Title"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:layout_margin="5dp"/>
        </FrameLayout>
        <!--Description Text-->
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/transparent_card"
            android:layout_marginTop="5dp">
            <TextView
                android:id="@+id/description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textAlignment="center"
                android:text="Description"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                android:layout_margin="5dp"/>
        </FrameLayout>
    </LinearLayout>

    <!--Button-->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/transparent_card"
        android:layout_gravity="end|bottom"
        android:clickable="true"
        android:focusable="true">
        <FrameLayout
            android:id="@+id/btn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:drawable/ic_menu_share"
            android:layout_margin="5dp"/>
    </FrameLayout>
</FrameLayout>

抽拉/ transparent_card.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

<solid
    android:color="#78000000"/>

<corners
    android:radius="5dp"/>
</shape>

布局如下所示： Cards layout

CardView文本覆盖在android中的imageview上

1 个答案: