【问题标题】:Put a textview over Imageview in LinearLayout在 LinearLayout 中的 Imageview 上放置一个 textview
【发布时间】:2015-03-22 15:22:35
【问题描述】:

我遇到了一些 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 中对每张图片上的文本进行硬编码,因为该应用将被翻译,并且需要针对每种语言更改文本。

我可以为每种语言提供不同的图像,但我试图避免这种情况。

啊,是的,还有最后一件事。 我试图将整个线性布局放在相对布局中并将文本放在两者之间,但文本出现在图像下方,我无法将其放在前面。

有什么建议吗?

非常感谢, Xsonz

【问题讨论】:

  • 首先使用 ImageView 和 TextViews 构建一个 RelativeLayout/FrameLayout,然后在您的 LinearLayout(而不是 ImageView)中包含这样的布局 ...&lt;Linear&gt;&lt;RelativOrFrame&gt;&lt;Image/&gt;&lt;Text/&gt;&lt;Text/&gt;&lt;/RelativOrFrame&gt;&lt;RelativOrFrame&gt;&lt;Image/&gt;&lt;Text/&gt;&lt;Text/&gt;&lt;/RelativOrFrame&gt;&lt;RelativOrFrame&gt;&lt;Image/&gt;&lt;Text/&gt;&lt;Text/&gt;&lt;/RelativOrFrame&gt;&lt;/Linear&gt; 或 imagewithtext.xml :&lt;RelativOrFrame&gt;&lt;Image/&gt;&lt;Text/&gt;&lt;Text/&gt;&lt;/RelativOrFrame&gt; 然后&lt;Linear&gt;&lt;include layout="layout/imagewithtext" /&gt;&lt;include layout="layout/imagewithtext" /&gt;&lt;include layout="layout/imagewithtext" /&gt;&lt;/Linear&gt;
  • 是什么阻止您以编程方式直接在应用程序中绘制图像中的文本?使用CanvasPaint stackoverflow.com/questions/23185453/drawtext-on-imageview

标签: android css image android-layout


【解决方案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>

【讨论】:

  • Katriot,谢谢你的代码。我对其进行了一些调整以符合我的需求,但概念是正确的。您的答案与“Selvin”的评论相同,不确定谁先回答,但我会选择您的作为解决方案。
【解决方案2】:

LinearLayoutFrameLayout 中取三个FrameLayout,保留ImageView 和TextView。

否则,您可以使用RelativeLayout 并赋予视图依赖

【讨论】:

    【解决方案3】:

    您可以在线性布局中使用框架布局。在线性布局内创建 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>
    

    【讨论】:

      【解决方案4】:

      这样的事情可能对你有用。

      //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
      

      您可以使用Relative Layout Parameters android.com 使用这些参数。相对布局允许您控制元素之间的“相对”定位。 您可以并排放置图像,或以任何您希望的方式放置。

      然后就可以动态调整文字了。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-15
        • 1970-01-01
        • 2019-10-01
        • 2016-04-01
        • 1970-01-01
        相关资源
        最近更新 更多