SeekBar_安科网

这里实现了如下所示的进度条

进度条如线状显示，带有少许发散效果

拖拽按钮用圆显示，采用发散效果。（类似太阳的效果）

接下来边贴代码边介绍。这里是基于android源码给出的实例修改而成的（只给出了部分重要代码），首先给出主界面

Java代码复制代码收藏代码

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"><!--

<SeekBarandroid:id="@+id/seek1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100"

android:progress="50"

android:secondaryProgress="75"/>

--><SeekBarandroid:id="@+id/seek"

android:layout_width="fill_parent"android:progressDrawable="@drawable/seekbar_style"

android:thumb="@drawable/thumb1"android:layout_height="wrap_content"

android:paddingLeft="2px"android:paddingRight="3dip"

android:paddingBottom="4px"/>

<TextViewandroid:id="@+id/progress"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

<TextViewandroid:id="@+id/tracking"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

[java]viewplaincopy

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"><!--

<SeekBarandroid:id="@+id/seek1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100"

android:progress="50"

android:secondaryProgress="75"/>

--><SeekBarandroid:id="@+id/seek"

android:layout_width="fill_parent"android:progressDrawable="@drawable/seekbar_style"

android:thumb="@drawable/thumb1"android:layout_height="wrap_content"

android:paddingLeft="2px"android:paddingRight="3dip"

android:paddingBottom="4px"/>

<TextViewandroid:id="@+id/progress"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

<TextViewandroid:id="@+id/tracking"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

注意一下两个属性

Java代码复制代码收藏代码

android:progressDrawable="@drawable/seekbar_style"//进度条

android:thumb="@drawable/thumb1"//拖拽按钮

[java]viewplaincopy

android:progressDrawable="@drawable/seekbar_style"//进度条

android:thumb="@drawable/thumb1"//拖拽按钮

它们对应的xml档案如下：

thumb1.xml

Xml代码复制代码收藏代码

<?xmlversion="1.0"encoding="UTF-8"?>

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

<itemandroid:state_focused="true"android:state_pressed="true">

<shapeandroid:shape="oval">

<gradientandroid:type="radial"android:gradientRadius="8"

android:angle="0"android:startColor="#FFFF0000"

android:centerColor="#FF00FF00"android:endColor="#000000"/>

<sizeandroid:width="16dip"android:height="16dip"></size>

</shape>

</item>

......//这里用的oval椭圆，注意gradientandroid:type=

......//"radial"android:gradientRadius="8"这两个属性需

......//要一起使用。

......

</selector>

[xml]viewplaincopy

<?xmlversion="1.0"encoding="UTF-8"?>

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

<itemandroid:state_focused="true"android:state_pressed="true">

<shapeandroid:shape="oval">

<gradientandroid:type="radial"android:gradientRadius="8"

android:angle="0"android:startColor="#FFFF0000"

android:centerColor="#FF00FF00"android:endColor="#000000"/>

<sizeandroid:width="16dip"android:height="16dip"></size>

</shape>

</item>

......//这里用的oval椭圆，注意gradientandroid:type=

......//"radial"android:gradientRadius="8"这两个属性需

......//要一起使用。

......

</selector>

seekbar_style.xml

Xml代码复制代码收藏代码

<?xmlversion="1.0"encoding="UTF-8"?>

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

................//

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

<clip>

<shapeandroid:shape="rectangle">

<cornersandroid:radius="2dip"/>

<gradientandroid:startColor="#80000000"android:width="5dp"

android:centerColor="#7e209e"android:centerY="0.5"android:angle="90"

android:endColor="#80000000"/>

<strokeandroid:width="8dp"android:color="#80000000"

android:dashwidth="3dp"android:dashGap="2dp"/>

</shape>

</clip>

............//在这里设置高度实验了很多次总是行不通（谁要是通过

............//这种方法搞定高度，记得留言给我(～o～)~）

............//于是使用了一个遮罩层（边框），因为边框的高度也

............//是由seekbar决定的。这里将进度条的大部分遮

............//罩，只留出中间一部分。还有注意这里的边框

............//使用的间隔效果，所以会有发散的效果。具体效果怎样

............//需要自己测试一下，这里就不贴图了。

</layer-list>

SeekBar

相关推荐