首页 > 代码库 > android 自己定义水平和圆形progressbar 仅仅定义一些style就能够
android 自己定义水平和圆形progressbar 仅仅定义一些style就能够
效果图:
改动progressbar 让他满足自己的需求一般来说仅仅改动一下,progressbar的style就能够满足需求了:
activity代码:只显示一个布局而已
package com.example.testcustomprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
xml界面:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.testcustomprogressbar.MainActivity" > <ProgressBar android:id="@+id/my_customprogressbar1" style="@style/mycustom_progressbar1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <ProgressBar android:id="@+id/my_customprogressbar2" style="@style/mycustom_progressbar2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/my_customprogressbar1" android:layout_below="@+id/my_customprogressbar1" android:layout_marginTop="26dp" /> <ProgressBar android:id="@+id/my_customprogressbar3" style="@style/mycustom_progressbar3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/my_customprogressbar2" android:layout_below="@+id/my_customprogressbar2" android:layout_marginTop="26dp" /> <ProgressBar android:id="@+id/my_customprogressbar4" style="@style/mycustom_progressbar_hor" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_below="@+id/my_customprogressbar3" android:layout_centerHorizontal="true" android:layout_marginTop="22dp" android:max="100" android:progress="40" android:secondaryProgress="60" /> <ProgressBar android:id="@+id/my_customprogressbar5" style="@style/mycustom_progressbar_hor2" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_alignLeft="@+id/my_customprogressbar4" android:layout_below="@+id/my_customprogressbar4" android:layout_marginTop="26dp" android:max="100" android:progress="40" android:secondaryProgress="60" /> </RelativeLayout>
第一种圆形progressbar 只让一个图片旋转起来:
style的代码:
<style name="mycustom_progressbar1"> <item name="android:indeterminateDrawable">@drawable/progressbar_ver_image</item> <item name="android:minHeight">30dp</item> <item name="android:minWidth">30dp</item> <item name="android:maxHeight">60dp</item> <item name="android:maxWidth">60dp</item> </style>
progressbar_ver_image的代码:
<?xml version="1.0" encoding="utf-8"?> <!-- 定义一个旋转的动画 ,图片是我们自己定义的--> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/resizeapi" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > </rotate>
另外一种圆形progressbar 使用一个动画:
style:
<style name="mycustom_progressbar2"> <item name="android:indeterminateDrawable">@drawable/progressbar_ver_animation</item> <item name="android:minHeight">60dp</item> <item name="android:minWidth">60dp</item> <item name="android:maxHeight">100dp</item> <item name="android:maxWidth">100dp</item> </style>
progressbar_ver_animation的代码:
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/ok1" android:duration="250"/> <item android:drawable="@drawable/ok2" android:duration="250"/> <item android:drawable="@drawable/ok3" android:duration="250"/> <item android:drawable="@drawable/ok4" android:duration="250"/> </animation-list>
第三种圆形progressbar 使用shape来构建drawable:
<style name="mycustom_progressbar3"> <item name="android:indeterminateDrawable">@drawable/progressbar_ver_shape</item> <item name="android:minHeight">60dp</item> <item name="android:minWidth">60dp</item> <item name="android:maxHeight">100dp</item> <item name="android:maxWidth">100dp</item> </style>
progressbar_ver_shape的代码:
<?xml version="1.0" encoding="utf-8"?> <!-- 定义一个旋转的动画 ,图片是我们自己定义的shape --> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false" > <gradient android:centerColor="#FFFFFF" android:centerY="0.50" android:endColor="#1E90FF" android:startColor="#000000" android:type="sweep" android:useLevel="false" /> </shape> </rotate>
第四种: 横向progressbar 复制粘贴系统的style,然后改动:
<?xml version="1.0" encoding="utf-8"?> <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="#ffff0000" android:centerColor="#ffff0000" android:centerY="0.75" android:endColor="#ffff0000" android:angle="270" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#800000ff" android:centerColor="#800000ff" android:centerY="0.75" android:endColor="#800000ff" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress" > <clip > <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff00ff00" android:centerColor="#ff00ff00" android:centerY="0.75" android:endColor="#ff00ff00" android:angle="270" /> </shape> </clip> </item> </layer-list>
这样直接在progressbar中引用该style就能够满足需求了,当然我们也能够把progressbar background progress secondprogress都分别定义成一个drawable,然后使用:
background:
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dip" /> <gradient android:angle="270" android:centerColor="#ffff0000" android:centerY="0.75" android:endColor="#ffff0000" android:startColor="#ffff0000" /> </shape>
progress:
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dip" /> <gradient android:angle="270" android:centerColor="#ff00ff00" android:centerY="0.75" android:endColor="#ff00ff00" android:startColor="#ff00ff00" /> </shape>
secondprogress:
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dip" /> <gradient android:angle="270" android:centerColor="#800000ff" android:centerY="0.75" android:endColor="#800000ff" android:startColor="#800000ff" /> </shape>
这个时候style中的代码就会清晰一点:
<?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/progressbar_hor_bg"> </item> <item android:id="@android:id/secondaryProgress"> <clip android:drawable="@drawable/progressbar_hor_second_progress" > </clip> </item> <item android:id="@android:id/progress"> <clip android:drawable="@drawable/progressbar_hor_progress" > </clip> </item> <!-- progress 这个地方原作者写的是一个点9的图--> <!-- <item android:id="@android:id/progress"> <clip> <nine-patch android:src=http://www.mamicode.com/"@drawable/progress_patch_galy" /> >
嘿嘿..最后,做人要厚道:神一般男人的原博主博文连接http://blog.csdn.net/mad1989/article/details/38042875
对了,代码还是贴上来吧.总感觉在ide中直接看代码会更舒服一些:http://download.csdn.net/detail/u010399316/9000197
android 自己定义水平和圆形progressbar 仅仅定义一些style就能够