ImageView添加边框的正确姿势

/ 0评 / 16

前言

在开发Android TV应用的时候,往往需要对于焦点进行着重显示,让用户知道当前选中的东西是啥,一般来说就是放大选中的控件并且添加一个发光的边框即可,今天遇到了一个ImageView添加边框的问题,下面就介绍下踩坑之旅。

使用shape以及.9图

对于ImageView来说,有两个地方可以设置“内容”,一个是android:background另一个是android:src,分别对应着设置ImageView的背景以及前景,关于两个的差别可以查看ImageView中XML属性src和background的区别,这样的话我们就可以将边框设置为背景,然后将图片设置为前景即可(一般的图片加载框架也是讲图片设置到ImageView的前景)。

方法一:使用shape标签绘制边框

在/src/drawable/下新建一个xml文件,文件内容如下,设置边框颜色为紫色,然后边框宽度为2dp,还有一点圆角效果:

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

    <stroke
        android:width="2dp"
        android:color="#ff00ff" />

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

</shape>

方法二:使用.9图直接设置背景,关于.9图的介绍可以查看Android中的.9图片这篇博客

方法三:直接使用第三方框架

效果图:

嗯,效果好多了,网上能百度到的博客往往就是在这里就介绍了,不过都没有写出当加载图片以后的效果图,下面就贴出使用Android-Universal-Image-Loadee框架加载了网络图片以后的效果。可以看到,使用shape标签设置边框当图片加载完毕以后不会有任何效果,使用.9图的方法图片并没有按照预期那样显示。

曲线救国方案

其实通过上面的实验我们可以知道,边框的设置是有效的,只不过当同时设置ImageView的前景和背景的时候会出现问题,所以我们可以相当的曲线救国方案就是使用一个ViewGroup包裹ImageView,然后将边框设置到这个ViewGroup中即可,如下代码所示。

<FrameLayout
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/demo_selector"
    android:focusable="true" >

    <ImageView
        android:id="@+id/t2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:duplicateParentState="true"
        android:scaleType="centerCrop" />
</FrameLayout>

效果图:

可以看到,效果还是很不错的,不过由于多嵌套了一层布局,所以效率方面肯定是有影响的,不过一般不会直接给一个图片添加边框而是一个复杂布局,所以这还是可以接受的,另一个影响就是由于一般美工给的边框图都有一个边框宽度,并且为了美观往往光晕是渐变的,所以最外面不可见的区域在界面上表现出来的就是自带了margin

曲线救国方案二

如果我们需要加载的图片不是海报等需要占满整个ImageView的图片,比如应用图标、选项菜单等允许内容边上有透明区域的情况,那么我们也可以直接给ImageView设置一个padding,这样就不需要在外围多嵌套一层了,ImageView对src有效,对background无效

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注