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

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

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

  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>
<SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:progressDrawable="@drawable/custom_seekbar_progress" android:thumb="@drawable/custom_seekbar_thumb" android:splitTrack="false" android:max="100" android:progress="50" /><shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/gray_EB" /> <size android:height="2dp" /> </shape><?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:state_focused="false" android:drawable="@drawable/custom_seekbar_background_track" /> <!-- 已完成部分 --> <item android:id="@android:id/progress" android:state_focused="true" android:drawable="@drawable/custom_seekbar_progress_track" /> </layer-list><?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFCB00" /> <size android:height="2dp" /> </shape><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/seekbar_icon_resized" /> <!-- 普通无焦点状态 --> <item android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/seekbar_icon_resized" /> </selector> 为什么进度条的样式没有区分选中和未选中,就是选到50%的时候,前后进度条颜色一样
08-24
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context=".editpreset.EditPresetFragment"> <ImageView android:id="@+id/imageView3" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginStart="16dp" android:scaleType="centerInside" android:src="@drawable/close" app:layout_constraintBottom_toBottomOf="@+id/edit_auto_white" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/edit_auto_white" /> <TextView android:id="@+id/edit_auto_white" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:text="Edit Auto White" android:textSize="20dp" app:layout_constraintStart_toEndOf="@+id/imageView3" app:layout_constraintTop_toTopOf="parent"> </TextView> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_marginEnd="16dp" android:scaleType="centerInside" android:src="@drawable/ok" app:layout_constraintBottom_toBottomOf="@+id/edit_auto_white" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/edit_auto_white" app:layout_constraintVertical_bias="1.0" /> <!-- res/layout/fragment_tab_selector.xml --> <androidx.cardview.widget.CardView android:id="@+id/cardView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" app:cardCornerRadius="50dp" app:cardElevation="4dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/edit_auto_white"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="5dp" android:layout_marginEnd="5dp"> <com.google.android.material.button.MaterialButton android:id="@+id/buttonA" android:layout_width="130dp" android:layout_height="48dp" android:checkable="true" android:checked="true" android:text="White Light" android:textColor="@android:color/black" android:textSize="14dp" app:backgroundTint="@android:color/white" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:rippleColor="@android:color/transparent" /> <com.google.android.material.button.MaterialButton android:id="@+id/buttonB" android:layout_width="130dp" android:layout_height="48dp" android:checkable="true" android:checked="true" android:text="Color Light" android:textColor="@android:color/black" android:textSize="14dp" app:backgroundTint="@android:color/white" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@id/buttonA" app:layout_constraintTop_toTopOf="parent" app:rippleColor="@android:color/transparent" /> </androidx.constraintlayout.widget.ConstraintLayout> <!-- <com.google.android.material.button.MaterialButtonToggleGroup--> <!-- android:id="@+id/optionGroup"--> <!-- android:layout_width="wrap_content"--> <!-- android:layout_height="wrap_content"--> <!-- android:orientation="horizontal"--> <!-- app:selectionRequired="true">--> <!-- <com.google.android.material.button.MaterialButton--> <!-- android:id="@+id/buttonA"--> <!-- android:layout_width="96dp"--> <!-- android:layout_height="48dp"--> <!-- android:checkable="true"--> <!-- android:checked="true"--> <!-- android:text="White Light"--> <!-- android:textSize="14dp"--> <!-- android:textColor="@android:color/black"--> <!-- app:backgroundTint="@android:color/white"--> <!-- app:rippleColor="@android:color/transparent" />--> <!-- <com.google.android.material.button.MaterialButton--> <!-- android:id="@+id/buttonB"--> <!-- android:layout_width="120dp"--> <!-- android:layout_height="48dp"--> <!-- android:checkable="true"--> <!-- android:text="Color Light"--> <!-- android:textColor="@android:color/black"--> <!-- app:backgroundTint="@android:color/white"--> <!-- app:rippleColor="@android:color/transparent" />--> <!-- </com.google.android.material.button.MaterialButtonToggleGroup>--> </androidx.cardview.widget.CardView> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="28dp" android:text="Color Temperature" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/imageView3" app:layout_constraintTop_toBottomOf="@id/cardView" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="44dp" android:text="Warm" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/textView3" app:layout_constraintTop_toBottomOf="@+id/textView3" /> <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="52dp" android:text="Recommend" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/textView3" app:layout_constraintTop_toBottomOf="@+id/textView4" /> <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="52dp" android:text="White" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/textView3" app:layout_constraintTop_toBottomOf="@+id/textView5" /> <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="52dp" android:text="Daylight" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/textView3" app:layout_constraintTop_toBottomOf="@+id/textView6" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="44dp" android:text="Cool" android:textColor="@color/text_gray" android:textSize="14dp" app:layout_constraintStart_toStartOf="@+id/textView3" app:layout_constraintTop_toBottomOf="@+id/textView7" /> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_end="20.8dp"> </androidx.constraintlayout.widget.Guideline> <View android:id="@+id/view3" android:layout_width="0dp" android:layout_height="2dp" android:layout_marginStart="15.2dp" android:background="@drawable/link" android:layerType="software" app:layout_constraintBottom_toBottomOf="@+id/textView4" app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toTopOf="@+id/textView4" /> <View android:id="@+id/view6" android:layout_width="0dp" android:layout_height="2dp" android:layout_marginStart="15.2dp" android:background="@drawable/link" android:layerType="software" app:layout_constraintBottom_toBottomOf="@+id/textView5" app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintStart_toEndOf="@+id/textView5" app:layout_constraintTop_toTopOf="@+id/textView5" /> <View android:id="@+id/view4" android:layout_width="0dp" android:layout_height="2dp" android:layout_marginStart="15.2dp" android:background="@drawable/link" android:layerType="software" app:layout_constraintBottom_toBottomOf="@+id/textView6" app:layout_constraintEnd_toEndOf="@+id/view3" app:layout_constraintStart_toEndOf="@+id/textView6" app:layout_constraintTop_toTopOf="@+id/textView6" /> <View android:id="@+id/view5" android:layout_width="0dp" android:layout_height="2dp" android:layout_marginStart="15.2dp" android:background="@drawable/link" android:layerType="software" app:layout_constraintBottom_toBottomOf="@+id/textView7" app:layout_constraintEnd_toEndOf="@+id/view3" app:layout_constraintStart_toEndOf="@+id/textView7" app:layout_constraintTop_toTopOf="@+id/textView7" /> <View android:id="@+id/view7" android:layout_width="0dp" android:layout_height="2dp" android:layout_marginStart="15.2dp" android:background="@drawable/link" android:layerType="software" app:layout_constraintBottom_toBottomOf="@+id/textView2" app:layout_constraintEnd_toEndOf="@+id/view3" app:layout_constraintStart_toEndOf="@+id/textView2" app:layout_constraintTop_toTopOf="@+id/textView2" /> <View android:id="@+id/view8" android:layout_width="match_parent" android:layout_height="8dp" android:layout_marginTop="20dp" android:background="@color/background_gray" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <TextView android:id="@+id/textView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Light" android:textColor="@color/text_gray" android:textSize="16dp" android:textStyle="bold" app:layout_constraintStart_toStartOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/view8" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="0%" android:textColor="@color/text_gray" android:textSize="16dp" android:textStyle="bold" app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintTop_toBottomOf="@+id/view8" /> <SeekBar android:id="@+id/seekBar" android:layout_width="292dp" android:layout_height="wrap_content" android:layout_marginTop="22dp" android:progressTint="#FFCB00" android:thumb="@drawable/lightset" android:thumbOffset="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView8" /> <View android:layout_width="match_parent" android:layout_height="58dp" app:layout_constraintTop_toBottomOf="@+id/seekBar" /> <!-- <ImageView--> <!-- android:layout_width="60dp"--> <!-- android:layout_height="238dp"--> <!-- android:scaleType="centerInside"--> <!-- android:src="@drawable/color_temperature"--> <!-- app:layout_constraintBottom_toBottomOf="@+id/textView6"--> <!-- app:layout_constraintEnd_toEndOf="parent"--> <!-- app:layout_constraintStart_toStartOf="parent"--> <!-- app:layout_constraintTop_toTopOf="@+id/textView6" />--> <!-- 原始背景图 --> <ImageView android:id="@+id/color_temperature" android:layout_width="60dp" android:layout_height="238dp" android:scaleType="centerInside" android:src="@drawable/color_temperature" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- 自定义叠加 View --> <com.example.bulbpage.whiteedit.ColorTemperatureOverlayView android:id="@+id/overlayView" android:layout_width="60dp" android:layout_height="238dp" app:layout_constraintBottom_toBottomOf="@+id/color_temperature" app:layout_constraintEnd_toEndOf="@+id/color_temperature" app:layout_constraintStart_toStartOf="@+id/color_temperature" app:layout_constraintTop_toTopOf="@+id/color_temperature" /> <!-- 显示色温值 --> <TextView android:id="@+id/temperatureTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5000K" android:textSize="14dp" app:layout_constraintBottom_toBottomOf="@+id/textView3" app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintTop_toTopOf="@+id/textView3" /> </androidx.constraintlayout.widget.ConstraintLayout>给我修改后的完整代码
08-26
采用PyQt5框架与Python编程语言构建图书信息管理平台 本项目基于Python编程环境,结合PyQt5图形界面开发库,设计实现了一套完整的图书信息管理解决方案。该系统主要面向图书馆、书店等机构的日常运营需求,通过模块化设计实现了图书信息的标准化管理流程。 系统架构采用典型的三层设计模式,包含数据存储层、业务逻辑层和用户界面层。数据持久化方案支持SQLite轻量级数据库与MySQL企业级数据库的双重配置选项,通过统一的数据库操作接口实现数据存取隔离。在数据建模方面,设计了包含图书基本信息、读者档案、借阅记录等核心数据实体,各实体间通过主外键约束建立关联关系。 核心功能模块包含六大子系统: 1. 图书编目管理:支持国际标准书号、中国图书馆分类法等专业元数据的规范化著录,提供批量导入与单条录入两种数据采集方式 2. 库存动态监控:实时追踪在架数量、借出状态、预约队列等流通指标,设置库存预警阈值自动提醒补货 3. 读者服务管理:建立完整的读者信用评价体系,记录借阅历史与违规行为,实施差异化借阅权限管理 4. 流通业务处理:涵盖借书登记、归还处理、续借申请、逾期计算等标准业务流程,支持射频识别技术设备集成 5. 统计报表生成:按日/月/年周期自动生成流通统计、热门图书排行、读者活跃度等多维度分析图表 6. 系统维护配置:提供用户权限分级管理、数据备份恢复、操作日志审计等管理功能 在技术实现层面,界面设计遵循Material Design设计规范,采用QSS样式实现视觉定制化。通过信号槽机制实现前后端数据双向绑定,运用多线程处理技术保障界面响应流畅度。数据验证机制包含前端格式校验与后端业务规则双重保障,关键操作均设有次确认流程。 该系统适用于中小型图书管理场景,通过可扩展的插件架构支持功能模块的灵活组合。开发过程中特别注重代码的可维护性,采用面向对象编程范式实现高内聚低耦合的组件设计,为后续功能迭代奠定技术基础。 资源来源于网络分享,仅用于学习交流使用,请勿用于商业,如有侵权请联系我删除!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值