如何向Imageview显示边框?

时间:2011-04-30 10:26:11

标签: android image imageview border android-imageview

朋友如何向Imageview显示边框?

我希望结果像移动图库所有带边框的图像显示。

请告诉我谢谢你提前......

3 个答案:

答案 0 :(得分:55)

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

如果您需要根据ImageView的状态(focusedselected等)更改此“边框”,那么您应该创建更多图层绘图,并且将它们放在一个选择器xml(状态drawable)中。
然后在您的主题中,您应该将ImageView的背景设置为selector.xml

<强>更新
下面是如何为图像指定简单边框的示例,这将导致

efteling with border

你必须

  1. 创建一个新的图层可绘制文件(image_border.xml),
  2. 修改/创建您的styles.xml文件
  3. 修改/创建您的colors.xml文件
  4. 修改您的布局xml文件(或您的代码)以将样式应用于ImageView
  5. <强> RES /抽拉/ 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 /值/ 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 /值/ 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" />
    

答案 1 :(得分:9)

您可以将此XML文件用作drawable而不是多个文件,但这样做 文件放在drawable文件夹中。在ImageView中使用此XML文件作为 background drawable,如: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:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

答案 2 :(得分:2)

我尝试了以上所有解决方案,但它们对我不起作用! 所以我想出了一个简单的解决方案! : - )

我记得我在下面的article中读到了关于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一样的内容!

preview of the ImageView with boarder

优点和缺点:

我认为这是在其他任何地方使用的非常简单的解决方案,并且您所做的所有事情都放在一个地方,因此更容易修改它。但是,我不想添加两个ImageView。