Android中的图片视图边框?


Answers:


566

我将以下xml设置为“图像视图”的背景为“可绘制”。有用。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

然后添加android:background="@drawable/yourXmlFileName"到您的ImageView


112
然后添加android:background="@drawable/yourXmlFileName"ImageView
Mithun Sreedharan

10
边框在左侧和右侧均可使用,但对于顶部和底部,它将填充父级到顶部。
莫里斯

3
哦,很好,这也是我想要的。记住要为ImageView设置填充。
emeraldhieu 2012年

5
@Maurice可以将cropToPadding设置为true。
MikkoP

4
不要忘记设置cropToPadding =“真”
兰德里

164

以下是我以前具有黑色边框的代码。请注意,我没有使用额外的xml文件作为边框。

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>

29
是的..它看起来像一个边界。但是,当您使用具有透明背景的可绘制图像时,它将无法正确显示带有边框的图像。只要有透明色,它就会显示黑色。因此,您的答案不是最佳方法。
Praveen

19
是的 但您没有创建另一个xml文件的边界。
user609239 2011年

7
当您使用调整图片大小时,此功能不起作用android:scaleType="centerCrop"
Silox

8
这很糟糕,因为它会造成不必要的透支
Jay Soyer 2013年

1
@Silox for scaleType="centerCrop",请确保还要添加cropToPadding="true"
Adam Johns

24

我知道这是一篇旧文章,但我认为这可能会帮助某个人。

如果要模拟不与形状的“纯色”重叠的半透明边框,请在xml中使用它。请注意,我这里根本不使用“笔画”标记,因为它似乎总是与实际绘制的形状重叠。

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>

我也很喜欢,但是如果您将外部边缘设置得太小,则角是空白的。它适用于2dp及更高版本。
John Stack

这种方法的好处是它允许圆角。如果您不希望上一个答案的边框重叠,请在ImageView标签中添加填充。此方法的缺点是,如果使用半透明背景,边框将渗入图像区域。因此,我选择前一种方法是因为我更喜欢半透明背景而不是圆角。
Leo Landau 2013年

24

ImageView 在xml文件中

<ImageView
            android:id="@+id/myImage"
            android:layout_width="100dp"
            android:layout_height="100dp"

            android:padding="1dp"
            android:scaleType="centerCrop"
            android:cropToPadding="true"
            android:background="@drawable/border_image"

            android:src="@drawable/ic_launcher" />

保存以下代码,名称为border_image.xml,并且应位于可绘制文件夹中

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

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

如果您想给图像的边框加上圆角,则可以在border.xml文件中更改一行

<corners android:radius="4dp" />

2
请注意,如果图像是动态设置的,则需要使用代码再次设置边框,否则图像将超出边框。
Rob85

4

创建边框

在可绘制文件夹中创建具有以下内容的xml文件(例如“ frame_image_view.xml”):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

更换@dimen/borderThickness@color/borderColor任何你想要的或添加相应扪/彩色。

将Drawable作为背景添加到您的ImageView中:

<ImageView
        android:id="@+id/my_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_image_view"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

您必须使用android:cropToPadding="true",否则定义的填充无效。或者android:padding="@dimen/borderThickness"在您的ImageView中使用以实现相同目的。如果边框框住了父母而不是您的ImageView,请尝试使用android:adjustViewBounds="true"

更改边框颜色

在代码中更改边框颜色的最简单方法是使用tintBackgound属性。

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

要么

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

别忘了定义您的newColor


3

添加像res / drawables / background.xml这样的背景Drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

在res / layout / foo.xml中更新ImageView背景:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

如果希望src在背景上绘制,请排除ImageView填充。


3

上面已经使用过,但没有专门提及。

setCropToPadding(boolean);

如果为true,则图像将被裁剪以适合其填充。

这将使ImageView源适合填充到添加到其背景的填充中。

通过XML可以按以下方式完成-

android:cropToPadding="true"

2

您必须在res / drawable此代码中创建background.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>

2

对于那些正在搜索ImageView的自定义边框和形状的用户。您可以使用android-shape-imageview

图片

只需添加compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'到您的中即可build.gradle

并在您的布局中使用。

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>

1

我几乎放弃了。

这是我使用滑行加载图像的条件,请参见此处有关圆角变换的详细滑行问题以及此处的信息

我的属性也相同ImageView,每个人在这里1这里2这里3回答

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

但是仍然没有成功。

经过一段时间的研究后,在此处使用此SO答案中foreground属性给出结果android:foreground="@drawable/all_round_border_white"

不幸的是,它给了我“不好的”边框角,如下图所示:

在此处输入图片说明


0

我发现这样做非常容易:

1)编辑框架以在其中包含内容(使用9patch工具)。

2)将ImageViewa放在其中Linearlayout,然后将所需的框架背景或颜色设置为的背景Linearlayout。当您设置框架以使其内部具有内容时,您ImageView将位于框架内部(使用9patch工具设置内容的右侧)。


0

以下是解决此冗长麻烦的最简单的解决方案。

<FrameLayout
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it's 1dp -->
    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/> </FrameLayout>

在下面的答案中,我已经解释得足够好了,请也来看看!

希望对其他人有所帮助!


0

在相同的xml中,我接下来使用了:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>

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.