【问题标题】:How do i place a background on an image inside a relativelayout?如何在相对布局内的图像上放置背景?
【发布时间】:2012-12-18 22:23:18
【问题描述】:

注意:我最终将此作为一个错误报告给 android 项目:http://code.google.com/p/android/issues/detail?id=39159 另请查看接受的赏金答案,不幸的是,解决方案是使用绝对值(即指定 'dp's 而不是比 'wrap_content' 等)布局来解决问题。

在图像上放置背景时,我遇到了一些非常奇怪的行为。我已经大大简化了这一点,以向您展示这个问题。我正在做的是将图像放置在相对布局中,并使用背景。似乎给 relativelayout 一个填充会导致图像的背景被误绘。 Wrap_content 似乎搞砸了。

首先,这里是演示问题的代码。请注意,在不使用线性布局的情况下会看到相同的行为,而只是为图像视图提供背景,但这确实更好地说明了问题。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:padding="5dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/black_bg" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/red_rectangle" />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

这里是 black_bg xml 文件:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF000000"/>
</shape> 

这里是 red_rectangle:

请注意,这是一个参考图像,用于演示问题。我的实际图像有细节,所以不能是 .9.png

这是问题的截图:

您可以看到图像宽度小于线性布局,尽管线性布局的宽度设置为“wrap_content”。如果我将 relativelayout 填充设置为 0dp,这个问题就会消失。

希望这是我在这里提供的一组相当完善的资源,因此人们可以根据需要自行尝试。

作为参考,我使用它在图像周围提供边框,因此我可以将线性布局(或图像本身)设置为具有填充,在这种情况下问题仍然存在。

编辑:看来我可能需要更多关于此的上下文,因为答案集中在如何提供此边框上。这是一个更符合上下文的布局的屏幕截图。我一开始就不想包括这个,因为它给问题增加了更多的混乱:

您看到的第一个 5dp 内边距是针对整个项目的内容(相对布局)。然后,正如我最初所说的那样,除了您在相对布局中看到的第一个填充之外,“我可以将线性布局(或图像本身)设置为具有填充”。目前,此布局不应显示任何边框。

【问题讨论】:

  • 图像的分辨率是您的问题。使用可以扩展的图像.. 像 Vector(例如,.9png 图像),或者只是一个 shape
  • 请注意,这是一个参考图像,用于演示问题。我的实际图像有细节,所以不能是 .9.png
  • 我可以看到您没有得到预期的结果,但您的要求并不清楚。您期望的布局是什么以及您想如何使用它。
  • 预期的布局是看不到黑色。然后对于某些布局,我可以在线性布局(或图像视图本身,如果我将背景放在上面)上设置填充并获得边框。

标签: android android-layout


【解决方案1】:

问题似乎在于图像的不同拉伸属性(在图像视图中)和一个设置为背景的属性(在线性布局中)。设置为背景的图像不一定保持纵横比,而图像中的图像倾向于保持纵横比。 当您将布局的高度设置为 60 dp 时,图像会缩小并保持纵横比,而在侧面留下黑色条纹。 这对我有用:

<?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="match_parent" >
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:padding="5dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/black_bg" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:src="@drawable/asd"
                android:scaleType="fitXY"
                 />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

【讨论】:

  • 图像视图中的 android:scaleType="fitXY" 属性显式地使图像视图中的图像拉伸而不遵循纵横比。
  • 恐怕这行不通。红色矩形drawable被严重拉伸
  • 如果你拿我原来的例子,把背景全部去掉,然后用图形布局工具点击红色矩形的右边,你会看到linearlayout还没有包裹内容
【解决方案2】:

我相信这是一个很好的错误候选者!

无论如何,我了解您打算通过此布局实现的目标。问题是设置RelativeLayout 的高度。我不会要求你包装内容!简单来说,由于高度设置为 60dp,内边距设置为 5dp,因此更进一步,将 LinearLayout 的高度设置为 50dp,即60-2*5 :)

最后,要获得边框,向 LinearLayout 添加一个 5dp 的内边距,并将 ImageView 的高度设置为 50dp - 2*5 = 40dp

这将完美运行


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:padding="5dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:padding="5dp"
            android:background="@drawable/black_bg" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:adjustViewBounds="true"
                android:src="@drawable/red_rectangle" />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

