AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

我的Android进阶之旅------>Android如何通过自定义SeekBar来实现视频播放进度条

2013-11-27 1739
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 首先来看一下效果图，如下所示：其中进度条如下：接下来说一说我的思路，上面的进度拖动条有自定义的Thumb，在Thumb正上方有一个PopupWindow窗口，窗口里面显示当前的播放时间。


首先来看一下效果图，如下所示：

其中进度条如下：


接下来说一说我的思路，上面的进度拖动条有自定义的Thumb，在Thumb正上方有一个PopupWindow窗口，窗口里面显示当前的播放时间。在SeekBar右边有一个文本框显示当前播放时间/总时间。

step1、先来看一看PopupWindow的布局文件，seek_popu.xml,效果如下图所示：


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/seek_dialog_bg" >
    <!-- 展现当前播放进度时间的文本框-->
    <TextView
        android:id="@+id/dialogSeekTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dip"
        android:layout_marginTop="12dip"
        android:text="@string/unknow_seek_time"
        android:textColor="@color/black"
        android:textSize="12sp" />
</RelativeLayout>

step2、自定义一个SeekBar 

import com.canplay.video.R;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.PopupWindow;
import android.widget.SeekBar;
import android.widget.TextView;

/**
 * 自定义进度拖动条控件
 */
public class MySeekBar extends SeekBar {
	/**
	 * 定义一个展现时间的PopupWindow
	 */
	private PopupWindow mPopupWindow;
	
	private View mView;
	/**
	 * 显示时间的TextView
	 */
	private TextView dialogSeekTime;
	/**
	 * 用来表示该组件在整个屏幕内的绝对坐标，其中 mPosition[0] 代表X坐标,mPosition[1] 代表Y坐标。
	 */
	private int[] mPosition;
	/**
	 * SeekBar上的Thumb的宽度，即那个托动的小黄点的宽度
	 */
	private final int mThumbWidth = 25;

	public MySeekBar(Context context) {
		this(context, null);
	}

	public MySeekBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		mView = LayoutInflater.from(context).inflate(R.layout.seek_popu, null);
		dialogSeekTime = (TextView) mView.findViewById(R.id.dialogSeekTime);
		mPopupWindow = new PopupWindow(mView, mView.getWidth(), mView.getHeight(), true);
		mPosition = new int[2];
	}

	/**
	 * 获取控件的宽度
	 * 
	 * @param v
	 * @return 控件的宽度
	 */
	private int getViewWidth(View v) {
		int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
		int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
		v.measure(w, h);
		return v.getMeasuredWidth();
	}

	/**
	 * 获取控件的高度
	 * 
	 * @param v
	 * @return 控件的高度
	 */
	private int getViewHeight(View v) {
		int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
		int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
		v.measure(w, h);
		return v.getMeasuredHeight();
	}

	/**
	 * 隐藏进度拖动条的PopupWindow
	 */
	public void hideSeekDialog() {
		if (mPopupWindow != null && mPopupWindow.isShowing()) {
			mPopupWindow.dismiss();
		}
	}

	/**
	 * 显示进度拖动条的PopupWindow
	 * 
	 * @param str
	 *                  时间值
	 */
	public void showSeekDialog(String str) {
		dialogSeekTime.setText(str);
		int progress = this.getProgress();
		// 计算每个进度值所占的宽度
		int thumb_x = (int) (progress * (1.0f * (this.getWidth() - 22) / this.getMax())); //22是两边的空白部分宽度
		// 更新后的PopupWindow的Y坐标
		int middle = this.getHeight() / 2 + 120;
		if (mPopupWindow != null) {
			try {
				/*
				 * 获取在整个屏幕内的绝对坐标，注意这个值是要从屏幕顶端算起，也就是包括了通知栏的高度。
				 * 其中 mPosition[0] 代表X坐标,mPosition[1]代表Y坐标。
				 */
				this.getLocationOnScreen(mPosition);
				// 相对某个控件的位置（正左下方），在X、Y方向各有偏移
				mPopupWindow.showAsDropDown(this, (int) mPosition[0], mPosition[1]);
				/*
				 * 更新后的PopupWindow的X坐标
				 * 首先要把当前坐标值减去PopWindow的宽度的一半，再加上Thumb的宽度一半。
				 * 这样才能使PopWindow的中心点和Thumb的中心点的X坐标相等
				 */
				int x = thumb_x + mPosition[0] - getViewWidth(mView) / 2 + mThumbWidth / 2;
				// 更新popup窗口的位置
				mPopupWindow.update(x, middle, getViewWidth(mView), getViewHeight(mView));
			} catch (Exception e) {
			}
		}
	}
}

step3、将自定义的拖动条加入到布局文件中,下面是部分代码 

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black" >
......
<!-- 进度拖动条 -->
        <RelativeLayout
            android:id="@+id/seek_bar_container"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/control_btn_container"
            android:background="@drawable/seek_bg" >

            <com.canplay.video.view.MySeekBar
                android:id="@+id/seek_progress"
                android:layout_width="600dip"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/currentTime"
                style="@style/seekTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/seek_progress"
                android:paddingLeft="20dip"
                android:text="@string/unknow_time" />
        </RelativeLayout>
...............
</RelativeLayout>

step4、在主文件中对拖动条进行托动监听 

