如何在 Imageview 中显示边框？

Posted 2023-04-13

【中文标题】如何在 Imageview 中显示边框？

【英文标题】：How To Display Border To Imageview?

【发布时间】：2011-08-16 00:22:41

【问题描述】：

朋友们如何给Imageview显示边框？

我想像移动图库一样显示所有图像都带有边框。

请给我 ans 感谢您的提前....

【参考方案1】：

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

如果您需要根据ImageView 的状态（focused、selected 等）更改此“边框”，那么您应该创建更多图层可绘制对象，并将它们组合到一个选择器中xml（状态可绘制）。 然后在您的主题中，您应该将ImageView 的背景设置为selector.xml。

更新 以下是如何为图像指定简单边框的示例，这将导致

你必须

创建一个新的图层可绘制文件 (image_border.xml)， 修改/创建您的styles.xml 文件 修改/创建您的colors.xml 文件 修改您的布局 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>

最后在 layout xml 中指定 ImageView 的样式：

<ImageView android:id="@+id/my_image" 
    android:layout_ android:layout_
    android:src="@drawable/efteling"
    style="@style/myImageView" />

【讨论】：

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

【参考方案2】：

您可以将此 XML 文件用作可绘制文件而不是多个文件，但是这 文件放在drawable文件夹中。在 ImageView 中使用这个 XML 文件作为 背景可绘制，例如：android:background="@drawable/following code file name".

希望对你有帮助。

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

【参考方案3】：

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

我记得我在下面的article 中读到过有关 Android 的 FrameLayout 的信息，说它可以帮助我们按照添加它们的顺序将 UI 元素堆叠在一起。

解决方案：

<FrameLayout
    android:layout_
    android:layout_
    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_
        android:layout_
        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_
        android:layout_
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/>
</FrameLayout>

预览：

就是这样。你会得到如下类似 imageView！

优点和缺点：

我认为这是一种在其他任何地方都可以使用的非常简单的解决方案，而且您所做的所有事情都集中在一个地方，因此更容易修改它。但是我不喜欢添加两个 ImageView。