在线性布局中将TextView放置在ImageView之上

Question

我卡在了一些XML代码中，希望你能帮我解决。

这是我需要/迄今为止所做的。

我有3个650像素宽的图像，我需要它们一个接一个地放置，同时保持纵横比。

我用以下代码实现了这个功能，看起来很好。没有问题。

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/krk_history"
    android:layout_weight="1"
    android:background="@drawable/povjestkrka_vintage_yellow600" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/krk_frankopan"
    android:background="@drawable/frankopan2_vintage_sundown600" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/krk_turizam"
    android:background="@drawable/krk_turizam_vintage"/>

问题是，我需要在每个图像的左下角放置三个文本视图。可以将其想象为带有每个图像文本描述的图像菜单。

因此，不能使用相对布局或框架布局，因为图片之间无法很好地配合:) 常常存在间隙或不成比例等问题，需要使用weightsum属性。

其次，不能在Photoshop中硬编码每个图像上的文本，因为应用程序将进行翻译并且每种语言的文本都需要更改。

可以为每种语言使用不同的图片，但是我正在尝试避免这种情况。

最后一个问题是，我试图将整个LinearLayout放入RelativeLayout中，并将文本放在其中，但文本出现在图像下方，而且无法将其提前显示。

有什么建议吗？

非常感谢， Xsonz

- xsonz

---

首先，使用ImageView和TextView构建一个RelativeLayout/FrameLayout，然后将此布局包含在您的LinearLayout中（而不是ImageView）... <Linear><RelativOrFrame><Image/><Text/><Text/></RelativOrFrame><RelativOrFrame><Image/><Text/><Text/></RelativOrFrame><RelativOrFrame><Image/><Text/><Text/></RelativOrFrame></Linear> 或imagewithtext.xml：<RelativOrFrame><Image/><Text/><Text/></RelativOrFrame> 然后 <Linear><include layout="layout/imagewithtext" /><include layout="layout/imagewithtext" /><include layout="layout/imagewithtext" /></Linear>。 - Selvin

你为什么不在应用程序中使用Canvas和Paint以编程方式直接在图像中绘制文本？http://stackoverflow.com/questions/23185453/drawtext-on-imageview - SorryForMyEnglish

Answer 1

<?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="match_parent"
android:orientation="vertical">


<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 1" />

</FrameLayout>
 <FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 2" />

</FrameLayout>
 <FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:padding="5dp"
        android:text="Text 3" />

</FrameLayout>

：这是一个空段落标签。

- Kastriot Dreshaj

---

Katriot，感谢您的代码。我稍微调整了一下以适应我的需求，但概念是正确的。您的答案与“Selvin”的评论相同，不确定谁先回答，但我将选择您作为解决方案。 - xsonz

Answer 2

您可以在线性布局中使用帧布局。在线性布局中创建ImageView，在其下方的另一个帧布局中创建TextView。

<FrameLayout
    android:id="@+id/frameLayout_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/krk_history"
        android:layout_weight="1"
        android:background="@drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
    android:id="@+id/frameLayout_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="-5dp" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="string" />
</FrameLayout>

- nandha-dev

Answer 3

这里有一个类似的做法或许适合你。

//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image1"
        android:layout_weight="1"
        android:background="@drawable/A1" />
    <TextView android:id="@+id/textview1"
        android:layout_margin="0dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My Text"
        android:layout_below="@id/image1"
        android:layout_alignLeft="@id/image1" />

</RelativeLayout>
// end your LinearLayout

您可以使用相对布局参数android.com来调整这些参数。相对布局允许您控制元素之间的“相对”位置关系。

您可以将图像并排或以任何您想要的方式进行布局。

然后，您可以动态地调整文本。

- user3956566

Answer 4

在你的LinearLayout中放置三个FrameLayout，在FrameLayout中分别放置ImageView和TextView。

或者你可以使用RelativeLayout，并给视图设置依赖关系。

- T_V