【讨论】:

  • 啊,做这样的绝对布局是违反我的道德的,哈哈,但我想这是唯一的方法......感谢您花时间寻找解决方案并正确阅读问题,非常感谢。我不再从事这个项目,但会尽快尝试测试。我想我会把它作为一个错误放在 android 项目中。链接很快就会出现在这里。我在 2 个月的开发中发现了 3 个布局错误,Google 应该雇用我:-P
  • 此答案已获得赏金。非常感谢您彻底阅读和测试我的问题 Sherif。很遗憾布局必须以这种方式完成,但至少我从另一个来源确认了这个错误。
  • 貌似RelativeLayout可以去掉,它的padding可以是LinearLayout边距,LinearLayout可能是FrameLayout
【解决方案3】:

我不知道为什么它在那里显示额外的黑色补丁。您是否尝试过运行该应用程序? UI编辑器有一些缺陷,尤其是ImageView..

现在对于图像周围的边框,将背景和填充设置为ImageView 本身。不需要LinearLayout。添加具有"centerInside" 值的比例类型属性。

 <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="5dp"
      android:layout_centerInParent="true"
      android:adjustViewBounds="true" 
      android:src="@drawable/red_rectangle"
      android:background="#000" 
      android:scaleType="centerInside"/> 

【讨论】:

  • 是的,我想我在手机上发现了这个问题。我的问题很长,所以你可能错过了这一点:首先,这是演示问题的代码。请注意,在不使用线性布局的情况下会看到相同的行为,而只是为图像视图提供背景,但这确实更好地说明了问题。
  • android:scaleType="centerInside"
【解决方案4】:

“作为参考,我用它来提供图像周围的边框”

添加一个可绘制的“border.xml”

<shape xmlns:android:"http://schemas.android.com/apk/res/android" android:shape:"rectangle">
 <stroke android:width="5dp" android:color="#FF000000" />
 <padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>

将您的 ImageView 背景设置为此可绘制对象。

让我们简化您的布局并将 ImageView 居中:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 
        <ImageView 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:layout_centerInParent="true"
                android:adjustViewBounds="true" 
                android:src="@drawable/red_rectangle"
                android:background="@drawable/border" /> 
</RelativeLayout> 

【讨论】:

  • 不,虽然是一个有趣的实验。给linearlayout这个背景会产生这个结果:i.imgur.com/OxN7b.png(注意,我改为FF0000FF,所以你可以看到这个)。将此背景赋予图像视图,并删除线性布局会得到以下结果:i.imgur.com/lLFZK.png
  • 也许还可以将 padding="5dp" 添加到 ImageView。为什么您的 RelativeLayout 设置为固定高度?图片资源的高度是多少?我将对我的答案进行更多编辑
  • 我在图像视图中添加了填充,但没有得到任何结果。我需要一个特定的高度。这是列表中的许多项目之一。图片资源大于relativelayout,是的。
  • 将填充元素添加到drawable。检查stackoverflow.com/questions/3263611/…,我最初的答案很接近。
  • 填充元素用于我的周围布局,将包含文本等。然后将进一步的填充元素添加到线性布局(或图像视图)以提供边框。这是显示问题的简化布局。
【解决方案5】:

试试这个............

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:padding="5dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/black_bg"
            **android:padding="5dp"**
            >
            <ImageView
                **android:layout_width="fill_parent"
                android:layout_height="fill_parent"**
                android:adjustViewBounds="true"
                android:src="@drawable/red_rectangle" />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

让你的图像视图像这样..

<ImageView 
            android:id="@+id/imageViewMyicon"
            android:layout_width="30dp"
            android:background="@drawable/myiconbackground"
            android:layout_height="30dp"
            android:src="@drawable/myicon"
            android:contentDescription="@string/my_icon"
            />

在你的可绘制 myiconbackground.xml 中

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle" 
       android:padding="10dp">
    <solid android:color="#0D95BD"/>
        <corners android:radius="5dp"/>
        <padding android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp"/>
</shape>

我检查了这个对我有用,也应该对你有用

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-13
    • 2013-07-06
    • 1970-01-01
    • 2013-11-16
    • 1970-01-01
    • 2016-03-23
    相关资源
    最近更新 更多