使用 FrameLayout 将文本视图放在图像视图上

Question

以下是我如何设计我的 xml。现在我试图在下面显示的白框中放置一个文本视图。但是受到 FrameLayout 的限制（至少我认为是这样），我需要对值进行硬编码以使文本视图适合中间或白框内的某个位置。我不能为此目的使用相对或其他布局，因为我通过我的试验了解到，因为这整个是一个单一的图像。

这是我的布局，

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:visibility="visible" android:layout_marginTop="60dip"
    android:layout_gravity="center" android:id="@+id/xxx">

    <ImageView android:id="@+id/calloutquizImage" 
        android:background="@drawable/callout" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:scaleType="fitCenter" />

    <ImageView android:id="@+id/triviaImage"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignTop="@+id/calloutquizImage" android:layout_gravity="left"
        android:src="@drawable/trivia" android:background="@drawable/trivia"
        android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>

    <TextView android:text="TextView" android:id="@+id/triviAnswerText"
        android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
        android:layout_gravity="left" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textColor="#000000"
        android:typeface="sans"></TextView>

    <ImageButton android:id="@+id/triviaanswercloseButton"
        android:src="@drawable/closebtn" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:background="@drawable/closebtn"
        android:layout_marginRight="8dip" android:layout_marginTop="43dip"
        android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
    <ImageView android:id="@+id/buttontoclose"
        android:layout_gravity="left"
        android:visibility="visible" android:onClick="triviaanswerClose" 
        android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
        android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>

因此，文本视图在各种手机中的位置不同。

您猜猜可以为此做些什么？

下面是我的图片：

Answer 1

我认为你没有做正确的事。如果您希望文本出现在白框内（或者甚至调整它的大小，如果有很多文本适合它） - 您仍然可以避免任何布局广告使用只有一个 TextView。

请看一下 Android 中的 NinePatch 图像是什么： http://developer.android.com/reference/android/graphics/NinePatch.html

http://developer.android.com/tools/help/draw9patch.html - 绘图工具

所以基本上你只需要 1 个 textView 和你的图片，正确地转换为 9-patch 和第二个链接。 （基本上 - 只需在图像边框上添加一些黑色像素）。 不，只是将这个 9-patch 设置为 textView 的背景。它会将文本放置在您需要的位置，如果您在 9-patch 中定义，它将缩小白框。

统一更新： 请找到生成的屏幕截图：

如你所见，textView 没有句柄 WhiteBox" 本身，用文本填充它并在必要时调整框的大小。

下面是如何使它工作：

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

    <TextView
        android:id="@+id/first"
        android:background="@drawable/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text" />

    <TextView
        android:layout_below="@+id/first"
        android:background="@drawable/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Not so many text" />
</RelativeLayout>

这是您的图像，已转换为 9patch。只需将其放入“drawable/”文件夹即可。注意：它必须有“back.9.png”的名字。

有关 9patch 工作原理的详细信息，您可以查看上面的链接。主要思想：通过在左侧和顶部边框上制作黑点 - 您指定在必须放大图像时将拉伸图像的哪个部分。通过在右侧/底部制作点，您可以告诉视图放置内容的位置。在我们的例子中，内容是 TextView 的文本。

希望对你有帮助，祝你好运

Answer 2

我认为您可以在FrameLayout 中为ImageView 和TextView 使用RelativeLayout，并且通过使用参数，您可以将TextView 导航到白框。详情请参考LayoutParams documentation。

例如。您可以先添加ImageView 块，然后添加TextView，这样TextView 将覆盖ImageView，并通过使用对齐底部，并使用负值指定上边距，您可以使@ 987654332@查看图片。或者更确切地说，如果你使用的是eclipse，你可以直接在图形布局中移动文本视图。

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/xxx"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="0dp"
    android:visibility="visible" >

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margintop="0dp" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/user2" />
        <TextView
            android:id="@+id/Textviewtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:layout_below="@+id/imageView1"
            android:layout_marginTop="-10dp"
            app:context=".TestActivity" />

    </RelativeLayout>
 </FrameLayout>

与上面类似，您可以指定左右边距以根据需要正确定位您的TextView。检查图形布局以获取反馈以了解正确的位置。 如果这有帮助，请回复。

使用您的图像和值作为高度和宽度。我只是尝试测试。