如何在ImageView中显示边框？

Question

朋友们如何在ImageView中显示边框？

我希望结果像手机相册那样，所有图片都带有边框。

请告诉我答案，提前感谢您...

- Piyush

Answer 1

您可以为您的ImageView的“边框”（实际上是背景）创建一个资源（图层可绘制的XML），并在您的theme中声明ImageView的背景资源为该可绘制的XML。

如果需要根据ImageView的状态（focused，selected等）更改此“边框”，则应创建更多的图层可绘制对象，并将它们组合成选择器XML（状态可绘制对象）。然后在主题中，您应将ImageView的背景设置为这个selector.xml。 更新 以下是如何指定简单边框的示例，结果如下所示： 您需要执行以下操作：

1. 创建一个新的图层可绘制文件 (image_border.xml)， 2. 修改/创建您的styles.xml文件 3. 修改/创建你的colors.xml文件 4. 修改您的布局 XML 文件（或您的代码），以将样式应用于 ImageView。 res/drawable/image_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="90" 
                android:startColor="@color/image_border_start" 
                android:centerColor="@color/image_border_center"
                android:endColor="@color/image_border_end" />
        </shape>
    </item>
    <item android:top="2dp" android:left="2dp" 
        android:right="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
        </shape>
    </item>
</layer-list>

res/values/styles.xml
添加以下行：

<style name="myImageView">
    <!-- 3dp so the background border to be visible -->
    <item name="android:padding">3dp</item>
    <item name="android:background">@drawable/image_border</item>
    <item name="android:scaleType">fitCenter</item>
</style>

res/values/colors.xml
添加以下行：

<color name="image_border_start">#40990000</color>
<color name="image_border_end">#FF660000</color>
<color name="image_border_center">#FFFF3333</color>

最后，在布局XML中指定ImageView的样式：

<ImageView android:id="@+id/my_image" 
    android:layout_width="100dp" android:layout_height="100dp"
    android:src="@drawable/efteling"
    style="@style/myImageView" />

- rekaszeru

---

如果边框变得更厚，这将覆盖图像视图。有没有办法不覆盖它？ - mskw

Answer 2

你可以使用这个XML文件作为一个drawable，而不是多个文件，但是这个文件需要放在drawable文件夹中。在ImageView中使用这个XML文件作为背景drawable，像这样：android:background="@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>

- Ajit Kumar Dubey

Answer 3

我尝试了所有上述的解决方案，但它们对我都没有用！所以我想出了一个简单的解决方案！:-)

我记得在以下文章中读到了关于Android的FrameLayout，它可以帮助我们将UI元素堆叠在彼此之上，顺序与添加它们的顺序相同。

解决方案：

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

预览：

就是这样。你将得到以下类似于imageView的内容！

优缺点：

我认为这是一个非常易于在任何其他地方使用的简单解决方案，而且你所做的所有事情都在一个地方，因此更容易修改。然而，我不喜欢必须添加两个ImageView。

- Randika Vishman