在安卓中将TextView放置在ImageView上方

Question

• 我有一个listview，其中有一个可以上下滚动的单个imageview
• 我试图将一个textview放在Imageview上方
• 这两个视图都必须可见

---

1. 这是否可能？
2. 如果是，如何以编程方式实现？
3. 需要做哪些更改？

---

list_view_item_for_images.xml

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

    <ImageView
        android:id="@+id/flag"
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

它会输出如下内容： 如何做像下面这样的东西： 注：Dish 1和2是TextViews。

- user2609157

---

在 ImageView 上方添加 TextView。 - Shakeeb Ayaz

你能否通过编辑XML来展示它作为答案...TextView必须显示在ImageView的上方。 - user2609157

秘密就在于RelativeLayout。相较于LinearLayout等其他布局方式，RelativeLayout更为优秀。 - Fattie

Answer 1

这应该会给您所需的布局：

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

    <ImageView
        android:id="@+id/flag"
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

调整 android:layout_marginTop="20dp" 的数值，看哪个更适合你的需要。使用 id 为 textview 的元素来动态设置其 android:text 值。

由于 RelativeLayout 会将它的子元素堆叠起来，所以把 TextView 放在 ImageView 后面会使它显示在 ImageView 上面。

注意： 使用 FrameLayout 作为父容器也可以达到类似的效果，并且比使用其他任何 Android 容器更有效率。感谢 Igor Ganapolsky（请参见下面的评论）指出这个答案需要更新。

- Vikram

---

如果您想要垂直对齐<TextView>，请删除android:layout_alignParentTop、android:layout_marginTop，并在<TextView>中添加android:layout_centerInParent="true"。 - Lee Han Kyeol

@LeeHanKyeol 当然可以。另外，如果只需要垂直居中对齐，则 android:layout_centerVertical="true" 就足够了。 - Vikram

为什么在这里RelativeLayout比FrameLayout更受欢迎？ - IgorGanapolsky

@IgorGanapolsky 我的回答是基于问题中给出的细节（布局）的。我只在极少数情况下使用RelativeLayout，除非给定的布局是实际布局的简化版本，否则它并不适用。此外，FrameLayout并不像人们所说的那样缺乏功能。谢谢，已经编辑答案以反映这一点。 - Vikram

Answer 2

试试这个：

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

<ImageView
    android:id="@+id/ImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src=//source of image />

<TextView
    android:id="@+id/ImageViewText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/ImageView"
    android:layout_alignTop="@id/ImageView"
    android:layout_alignRight="@id/ImageView"
    android:layout_alignBottom="@id/ImageView"
    android:text=//u r text here
    android:gravity="center"
    />

希望这能对你有所帮助。

- Nitesh Tiwari

---

你必须确保将 ImageView 放在 TextView 的上方。 - Mohamed Ben Romdhane

Answer 3

您可以使用Framelayout来实现此目的。

如何使用Framelayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

   <ImageView 
   android:src="@drawable/ic_launcher"
   android:scaleType="fitCenter"
   android:layout_height="250px"
   android:layout_width="250px"/>

   <TextView
   android:text="Frame Demo"
   android:textSize="30px"
   android:textStyle="bold"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"
   android:gravity="center"/>
</FrameLayout>

ref: tutorialspoint

- Ker p pag

Answer 4

根据您在OP中提到的，您需要以编程方式在ImageView上叠加Text。您可以获取ImageView的drawable，并在Canvas和Paint的帮助下写入它。

 private BitmapDrawable writeTextOnDrawable(int drawableId, String text) 
 {
 Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
 Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
 Paint paint = new Paint();
 paint.setStyle(Style.FILL);
 paint.setColor(Color.WHITE);
 paint.setTypeface(tf);
 paint.setTextAlign(Align.CENTER);
 paint.setTextSize(11);
 Rect textRect = new Rect();
 paint.getTextBounds(text, 0, text.length(), textRect);
 Canvas canvas = new Canvas(bm);
 canvas.drawText(text, xPos, yPos, paint);
 return new BitmapDrawable(getResources(), bm);
 }

- Vikalp Patel

---

我想在ImageView上放置文本，并希望自由地将其拖放到任何我想要的位置。类似于“Phonto”应用程序中所做的操作。 - Mayur

Answer 5

只需在Eclipse中将TextView拖放到ImageView上即可

<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="48dp"
    android:layout_marginTop="114dp"
    android:src="@drawable/bluehills" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_centerVertical="true"
    android:layout_marginLeft="85dp"
    android:text="TextView" />

</RelativeLayout>

这是上述XML的输出：

- Shakeeb Ayaz

---

我们能否从这个创建一个位图？ - Nitesh Verma

Answer 6

你必须确保在 FrameLayout 中将 ImageView 放在 TextView 之上。这很简单，但我希望能帮到某些人。 :)

- Ádám Bocskay

Answer 7

你也可以尝试这个。我只使用了帧布局。

 <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/cover"
                android:gravity="bottom">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="Hello !"
                    android:id="@+id/welcomeTV"
                    android:textColor="@color/textColor"
                    android:layout_gravity="left|bottom" />
            </FrameLayout>

- spaceMonkey