mSeekBar = (MySeekBar) findViewById(R.id.seek_progress);
mSeekBar.setOnSeekBarChangeListener(mSeekBarListener);
/**
	 * 进度拖动条监听器
	 */
	private OnSeekBarChangeListener mSeekBarListener = new OnSeekBarChangeListener() {
		// 通知进度已经被修改
		public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
			if (isTouchSeeked) {
				mSeekBar.showSeekDialog(makeTimeString(progress));//动态展示当前播放时间
			} else {
				mSeekBar.hideSeekDialog();
			}
		}

		// 通知用户已经开始一个触摸拖动手势
		public void onStartTrackingTouch(SeekBar seekBar) {
			showControlView(3600000);
			isTouchSeeked = true;
		}

		// 通知用户触摸手势已经结束
		public void onStopTrackingTouch(SeekBar seekBar) {
			Message msg = Message.obtain();
			msg.what = PROGRESS_SEEKTO;
			msg.arg1 = seekBar.getProgress();
			mHandler.removeMessages(PROGRESS_SEEKTO);
			mHandler.sendMessageAtTime(msg, 1000);// 1秒之后开始发送更新进度的消息
			isTouchSeeked = false;
			showControlView(sDefaultTimeout);
		}
	};

其中将进度值转换为时间的方法makeTimeString(int secs)如下所示： 

/**
	 * 格式化的Builder
	 */
	private StringBuilder sFormatBuilder = new StringBuilder();
	/**
	 * 格式化的Formatter
	 */
	private Formatter sFormatter = new Formatter(sFormatBuilder, Locale.getDefault());
	/**
	 * 格式化的相关属性
	 */
	private final Object[] sTimeArgs = new Object[3];

	/**
	 * 转换进度值为时间
	 * 
	 * @param secs
	 * @return
	 */
	private String makeTimeString(int secs) {
		/**
		 * %[argument_index$][flags][width]conversion 可选的
		 * argument_index 是一个十进制整数，用于表明参数在参数列表中的位置。第一个参数由 "1$"
		 * 引用，第二个参数由 "2$" 引用，依此类推。 可选 flags
		 * 是修改输出格式的字符集。有效标志集取决于转换类型。 可选 width
		 * 是一个非负十进制整数，表明要向输出中写入的最少字符数。 可选 precision
		 * 是一个非负十进制整数，通常用来限制字符数。特定行为取决于转换类型。 所需 conversion
		 * 是一个表明应该如何格式化参数的字符。给定参数的有效转换集取决于参数的数据类型。
		 */
		String durationformat = getString(R.string.durationformat);// <xliff:g
								// id="format">%1$02d:%2$02d:%3$02d</xliff:g>
		sFormatBuilder.setLength(0);
		secs = secs / 1000;
		Object[] timeArgs = sTimeArgs;
		timeArgs[0] = secs / 3600; // 秒
		timeArgs[1] = (secs % 3600) / 60; // 分
		timeArgs[2] = (secs % 3600 % 60) % 60; // 时
		return sFormatter.format(durationformat, timeArgs).toString().trim();
	}


当然，这里只是简单的介绍了下自定义进度条，而该进度条的样式都没有展现出来，样式读者可以自己定义。




PS: 2017-11-4，今天看到github上有个很棒的类似的开源库，效果如下，大家可以看看！


https://github.com/rubensousa/PreviewSeekBar


如果你使用Google Play Movies，你可能注意到了这个动画效果很棒，可以预览电影的SeekBar。 Rúben Sousa （https://medium.com/@rubensousa）实现了这种效果并开源。下面的gif图片很好的说明了其功能。如果你的app是一个播放器，你决定应该试试。








====================================================================================

  作者：欧阳鹏  欢迎转载，与人分享是进步的源泉！

  转载请保留原文地址：http://blog.csdn.net/ouyang_peng

===================================================================================



文章标签：
Android开发
数据格式
XML
关键词：
Android自定义
Android进阶
Android Seekbar
Android进度条
Android自定义进度条
字节卷动
目录
相关文章
shuj
|
2月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
34 1
shuj
|
3月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中，自定义视图犹如一座座小岛，等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程，从浅滩走向深海，逐步揭开自定义视图的神秘面纱。
shuj
45 3
shuj
|
3月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中，自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View，包括设计理念、实现步骤以及性能优化技巧，帮助开发者打造流畅且富有创意的用户界面。
shuj
116 0
天下无贼001
|
2月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
47 4
shuj
|
2月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
45 5
游客moiomvrp3vyac2
|
3月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石，它为开发者提供了无限的可能。通过掌握其原理和实现方法，可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程，包括绘制技巧、事件处理以及性能优化等关键步骤。
游客moiomvrp3vyac2
38 1
mrq4nk6ni2neg
|
4月前
|
Android开发 开发者
安卓开发中的自定义视图：从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中，自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌，更是艺术与科技的完美结合。通过掌握自定义视图，开发者能够打破常规，创造出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战应用，一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者，这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密，将你的应用打造成一件艺术品吧！
mrq4nk6ni2neg
73 10
请看我回答~
|
4月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域，自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例，展示如何在安卓项目中创建和使用自定义View组件，包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例，还深入探讨了自定义View的性能优化技巧，旨在帮助开发者更好地掌握这一技能。
请看我回答~
74 7
天下无贼001
|
4月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中，自定义视图是一块神奇的画布，它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟，了解如何从零开始构建自定义视图，包括绘图基础、触摸事件处理，以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力，还是追求更流畅的交互体验，这里都有你需要的金钥匙。
天下无贼001
56 4
mrq4nk6ni2neg
|
4月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中，自定义视图控件是一种高级技巧，它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例，引导你了解如何在安卓项目中实现自定义视图控件，包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者，这篇文章都会为你提供有价值的见解和技巧。
mrq4nk6ni2neg
64 3