android中自定义控件的属性
一、Android中自定义SeekBar的背景颜色，进度条颜色，以及滑块的图片
在Android中的控件种类已经足够我们使用，但是有时候大家需要根据美工的设计来改变一些控件的颜色，式样，以及背景图片
最近正好有这方面的需要，用了很久时间，找到了改变基本颜色以及图片的方法
下面以SeekBar为例，为大家描述一下我的做法
首先在layout文件夹中的main.xml内容如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <SeekBar android:id="@+id/seek" android:layout_width="300px" android:layout_height="wrap_content" android:max="100" android:progress="50" android:progressDrawable="@drawable/seekbar_img" android:thumb="@drawable/thumb" /> </LinearLayout>
很简单，只有一个SeekBar控件，注意它的android:progressDrawable="@drawable/seekbar_img"以及android:thumb="@drawable/thumb"它们分别对应的是 进度条的图片以及拖动滑块的图片，这里的图片也可以是我们自定义的drawable中的xml文件，可以理解成这两个属性应该如何显示的意思,而@drawable/seekbar_img和@drawable/thumb它们分别对应着 drawable 文件夹中的文件seekbar_img.xml和thumb.xml，它们表示着如何去显示进度条与滑块
当初我想的是在网上找SeekBar的原始样式文件是如何定义，这样就可以照搬代码，修改一些我需要的图片以及颜色和大小就行了，于是就开始搜索,这里要用到的是Android的系统源码，具体下载办法网上很多，需要用到cygwin,大家可以参考http://tech.it168.com/a2009/0529/579/000000579026.shtml
下好源代以后，可以在 C:\cygwin\home\android\frameworks\base\core\res\res\drawable 这个路径下找到很多图片与android的原始控件样式（即xml文件)
找一下，哈哈，好东西可不少，以后要改样式全靠它们了
我们可以在这是里面找到seek_thumb.xml，内容如下:
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <!-- This is the thumb on the seek bar. --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:state_window_focused="true" android:drawable="@drawable/seek_thumb_pressed" /> <item android:state_focused="true" android:state_window_focused="true" android:drawable="@drawable/seek_thumb_selected" /> <item android:state_selected="true" android:state_window_focused="true" android:drawable="@drawable/seek_thumb_selected" /> <item android:drawable="@drawable/seek_thumb_normal" /> </selector>
它定义的是seekbar的滑块样式，内容很简单，大家应该看得懂，分别对应着按下，选中，以及获得焦点时滑块的图片
另外，我们还可以找到 progress_horizontal.xml,内容如下:
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" /> </shape> </clip> </item> </layer-list>
有了这两个文件的源代码，我们就可以依样画葫芦了
首先在自己的工程下drawable文件夹中建立seekbar_img.xml文件与thumb.xml文件
我写的两个文件内容如下
seekbar_img.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 背景图 --> <item android:id="@+android:id/background" android:drawable="@drawable/bg" /> <!--全部能量图 --> <item android:id="@+android:id/SecondaryProgress" android:drawable="@drawable/bg" /> <!-- 进和能量图 --> <item android:id="@+android:id/progress" android:drawable="@drawable/bg2" /> </layer-list>
thumb.xml
<?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/bg3" /> <!-- 普通无焦点状态 --> <item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/bg4" /> </selector>
在项目的布局文件中将seekbar的配置增加上面自定义的内容：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"><SeekBar android:id="@+id/seek"
android:layout_width="300px"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:progressDrawable="@drawable/seekbar_img"
android:thumb="@drawable/thumb"/></LinearLayout>
这时运行程序，我的截图如下，丑了点，但是目的达到了
这是根据自己要求修改样式比较简单的做法
下面是这个工程的源代码
- SeekBar.rar(48.8 KB)
二、android中自定义checkbox大小和图片
在编程过程中使用android自带的checkbox显示过大，在网上找了很多文章，终于使用自定义的checkbox使显示更加美观。
网上说：这个控件其实就是个TextView
加了个图片，你只要做两张png的图片，在darwable中用xml定义好点击事件，再在你的控件上把这个当背景引进来就可以了。但是这样做了以后显示效果还是不佳。说说我的做法吧：
1、找两张图片http://findicons.com/search/checkbox# 分别为选中和没选中的。命名为checkbox和checkbox_empty
2、在drawable中创建文件checkbox_selector.xml：
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/checkbox"/><!--选中效果--> <item android:state_checked="false" android:drawable="@drawable/check_empty"/><!--未选中效果--> <!--修改成你自己的图片就可以了--></selector>
注意：这里的状态是android:state_checked
3、在values中创建styles.xml：
<?xml version="1.0" encoding="utf-8"?><resources> <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox"> <item name="android:button">@drawable/checkbox_selector</item> <item name="android:paddingLeft">25.0dip</item> <item name="android:maxHeight">10.0dip</item> </style></resources>
4、在你的CheckBox中添加属性：
<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/MyCheckBox" />
经过以上步骤应该可以了。我对style和selector的使用也不熟悉，大家一起学习~
这里查过的资料有：http://www.eoeandroid.com/forum.php?mod=viewthread&tid=70428
http://topic.csdn.net/u/20101030/12/705ede36-c873-4d07-af0d-34c6b9145480.html
http://blog.sina.com.cn/s/blog_7898b0530100rfgs.html
最后上个图吧：
让CheckBox的选择框显示在右边
只要注意android:button和android:drawableRight就行了：
<style name="style_checkbox"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:paddingRight">25dp</item> <item name="android:paddingTop">5dp</item> <item name="android:paddingBottom">5dp</item> <item name="android:textColor">@color/white</item> <item name="android:textSize">@dimen/font_middle</item> <item name="android:textStyle">italic</item> <item name="android:singleLine">true</item> <item name="android:button">@null</item> <item name="android:drawableRight">@drawable/mycheckbox</item> <item name="android:drawablePadding">5dp</item> <item name="android:background">@android:color/transparent</item> </style>
三、Android 自定义RadioButton的样式
我们知道Android控件里的button，listview可以用xml的样式自定义成自己希望的漂亮样式。
最近用到RadioButton，利用xml修改android:background="@drawable/button_drawable"，其中button_drawable为自己定义的.xml文件（res/drawable文件下），但是不成功，到网上查找，也没有正确的说法，我就开始自己尝试，最后做好了。
其实方法很简单，同样在res/drawable新建radiobutton.xml如下:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/check" /> <item android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/checknull" /> </selector>
check和checknull分别为选中和位选中的图片,然后在你的布局文件中，RadioButton 布局中设置android:button = "@drawable/radiobutton"，就可以了。
前后图片对比如下：
具体可拆分为3步：
1、定义：新建Android XML文件，类型选Drawable,根结点选selector，在这定义具体的样式
radio_language.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:state_window_focused="false" android:drawable="@drawable/radio_hover" /> <item android:state_checked="false" android:state_window_focused="false" android:drawable="@drawable/radio_normal" /> <item android:state_checked="true" android:state_pressed="true" android:drawable="@drawable/radio_active" /> <item android:state_checked="false" android:state_pressed="true" android:drawable="@drawable/radio_active" /> <item android:state_checked="true" android:state_focused="true" android:drawable="@drawable/radio_hover" /> <item android:state_checked="false" android:state_focused="true" android:drawable="@drawable/radio_normal_off" /> <item android:state_checked="false" android:drawable="@drawable/radio_normal" /> <item android:state_checked="true" android:drawable="@drawable/radio_hover" /> </selector>
2、项目中引用上面的自定义RadioButton的方法与Button不同，并不是设置Background属性,而是设置style属性,所以我们要在style.xml文件中为自定义的RadioButton定义一个style：
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomTheme" parent="android:Theme"> <item name="android:radioButtonStyle">@style/RadioButton</item> </style> <style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton"> <item name="android:button">@drawable/radio_language</item> </style> </resources>
3、项目中如何应用自定义的RadioButton：
<RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/RadioButton" />
Android中如何设置RadioButton在文字的右边，即图标在右边
解决方法 ：
第一步：
android:button="@null"这条语句将原来系统的RadioButton图标给隐藏起来。
第二步：
android:drawableRight="@android:drawable/btn_radio"这条语句
在原来图标的右边添加一个系统自带的btn_radio图标，我想RadioButton就是在btn_radio图标上进行封装而已。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:button="@null" android:checked="true" android:drawableRight="@android:drawable/btn_radio" android:paddingLeft="10dp" android:text="RadioButton" /> <RadioButton android:id="@+id/button2" android:layout_width="319dp" android:layout_height="wrap_content" android:button="@null" android:drawableRight="@android:drawable/btn_radio" android:paddingLeft="10dp" android:text="RadioButton" /> </RadioGroup></LinearLayout>
四、自定义ListView中的分割线
ListView中每个Item项之间都有分割线，设置android:footerDividersEnabled表示是否显示分割线，此属性默认为true。
1.不显示分割线只要在ListView控件中添加android:footerDividersEnabled="false"即可。
<ListView android:id="@+id/local_groups_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:footerDividersEnabled="false" />
2.改变ListView的分割线颜色和宽度，需要在布局中定义android:divider和android:dividerHeight属性。
<ListView android:id="@+id/local_groups_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="@color/divider_color" android:dividerHeight="1px" />
更多相关文章
- android 标题栏下拉选择控件（下拉菜单宽度全屏显示spinner）
- android文件下载与保存
- Android开发之基本控件和详解四种布局方式
- android 上实现 控件平滑移动(smooth move) 研究
- android 扫描文件（sdcard添加新的音乐文件时候后，可扫描到）