[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]
[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]
[size=medium] 修改按钮背景,android:background="@drawable/bt_bg",运行。[/size]
[size=medium]二、EditText美化
直接为编辑框写一个selector,新建et_bg,EditText状态判断要用android:state_focused(试试其他),这里直接在<item></item>中嵌一个<shape></shape>:[/size]
[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]
先说下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]