现在做的项目遇到一个问题,设计给过来的图片只有一种状态,但是实现的需求是要求有两个状态,另一种选状态为图片背景加边框。如图:

刚开使用使用ImageView ,ImageViewButton 效果不是很明显;

后来发现 layer-list 能很好的实现这个效果,先分别建 正常模式与选中模式的xml文件:

正常模式:btn_angle_normal_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> <solid android:color="@color/transparent_half" />
<stroke
android:width="@dimen/dimen_6px"
android:color="@color/transparent_half" />
<padding
android:bottom="0.0dip"
android:left="0.0dip"
android:right="0.0dip"
android:top="0.0dip" />
</shape>
选中模式:btn_angle_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"> <solid android:color="@color/transparent_half" />
<stroke
android:width="@dimen/dimen_6px"
android:color="@color/gold" />
<padding
android:bottom="0.0dip"
android:left="0.0dip"
android:right="0.0dip"
android:top="0.0dip" />
</shape>
Selector :common_recangle_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btn_angle_bg" android:state_pressed="true" />
<item android:drawable="@drawable/btn_angle_bg" android:state_selected="true" />
<item android:drawable="@drawable/btn_angle_normal_bg" android:state_enabled="true" />
</selector>
Layer-list文件:zhuang_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/common_recangle_bg" /> //这里是normal与press的xml文件
<item
android:bottom="@dimen/dimen_4px"
android:drawable="@mipmap/bai_table_zhuang_up" //这里是背景图片
android:left="@dimen/dimen_4px"
android:right="@dimen/dimen_4px"
android:top="@dimen/dimen_4px" />
</layer-list>

然后在布局里的内部控件使用:

 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/zhuang_btn"
android:gravity="bottom|center"
android:text="4545\n"
android:textSize="@dimen/dimen_tv_20" />

基本这样可以实现了这个效果!

【android开发笔记】为Button的背景图片添加边框式样式效果的更多相关文章

  1. android图像处理系列之四-- 给图片添加边框(上)

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  2. android图像处理系列之五-- 给图片添加边框(中)

    前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...

  3. android图像处理系列之四--给图片添加边框(上)

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  4. android图像处理系列之五--给图片添加边框(中)

    前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...

  5. Android 开发笔记___SD卡基本操作__图片读取写入

    package com.example.alimjan.hello_world.Utils; import android.graphics.Bitmap; import android.graphi ...

  6. Android学习笔记进阶19 之给图片加边框

    //设置颜色 public void setColour(int color){ co = color; } //设置边框宽度 public void setBorderWidth(int width ...

  7. Android学习笔记进阶19之给图片加边框

    //设置颜色 public void setColour(int color){ co = color; } //设置边框宽度 public void setBorderWidth(int width ...

  8. android图像处理系列之六-- 给图片添加边框(下)-图片叠加

    前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...

  9. android图像处理系列之六--给图片添加边框(下)-图片叠加

    前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...

随机推荐

  1. Javascript 页面刷新

    Javascript 页面刷新的实现代码收藏 1 2 3 4 5 6 7 8 history.go(0) location.reload() location=location location.as ...

  2. 关于IP网段间互访的问题—路由是根本(转)

    源: 关于IP网段间互访的问题—路由是根本

  3. java class加载机制及对象生成机制

    java class加载机制及对象生成机制 当使用到某个类,但该类还未初始化,未加载到内存中时会经历类加载.链接.初始化三个步骤完成类的初始化.需要注意的是类的初始化和链接的顺序有可能是互换的. Cl ...

  4. c# 正则表达式的用户

    Regex emailregex = new Regex("(?<user>[^@]+)@(?<host>.+)"); if(emailregex.IsMa ...

  5. console 高级用法

    console.log()用法,相信大家都很熟悉了,这里就不再啰嗦. 下面来玩几个新鲜点的,我用的是chrome28,不保证兼容其他浏览器:console.log的第一个参数中可以指定一个格式字符,这 ...

  6. Latex 的Table使用multirow and multicolumn

    Here are some tips: Use a \multicolumn{1}{|l}{} & \multicolumn{2}{l|}{...} construct; Add anothe ...

  7. 在官网下载了最新版的PHP,解压后的安装包里为什么没有php5isapi.dll这个dll文件?

    因为自PHP 5.3.1版本开始,PHP便已不在支持ISAPI模式,所以你在PHP5.3.1版本以上的php目录中看不到php5isapi.dll文件. 那么,IIS6下跑PHP 5.3.1以上版本时 ...

  8. jQuery原型技术分解

    jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...

  9. js模块化开发——require.js的实战写法1

    关于在Require.js使用一个JS插件的问题 我需要在项目中引用一个js控件,这个控件依赖于a.js,b.js,c.js,.....n.js N多个js以及jquery及jquery-ui,各js ...

  10. 解剖 Elasticsearch 集群 - 之三

    解剖 Elasticsearch 集群 - 之三 本篇文章是一系列涵盖 Elasticsearch 底层架构和原型示例的其中一篇.在本篇文章中,我们会讨论 Elasticsearch 如何提供准实时搜 ...