Android 中 ImageView 的边框是如何实现的？

Question

如何在Android中为ImageView设置边框并更改其颜色？

- Praveen

---

我有一个改变ImageView颜色的解决方案，希望能够帮到你。 - ruidge

Answer 1

我将下面的xml设置为ImageView的背景，作为Drawable。它能正常工作。

<?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中。

- Praveen

---

在ImageView中添加android:background="@drawable/yourXmlFileName"。 - Mithun Sreedharan

边框向左和向右延伸，但在顶部和底部填充整个父级容器至顶部。 - Maurice

好的，我也希望如此。记得为你的ImageView设置padding。 - emeraldhieu

你可以将cropToPadding设为true。 - MikkoP

请不要忘记设置 cropToPadding="true"。 - landry

Answer 2

以下是我用来创建黑色边框的代码。请注意，我没有使用额外的XML文件来创建边框。

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

- user609239

---

是的，它看起来像是一个边框。但是当你使用带有透明背景的可绘制图像时，它将无法正确显示带有边框的图像。它会在任何地方显示黑色，你的答案不是最佳方法。 - Praveen

好的，您想要在不创建另一个 XML 文件的情况下添加边框。 - user609239

当你使用android:scaleType="centerCrop"来调整图片大小时，这种方法不起作用。 - Tom Naessens

这很糟糕，因为它会造成不必要的超绘。 - Ifrit

@Silox 对于 scaleType="centerCrop"，请确保同时添加 cropToPadding="true"。 - Adam Johns

Answer 3

在xml文件中使用ImageView

<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，并将其放置在drawable文件夹中。

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

- Ashish Saini

---

请注意，如果图像是动态设置的，则需要在代码中重新设置边框，否则图像会超出边框。 - Rob85

当我使用ImageView.setImageBitmap(photoBmp)时，我没有看到任何奇怪的东西。 - Someone Somewhere

Answer 4

我知道这是一个旧帖子，但我认为它可能会帮助到某些人。

如果你想模拟一个半透明边框，而不重叠形状的“实心”颜色，则在你的xml中使用以下内容。请注意，我完全没有使用"stroke"标签，因为它似乎总是会重叠实际绘制的形状。

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

- mdupls

---

我也喜欢这个，但如果你把外边缘做得太小，角落就会变成空白。它在2dp及以上的任何东西上都能很好地工作。 - John Stack

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

Answer 5

使用 Material Design 和新的 ShapeableImageView 小部件，您可以轻松地创建具有边框的图像，使用 strokeColor 和 strokeWidth 属性即可。这种方法简单，并且不需要创建任何额外的 XML 文件。

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:strokeColor="@color/black"
        app:strokeWidth="2dp"
        app:srcCompat="@drawable/sample_image" />

上述代码创建了一个宽度为2dp的黑色边框。

如果您想在圆形图像周围添加描边，可以使用shapeAppearanceOverlay属性。这允许您使用提供的形状（在此情况下为圆形）绘制位图。有关更多详细信息，请查看下面的代码：

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:shapeAppearanceOverlay="@style/circleImageView"
        app:srcCompat="@drawable/sample_image"
        app:strokeColor="@color/black"
        app:strokeWidth="2dp" />

将以下代码添加到您的styles.xml文件中：

<!-- Circle Shape -->
<style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

确保你的应用程序扩展了 Material Design 主题，以便使用 ShapeableImageView。

- Francis S

---

android:padding="2dp" 是必要的，以避免截断描边。 - Pezcraft

Answer 6

创建边框

在drawable文件夹中创建一个名为"frame_image_view.xml"的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替换为您想要的内容，或添加相应的dimen / color。

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

如果你想要定义的padding有效，你需要使用android:cropToPadding="true"。或者在ImageView中使用android:padding="@dimen/borderThickness"来达到同样的效果。

如果边框围绕父级而不是ImageView，请尝试使用android:adjustViewBounds="true"。

更改边框颜色

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

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。

- SuperSmartWorld

---

笔画看起来不错 - 但是，框架和图像之间有一个透明的间隙（顶部和底部）。 - Someone Somewhere

Answer 7

添加一个背景Drawable，比如res/drawables/background.xml：

<?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" />
...

如果您希望图片覆盖在背景上，请排除ImageView的填充(padding)。

- Stephen Niedzielski

Answer 8

这个术语在之前已经使用过，但并不是唯一的名称。

setCropToPadding(boolean);

如果为true，图像将被裁剪以适应其填充内部。

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

可以通过以下XML完成-

android:cropToPadding="true"

- Atul O Holic

Answer 9

您需要在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>

- Cabezas

Answer 10

对于那些正在寻找自定义边框和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"/>

- Khemraj Sharma