5、控件美化(drawable使用)

本文详细介绍如何通过自定义 drawable 资源来美化 Android 应用中的 Button 和 EditText 控件,包括设置背景颜色、边框样式及实现交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[size=medium] 先前的回复页面虽然搭好了,功能也实现了,但页面总显得不太美观(虽然已经加入了android:background,给了些背景),感觉是和用户没有太多的交互(如EditText的边框选中没选中的颜色变化,Button按没按下的颜色变化等)。

先说下android:background,这是设置控件的背景,值可以为一个颜色(#AARRGGBB,AA透明度可省略),一个drawable,分两种,一种为引入的图片资源(如@drawable/ic_launcher),另一种就是使用xml描述的drawable资源(什么,怎么建?),重点说下第二种。

一、Button美化

为按钮的背景写一个xml,File/New/Other(Ctrl+N)→Android/Android XML File→Resource Type选择drawable,Root Element选择shape,输入名字bt_bgnormal→Finish。shape默认是一块矩形区域(不止矩形,还有其他)。
[/size]
[align=center][img]http://dl2.iteye.com/upload/attachment/0124/2153/f3a850a5-15c3-335b-9c42-34a9932efb40.jpg[/img][/align]
[size=medium] 有下列可选项:

<solid />,内部填充,包含属性android:color,可设置填充颜色。
<corners />,四角圆角半径,包含android:radius等,可设置矩形圆角。
<stroke />,描边,包含android:width,描边宽度,android:color,描边颜色。
<等 />
这里给填充#F00088FF,圆角2dp,不描边。[/size]

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

<solid android:color="#F00088FF"/>
<corners android:radius="2dp" />
<stroke android:width="0dp" android:color="@null" />

</shape>

[color=gray][size=medium]注:Android Studio会有预览,这个没有。[/size][/color]

[size=medium] 修改按钮背景,android:background="@drawable/bt_bgnormal",预览。[/size]

[size=medium] 点击颜色还是没有变化,别急,再建立一个按下时的shape,复制bt_bgnormal,改名bt_bgselect,并将填充改为#FF0088FF,如何点击时切换,需要另一种drawable,selector(选择器,可以判断不同的状态,改变不同的属性),包含选项:<item />,包含属性,android:state_xxx,不同的状态,android:drawable,就是drawable。
按钮是否按下,用android:state_pressed(试试其他的),true时drawable="@drawable/bt_bgselect",false时bt_bgnormal。[/size]

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

<item android:state_pressed="true" android:drawable="@drawable/bt_bgselect" />
<item android:state_pressed="false" android:drawable="@drawable/bt_bgnormal" />

</selector>


[size=medium] 修改按钮背景,android:background="@drawable/bt_bg",运行。[/size]

[size=medium]二、EditText美化

直接为编辑框写一个selector,新建et_bg,EditText状态判断要用android:state_focused(试试其他),这里直接在<item></item>中嵌一个<shape></shape>:[/size]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_focused="true">
<shape>
<solid android:color="#E0E0E0"/>
<corners android:radius="2dp" />
<stroke android:width="1.5dp" android:color="#FF0088FF"/>
</shape>
</item>
<item android:state_focused="false">
<shape>
<solid android:color="#E0E0E0"/>
<corners android:radius="2dp" />
<stroke android:width="1.5dp" android:color="#880088FF"/>
</shape>
</item>

</selector>

[size=medium] 运行,EditText好像android:state_focused="false"触发不了,在<Button/>中加入android:focusable="true"和android:focusableInTouchMode="true",意思是点击时获得焦点,同时EditText失去焦点android:state_focused="false"触发,运行,不怎么好看(配色不好,功能还可以)。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2155/e41e32bc-6925-34c1-9eca-4406f0a96a9f.gif[/img]
[color=gray][size=medium]注:这是一个.gif动图,ctrl点击图片查看。[/size][/color]

[align=right][size=medium]不能放弃——2016/10/21[/size][/align]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值