在XML Android中添加背景图像以进行造型


148

如何为形状添加背景图像?我在下面尝试过但没有成功的代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
//here is where i need to set the image
<solid android:color="@drawable/button_image"/>
    <corners
     android:bottomRightRadius="5dp"
     android:bottomLeftRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp"/>
 </shape>

您需要扩展并创建一个自定义形状的类。以RoundedImageView为例。它会创建一个圆形的图像视图,因此无论您设置为背景的图像如何,它都会显示为圆形
Rahul Gupta

Answers:


221

使用以下内容layerlist

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners
                 android:bottomRightRadius="5dp"
                 android:bottomLeftRadius="5dp"
                 android:topLeftRadius="5dp"
                 android:topRightRadius="5dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/image_name_here" />
</layer-list>

4
谢谢,这确实有用,但是边缘不再圆了吗?
DevC 2014年

您是否想要具有圆形边缘的图像?因为它似乎你的形状没有任何颜色
VIPUL米塔尔

1
我的形状确实有白色和圆形边缘。我以为,如果我删除颜色并使用图像代替,则将保留圆角边缘。如果不可能,则可以
DevC 2014年

所以有圆角的图像,不可能吗?
2014年

可以,但是您需要以编程方式在图像的各个角落进行处理。看到这个stackoverflow.com/questions/2459916/...
VIPUL米塔尔

199

我将以下内容用于具有圆形背景的可绘制图像。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_select"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp"/>
</layer-list>

这是它的样子

在此处输入图片说明

希望可以帮助某人。


是否可以设置图像的重力。
Sagar Devanga 2015年

@SagarDevanga是用于上面代码中的可绘制对象,还是将图像包含在布局中?
雷·亨特

首先,我尝试使用高度和宽度将内部图标设置为24dp(其实际大小)。可以在AS中的Preview中完美调整大小,但对平板电脑没有影响。因此,我使用了您的方法。我将形状的高度和宽度设置为40dp,然后将图标项的顶部,底部,左侧和右侧分别设置为8dp。(40-24)/ 2 = 8。但是,生成的图像看起来合适,但是模糊,我怀疑这是由于PNG的某种尺寸调整所致。有什么建议?
路加·艾里森

TLDR;如何在直径为40dp的圆圈和24dp的图标上方创建图像而不损失图像质量?
路加·艾里森

@LukeAllison您如何在用户界面中添加图标,以及放置在椭圆形中的图像有多大?
雷·亨特

21

这是一个带有图标的圆形:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ok_icon"/>
    <item>
        <shape
                android:shape="oval">
            <solid android:color="@color/transparent"/>
            <stroke android:width="2dp" android:color="@color/button_grey"/>
        </shape>
    </item>
</layer-list>

对于想要显示插入符号图像和边框的用户来说更完美
Masum 2015年

7

这是一个角落的图像

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/img_main_blue"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <corners android:radius="10dp" />
            <stroke
                android:width="5dp"
                android:color="@color/white" />
        </shape>

    </item>
</layer-list>

4

我将以下内容用于带有边框的可绘制图像。

首先在可绘制文件夹中使用以下代码创建一个.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/orange"/>
    </shape>
</item>
<item
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
    </shape>
</item>
<item
    android:drawable="@drawable/messages" //here messages is my image name, please give here your image name.
    android:bottom="15dp"
    android:left="15dp"
    android:right="15dp"
    android:top="15dp"/>

其次,在布局文件夹中创建一个视图.xml文件,并以这种方式调用上述.xml文件

<ImageView
   android:id="@+id/imageView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/merchant_circle" />  // here merchant_circle will be your first .xml file name

1

这是获取图像自定义形状(图像视图)的另一种最简单的方法。对某人可能会有所帮助。这只是一行代码。

首先,您需要添加一个依赖项:

dependencies {
    compile 'com.mafstech.libs:mafs-image-shape:1.0.4'   
}

然后只需编写如下代码:

Shaper.shape(context, 
       R.drawable.your_original_image_which_will_be_displayed, 
       R.drawable.shaped_image_your_original_image_will_get_this_images_shape,
       imageView,
       height, 
       weight);   
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.