music player:二(SeekBar,drawable/thumb,drawable/seekbar_style)---样式

本文介绍如何在Android中定制SeekBar样式,包括解决进度条高度变化及拖拽按钮遮罩问题的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

  1. 进度条如线状显示,带有少许发散效果
  2. 拖拽按钮用圆显示,采用发散效果。(类似太阳的效果)

     这个效果主要有这样几个难点:进度条的高度会随着seekbar的宽度变化,然而seekbar宽度过小又会遮罩住部分拖拽按钮;拖拽按钮使用shape方式生产,而非图像。网上给的这部分介绍基本采用了一个版本,具体介绍见http://bashenmail.iteye.com/blog/603649 ,该文给出的实现方法并没有解决了这两个难点。~~~~(>_<)~~~~ ,折腾来折腾去的...

     转载请注明http://ishelf.iteye.com/admin/blogs/741470

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"><!--

  <SeekBar android:id="@+id/seek1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="75" />

	--><SeekBar android: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" />
		
    <TextView android:id="@+id/progress"
       	android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView android:id="@+id/tracking"
       	android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

    注意一下两个属性

 

android:progressDrawable="@drawable/seekbar_style"//进度条
android:thumb="@drawable/thumb1"//拖拽按钮

   它们对应的xml档案如下:

   thumb1.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 按下状态-->
	<item android:state_focused="true" android:state_pressed="true">
		<shape android:shape="oval">
			<gradient android:type="radial" android:gradientRadius="8"
				android:angle="0" android:startColor="#FFFF0000"
				android:centerColor="#FF00FF00" android:endColor="#000000" />
			<size android:width="16dip" android:height="16dip"></size>
		</shape>
	</item>
......//这里用的oval椭圆,注意gradient android:type=
......//"radial" android:gradientRadius="8" 这两个属性需
......//要一起使用。
......
</selector>

 seekbar_style.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        ................//
        ................//
        ................//

	<item android:id="@android:id/progress">
		<clip>
			<shape android:shape="rectangle">
				<corners android:radius="2dip" />
				<gradient android:startColor="#80000000" android:width="5dp"
					android:centerColor="#7e209e" android:centerY="0.5" android:angle="90"
					android:endColor="#80000000" />
				<stroke android:width="8dp" android:color="#80000000"
					android:dashWidth="3dp" android:dashGap="2dp" />
			</shape>
		</clip>
        ............//在这里设置高度实验了很多次总是行不通(谁要是通过
        ............//这种方法搞定高度,记得留言给我(~ o ~)~)
        ............//于是使用了一个遮罩层(边框),因为边框的高度也
        ............//是由seekbar决定的。这里将进度条的大部分遮
        ............//罩,只留出中间一部分。还有注意这里的边框
        ............//使用的间隔效果,所以会有发散的效果。具体效果怎样
        ............//需要自己测试一下,这里就不贴图了。

</layer-list>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值