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

ProgressBar自定义样式中的层叠图片显示问题

2014-10-20 21:44 267 查看
android系统自带的那个progressbar比较戳,开发都会重新定义。

先看下效果:


肿么杨啊,比系统的好看多了吧

progressbar:

[html] view
plaincopy

<ProgressBar

android:id="@+id/downloadbar"

android:layout_width="fill_parent"

android:layout_height="10dip"

style="?android:attr/progressBarStyleHorizontal"

android:progressDrawable="@drawable/progressbar_layer_list"

android:background="@drawable/progressbar_box"

/>

其中的progressbar_layer_list

[html] view
plaincopy

<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

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

<clip>

<shape>

<corners android:radius="15dip" />

<gradient android:startColor="#00b7ee" android:endColor="#0075a9" android:angle="270" android:centerY="0.75"/>

</shape>

</clip>

</item>

<item android:id="@android:id/secondaryProgress">

<clip>

<shape>

<corners android:radius="15dip" />

<gradient android:startColor="#00b7ee" android:endColor="#0075a9" android:angle="270" android:centerY="0.75"/>

</shape>

</clip>

</item>

<item android:id="@android:id/progress">

<clip>

<shape>

<gradient android:startColor="#00b7ee" android:endColor="#0075a9" android:angle="270" android:centerY="0.25"/>

<corners android:radius="15dip"/>

</shape>

</clip>

</item>

</layer-list>

background图片:



如果需要图片作为背景的话:

[java]
view plaincopy

<?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/loading_bg"/>

<item
android:id="@android:id/progress">
<clip
android:clipOrientation="horizontal"
android:drawable="@drawable/loading_line"
android:gravity="left" >
</clip>
</item>

<!-- <item android:id="@android:id/progress"> -->
<!-- <clip > -->
<!-- <shape > -->
<!-- <corners android:radius="8dip" /> -->
<!-- <gradient -->
<!-- android:angle="270" -->
<!-- android:endColor="#111111" -->
<!-- android:startColor="#FFFFFF" /> -->
<!-- </shape> -->
<!-- </clip> -->
<!-- </item> -->

</layer-list>

这里注意,名字必须按照 “@android:id/backgroud” “@android:id/secondaryProgress” “@android:id/progress”三种形式来写;

这样就可以自动的增加进度条量了。c

clip 这个属性需要加上,否则显示会不正常。

======================================================================================================

安卓系统提供了水平进度条ProgressBar的样式,而我们在实际开发中,几乎不可能使用默认的样式,原因就是“太丑”^_^

所以我们在更多的时候需要对其颜色进行自定义,主要使用就是自定义样式文件。

再在drawable目录下新增progressbar.xml文件,可以设置默认背景色和进度条的颜色

(值得一提的是支持渐变色)

代码:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

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

<shape>

<corners android:radius="5dip" />

<gradient

android:angle="0"

android:centerColor="#ff5a5d5a"

android:centerY="0.75"

android:endColor="#ff747674"

android:startColor="#ff9d9e9d" />

</shape>

</item>

<item android:id="@android:id/secondaryProgress">

<clip>

<shape>

<corners android:radius="5dip" />

<gradient

android:angle="0"

android:centerColor="#80ffb600"

android:centerY="0.75"

android:endColor="#a0ffcb00"

android:startColor="#80ffd300" />

</shape>

</clip>

</item>

<item android:id="@android:id/progress">

<clip>

<shape>

<corners android:radius="5dip" />

<gradient

android:angle="0"

android:endColor="#8000ff00"

android:startColor="#80ff0000" />

</shape>

</clip>

</item>

</layer-list>

布局文件定义如下:

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="fill_parent"

android:layout_height="7.5dp"

android:max="100"

android:progress="80"

android:layout_marginRight="8dp"

android:progressDrawable="@drawable/progressbar"

android:visibility="visible"/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