您的位置:首页 > Web前端 > CSS

ProgressBar、SeekBar、RatingBar 自定义样式

2014-03-19 22:31 302 查看
RatingBar:小星星风格
style="?android:attr/ratingBarStyleSmall"

将星星替换成别的图标:
1)共四张图片:填满的“星星”和未填满的“星星”的选中和未选中状态
2)新建xml文件:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item // 未填满的星星selector
android:id="@+android:id/background"
android:drawable="@drawable/ratingbar_full_empty_holo_light"/>
<item // 未填满的星星selector 第二进度
android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/ratingbar_full_empty_holo_light"/>
<item // 填满的星星 selector 第一进度
android:id="@+android:id/progress"
android:drawable="@drawable/ratingbar_full_filled_holo_light"/>
</layer-list>

3)未填满星星的两种状态的selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/btn_rating_star_off_pressed_holo_light"
android:state_pressed="true"
android:state_window_focused="true"/>
<item android:drawable="@drawable/btn_rating_star_off_normal_holo_light"/>
</selector>

4)填满星星的两种状态的selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btn_rating_star_off_pressed_holo_light"
android:state_pressed="true"
android:state_window_focused="true"/>
<item android:drawable="@drawable/btn_rating_star_off_normal_holo_light"/>
</selector>
5)设置ProgressDrawable属性。

ProgressBar:
共有三个颜色:底色、第二进度颜色、主要进度颜色
1)新建xml文件 custompb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background"

android:drawable="@android:drawable/progress_bg_holo_dark" /> // 底色图片
<item android:id="@android:id/secondaryProgress">
<scale android:scaleWidth="100%"

android:drawable="@android:drawable/progress_secondary_holo_dark" /> // 第二进度图片
</item>
<item android:id="@android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="@android:drawable/progress_primary_holo_dark" /> // 主要进度图片
</item>

</layer-list>

2)准备三个经过处理的 .9 图片。

3)在布局文件的ProgressBar节点中添加属性:
progressDrawable = "@drawable/custompb"

SeekBar:
进度条属性,与 ProgressBar 的xml文件一样
android:progressDrawable="@drawable/scrubber_progress_horizontal_holo_light"
拖动按钮图片属性:
android:thumb="@drawable/scrubber_control_selector_holo"

<selector xmlns:android="http://schemas.android.com/apk/res/android">

// 不可用状态下显示的图标
<item android:state_enabled="false"
android:drawable="@android:drawable/scrubber_control_disabled_holo" />

// 按下状态下显示的图标
<item android:state_pressed="true"
android:drawable="@android:drawable/scrubber_control_pressed_holo" />

// 选中状态下的图标
<item android:state_selected="true"
android:drawable="@android:drawable/scrubber_control_focused_holo" />

// 普通无动作状态下的图标
<item android:drawable="@android:drawable/scrubber_control_normal_holo" />

</selector>

可以只选择 state_pressed 状态和 无动作状态。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: