`
ishelf
  • 浏览: 106354 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

阅读更多

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

  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>
2
0
分享到:
评论

相关推荐

    自定义SeekBar样式

    android:thumb="@drawable/thumb" /&gt;//在这里自定义拖动条的样式 2:举例,可以在thumb.xml中定义不同状态的时候,拖动条的样式 &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;selector xmlns:android=...

    android_SeekBar竖直显示自定义背景thumb完美Demo(附带解决说明)

    在Android开发中,SeekBar是一个非常常见的控件,用于让用户通过滑动来选择一个介于最小值和最大值之间的值。通常,SeekBar是水平显示的,但有时为了满足特定的界面设计需求,我们可能需要将其设置为竖直显示。本...

    自定义seekbar

    这里的`@drawable/seekbar_progress`和`@drawable/seekbar_thumb`分别代表进度条背景和滑块图片,可以在`res/drawable`目录下创建相应的XML文件进行定制。 ### 3. 自定义 Seekbar 的滑块和轨道 #### 3.1 滑块...

    SeekBar自定义样式案例1

    本教程将详细介绍如何在Android中自定义SeekBar样式,通过具体的案例来解析实现过程。 首先,我们来理解 SeekBar 的基本结构。SeekBar主要由三部分组成:轨道(Track)、 thumb(滑块)和 progress(进度)。自定义...

    seekbar设置进度条的颜色

    如果你需要在多个地方使用相同的SeekBar样式,可以创建一个自定义View并扩展SeekBar类,添加自定义属性来控制颜色: ```java public class CustomSeekBar extends SeekBar { public CustomSeekBar(Context context...

    自定义seekbar样式

    默认的Seekbar样式可能无法满足所有设计需求,因此开发者常常需要自定义其外观和行为以匹配应用的整体风格。本教程将深入探讨如何通过XML文件配置来自定义Seekbar的样式。 首先,我们要了解 Seekbar 的基本结构。...

    seekabr.rar

    要自定义SeekBar样式,我们需要创建一个XML资源文件,通常放在res/drawable目录下。这个文件将定义Thumb、Progress和SecondaryProgress的外观。例如,我们可以创建一个名为`seekbar_style.xml`的文件: ```xml ...

    Android自定义SeekBar样式

    默认的SeekBar样式虽然实用,但在某些情况下可能无法满足我们对界面美观度和个性化的需求。这篇博客将深入探讨如何自定义Android的SeekBar样式,以实现更丰富的视觉效果。 首先,我们要明白 SeekBar 的工作原理。...

    自定义竖向SeekBar,横向SeekBar样式

    本篇文章将详细讲解如何实现横向和竖向的SeekBar样式设置。 首先,我们来看看横向SeekBar的样式设置。在Android中,我们可以使用XML布局文件来定义SeekBar的基本样式,包括颜色、大小和进度条的外观。在`res/values...

    seekbar带进度条百分百的

    上述代码中,`@drawable/custom_progress_drawable`、`@drawable/custom_indeterminate_drawable`和`@drawable/custom_thumb`分别代表进度条填充部分、不确定状态的进度条和滑块的图形资源。 5. 动态更新进度: ...

    安卓UI设计:自定义SeekBar拖动条例子

    然而,系统默认的SeekBar样式可能无法满足所有设计需求,这时就需要进行自定义以实现独特的视觉效果。以下将详细讲解如何在Android中自定义SeekBar,以实现"安卓UI设计:自定制SeekBar拖动条"。 1. **自定义SeekBar...

    自定义拖动seekbar,图片透明

    通常SeekBar的进度条和滑块是预设的样式,但有时为了提供更加个性化的用户体验或者配合应用的整体设计风格,我们需要自定义SeekBar的外观,比如改变滑块的形状、颜色,甚至实现图片透明度的调整。在这个主题中,我们...

    seekbar自定义

    在Android开发中,SeekBar是一个非常常见的控件,用于实现用户通过滑动来调整数值或进度的功能。本主题将深入探讨如何自定义SeekBar,包括改变进度条颜色、圆点颜色等,以满足不同UI设计需求。 首先,我们了解...

    自定义 SeekBar

    2. **自定义 drawable**: 在 res/drawable 目录下创建 XML 文件,如 seekbar_progress.xml 和 seekbar_thumb.xml,定义 SeekBar 的进度条和滑块的图形。 二、自定义 SeekBar 的 Java 代码 1. **设置属性**: 在代码...

    自动以SeekBar实现实现进度提示随thum移动

    3. 可选地,自定义SeekBar的外观,如Thumb和Track的样式。 这个过程不仅可以帮助你提升Android应用的用户体验,还可以让你更深入地理解Android UI组件的工作原理。在实际开发中,可以根据需求进行更多的定制,例如...

    自定义实现两个滑块的SeekBar

    在Android开发中,SeekBar是一个非常常见的控件,用于让用户通过滑动来选择一个数值或进度。在标准的Android SDK中,SeekBar的外观和行为是预设的,但开发者可以根据需求进行自定义,以提供更个性化的用户体验。在这...

    android 自定义Seekbar,包括图片,背景颜色

    android:thumb="@drawable/seekbar_thumb" android:background="@color/seekbar_background" /&gt; ``` 在上面的代码中,`progressDrawable`属性用于设置进度条的样式,可以是一个自定义的九宫格图片(.9.png)或者...

    android seekbar自定义带提示

    然后,通过设置SeekBar的android:progressDrawable和android:thumb属性,引用我们创建的自定义drawable资源。 ```xml &lt;SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_...

    SeekBar thumb 图片同步

    "SeekBar thumb 图片同步"这个标题所涉及的问题,通常是指在为 SeekBar 设置自定义 thumb 图片时,由于图片尺寸与 SeekBar 默认 thumb 尺寸不匹配导致的显示异常或同步问题。 在Android中,我们可以通过以下步骤...

    Android 自定义漂亮的Seekbar样式

    默认的Seekbar样式虽然实用,但可能无法满足所有设计需求。为了提供更好的用户体验和更符合应用整体风格的界面,开发者经常需要自定义Seekbar的样式。本文将详细介绍如何在Android中实现一个美观的自定义Seekbar。 ...

Global site tag (gtag.js) - Google Analytics