卡片界面：无法容纳内容且文本被剪裁

Question

我正在制作一个应用，其内容位于卡片式视图中，但我遇到了几个问题：

1. 我无法让标签线（蓝线）远离卡片文本。我已经尝试了填充和边距（在文本中的行 imageview 和 textview 上），这里似乎没有任何效果。

2. 由于行间距，卡片标题的底部被裁剪。我该如何解决这个问题并保持行距？

查看此屏幕截图以更好地理解：http://imgur.com/qsoCFrB

这是卡片背景和界面本身的代码：

card_bg：

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

            <corners android:radius="1dp"/>

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

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="2dp" />

            <solid android:color="@android:color/white" />

            <padding android:bottom="6dp"
                android:left="6dp"
                android:right="6dp"
                android:top="4dp" />
        </shape>
    </item>
</layer-list>

主要活动：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/card_bg" >

        <ImageView
            android:id="@+id/iconView0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="6dp"
            android:src="@drawable/icon_example" />

     <ImageView
            android:id="@+id/labelSource0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/cardText0001"
            android:layout_marginTop="4dp"
            android:background="@drawable/card_label" /> 

        <TextView
            android:id="@+id/cardTitle0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/cardText0001"
            android:layout_toRightOf="@+id/iconView0001"
            android:fontFamily="sans-serif-condensed"
            android:maxLines="2"
            android:paddingLeft="4dp"
            android:lineSpacingExtra="-6dp"         
            android:text="@string/card_title_002"
            android:textColor="#717171"
            android:textSize="16sp" />

      <TextView
            android:id="@+id/cardText0001"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iconView0001"
            android:fontFamily="sans-serif"
            android:layout_marginTop="4dp"
            android:maxLines="1"
            android:text="@string/card_desc_002"
            android:textColor="#acacac"
            android:textSize="12sp" />

    </RelativeLayout>

</FrameLayout>

提前致谢。

Answer 1

这是 GitHub 上 Gist 的创建者！

您是否尝试过在 RelativeLayout 上增加填充，也许这可以解决问题？甚至在 TextView 元素上？

尝试这样做，看看结果如何。

编辑：另外，为什么文本视图中有负行距？

双重编辑：所以发生的事情是您在 linkTitle TextView 中的 layout_alignBottom 比两行文本的高度短，因此它正在裁剪标题以将 TextView 的高度限制为FavIcon ImageView 的那个。删除此属性可解决此问题。

标签形状也有类似的问题，就是 alignBottom 搞砸了。

将 layout_alignBottom 更改为 layout_below，然后 padding/margin 应该会影响位置。

这是您的代码的更新版本，可以解决您的问题：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/linkCardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ccc"   >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/card_bg">

        <TextView
            android:id="@+id/linkTitle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/faviconView0001"
            android:padding="4dp"
            android:maxLines="2"
            android:text="@string/link_title_001"
            android:textColor="#717171"
            android:textSize="17sp" />

        <TextView
            android:id="@+id/linkDesc0001"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linkTitle"
            android:paddingTop="6dp"
            android:paddingBottom="9dp"
            android:fontFamily="sans-serif"
            android:maxLines="1"
            android:text="@string/link_desc_001"
            android:textColor="#acacac"
            android:textSize="13sp"   />

        <ImageView
            android:id="@+id/faviconView0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="6dp"
            android:layout_alignParentLeft="true"
            android:src="@drawable/favicon_example" />

        <View
            android:layout_height="0dp"
            android:layout_width="fill_parent" 
            />
        <ImageView
            android:id="@+id/labelSource0001"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linkDesc0001"
            android:background="@drawable/card_label" /> 
    </RelativeLayout>
</FrameLayout>

我希望所有这些都会有所帮助！