您的位置:首页 > 移动开发 > Android开发

【android开发笔记】为Button的背景图片添加边框式样式效果

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



刚开使用使用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" />


基本这样可以实现了这个效果!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: