1282人阅读
android高仿UI（1）
最新版的手机QQ音乐体验确实不错，发现首页播放按钮可以显示歌曲当前进度条，觉得挺有新意！效果如下：
自己琢磨了下，可以用自定义组件来实现，试着做了一下，效果如下：
整理了下思路，大概设计流程是这样的：
首先，要实现音乐的关停，第一首选就是toggleButton 可以方便的控制，因此组件继承自toggleButton然后我们根据toggleButton的 isChecked的状态来 重写onDraw()方法,来绘制我们所需求的形态：
左边的就是按钮的暂停状态，右边就是播放状态，最后在外围画一个圆标示播放的总体进度，画一段圆弧(圆弧宽度要比外围的圆宽，才能看到效果)标示当前进度，至此，构思完成，开始写代码！
首先，此组件应该有这样三个属性： 主体颜色，第一进度条宽度，总进度条宽度。我们先在新建一个项目 在项目res目录下的values文件夹中建一个 attrs.xml文件 在里面写入我们的view属性：
attrs.xml:
&?xml version="1.0" encoding="utf-8"?&
name="ProgressToggleButton"&
name="progress_total_width" format="dimension" /&
name="progress_current_width" format="dimension" /&
name="main_color" format="color" /&
然后我们在src目录下的包中建一个ProgressToggleButton 继承自ToggleButton 并在构造方法中获得我们自定义的属性：
public class ProgressToggleButton extends ToggleButton {
public ProgressToggleButton(Context context) {
super(context);
private int mainC
private int circleTotalWidth, circleCurrentW
public ProgressToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray arry = context.obtainStyledAttributes(attrs,
R.styleable.ProgressToggleButton);
mainColor = arry.getColor(R.styleable.ProgressToggleButton_main_color,
getResources().getColor(R.color.main_color));
circleTotalWidth = (int) arry.getDimension(
R.styleable.ProgressToggleButton_progress_total_width,
getResources().getDimension(R.dimen.progress_total_width));
circleCurrentWidth = (int) arry.getDimension(
R.styleable.ProgressToggleButton_progress_current_width,
getResources().getDimension(R.dimen.progress_current_width));
arry.recycle();
然后再重写onDraw()方法绘出自己要的属性：
protected void onDraw(Canvas canvas) {
mPaint.setColor(mainColor);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(0);
int center = getWidth() / 2;
int sideLength = center / 5 * 4;
if (this.isChecked()) {
drawPlay(canvas, center, sideLength);
drawStop(canvas, center, sideLength);
mPaint.setStrokeWidth(circleTotalWidth);
mPaint.setStyle(Paint.Style.STROKE);
int radius = center - circleTotalW
canvas.drawCircle(center, center, radius, mPaint);
RectF oval = new RectF(center - radius + circleTotalWidth, center
- radius + circleTotalWidth,
center + radius - circleTotalWidth, center + radius
- circleTotalWidth);
mPaint.setStrokeWidth(circleCurrentWidth);
canvas.drawArc(oval, -90, mProgress, false, mPaint);
这里的drawPlay方法没有给出，等等在详细代码中展示，下面是监听，
为了方便我们使用，我们重新写一个接口，在我们使用的时候回调：
public interface onCheckChangesListener {
void onchechkchanges(boolean isChecked);
private onCheckChangesL
public void setOnCheckChangesListener(onCheckChangesListener l) {
this.listener =
在构造方法中调用自带的OnCheckChangeLister:
this.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
if (listener != null) {
listener.onchechkchanges(isChecked);
postInvalidate();
好了，来看看先阶段的效果：
主布局文件：
&RelativeLayout xmlns:android="/apk/res/android"
xmlns:tools="/tools"
xmlns:progres="/apk/res/com.example.progrestogglebutton"
android:layout_width="match_parent"
android:layout_height="match_parent" &
&com.example.progrestogglebutton.weight.ProgressToggleButton
android:id="@+id/user_div"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:background="@color/transparent_color"
progres:main_color="#FAA532"
progres:progress_current_width="5dp"
progres:progress_total_width="2dp"
tools:ignore="RtlHardcoded" /&
&com.example.progrestogglebutton.weight.ProgressToggleButton
android:id="@+id/defult"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:background="@color/transparent_color"
tools:ignore="RtlHardcoded" /&
&com.example.progrestogglebutton.weight.ProgressToggleButton
android:id="@+id/play"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:background="@color/transparent_color"
tools:ignore="RtlHardcoded" /&
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/play"
android:max="100"
android:progress="0" /&
&/RelativeLayout&
主Activity:
package com.example.
import com.example.progrestogglebutton.weight.ProgressToggleB
import com.example.progrestogglebutton.weight.ProgressToggleButton.onCheckChangesL
import android.app.A
import android.media.MediaP
import android.os.AsyncT
import android.os.B
import android.util.L
import android.widget.SeekB
import android.widget.SeekBar.OnSeekBarChangeL
import android.widget.T
public class MainActivity extends Activity {
private ProgressToggleButton tDefult, tDiv,
private MediaPlayer mMediaP
private SeekBar mSeekB
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
private void init() {
tDefult = (ProgressToggleButton) findViewById(R.id.defult);
tDiv = (ProgressToggleButton) findViewById(R.id.user_div);
tplayer = (ProgressToggleButton) findViewById(R.id.play);
mSeekBar = (SeekBar) findViewById(R.id.seekbar);
mMediaPlayer = MediaPlayer.create(MainActivity.this, R.raw.penta_kill);
tDefult.setOnCheckChangesListener(new onCheckChangesListener() {
public void onchechkchanges(boolean isChecked) {
Toast.makeText(MainActivity.this, "默认样式被点击,状态为" + isChecked,
Toast.LENGTH_SHORT).show();
tDiv.setOnCheckChangesListener(new onCheckChangesListener() {
public void onchechkchanges(boolean isChecked) {
Toast.makeText(MainActivity.this, "用户指定样式被点击,状态为" + isChecked,
Toast.LENGTH_SHORT).show();
tplayer.setOnCheckChangesListener(new onCheckChangesListener() {
public void onchechkchanges(boolean isChecked) {
if (musicAsyTask != null) {
musicAsyTask.cancel(true);
musicAsyTask = (MusicAsyTask) new MusicAsyTask().execute();
if (isChecked) {
mMediaPlayer.start();
mMediaPlayer.pause();
mSeekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
public void onStopTrackingTouch(SeekBar seekBar) {
musicAsyTask = (MusicAsyTask) new MusicAsyTask().execute();
Log.d("LOG", "finish");
public void onStartTrackingTouch(SeekBar seekBar) {
if (musicAsyTask != null) {
musicAsyTask.cancel(true);
musicAsyTask = null;
Log.d("LOG", "starttoch");
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
if (fromUser) {
Log.d("LOG", progress + "");
mMediaPlayer.seekTo((progress * mMediaPlayer.getDuration()) / 100);
tplayer.setProgress(progress);
private MusicAsyTask musicAsyT
public class MusicAsyTask extends AsyncTask&Void, Integer, Void& {
protected Void doInBackground(Void... params) {
publishProgress(getPercent(mMediaPlayer.getCurrentPosition(),
mMediaPlayer.getDuration()));
Thread.sleep(1000);
this.doInBackground();
} catch (InterruptedException e) {
e.printStackTrace();
return null;
protected void onProgressUpdate(Integer... values) {
int progress = values[0];
tplayer.setProgress(progress);
mSeekBar.setProgress(progress);
super.onProgressUpdate(values);
public int getPercent(int progress, int total) {
double baiy = progress * 1.0;
double baiz = total * 1.0;
double fen = baiy /
return (int) (fen * 100);
来看看效果：
细节阐述：
1.在xml文件中，每个ProgressToggleButton，我都将背景指定为完全透明的 颜色，android:background=”@color/transparent_color”,以覆盖系统自带的样式。
2.左边的为默认样式，右边的在布局文件中指定了自己的属性，这里要注意的时，如果你要引入自定义属性，就一定要在xml中引入xmlns:progres=”/apk/res/com.example.progrestogglebutton” 这是调用了此布局文件的 activity所在的包路径
3.至于设置进度，实现方案就是 在其中添加setProgress()方法，根据设置的值，来确定第二进度的值，在activity中借助 handler+thread 或者 asytask 动态获取 播放媒体时间的进度 动态设置给progressToggleButton即可！
完整组件代码:
import android.annotation.SuppressL
import android.content.C
import android.content.res.TypedA
import android.graphics.C
import android.graphics.P
import android.graphics.P
import android.graphics.RectF;
import android.util.AttributeS
import poundB
import android.widget.ToggleB
import com.example.progrestogglebutton.R;
@SuppressLint("DrawAllocation")
public class ProgressToggleButton extends ToggleButton {
public interface onCheckChangesListener {
void onchechkchanges(boolean isChecked);
private onCheckChangesL
public void setOnCheckChangesListener(onCheckChangesListener l) {
this.listener =
private Paint mP
private int mainC
private int circleTotalWidth, circleCurrentW
private int mProgress = 1;
public ProgressToggleButton(Context context) {
super(context);
public ProgressToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
TypedArray arry = context.obtainStyledAttributes(attrs,
R.styleable.ProgressToggleButton);
mainColor = arry.getColor(R.styleable.ProgressToggleButton_main_color,
getResources().getColor(R.color.main_color));
circleTotalWidth = (int) arry.getDimension(
R.styleable.ProgressToggleButton_progress_total_width,
getResources().getDimension(R.dimen.progress_total_width));
circleCurrentWidth = (int) arry.getDimension(
R.styleable.ProgressToggleButton_progress_current_width,
getResources().getDimension(R.dimen.progress_current_width));
arry.recycle();
this.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
if (listener != null) {
listener.onchechkchanges(isChecked);
postInvalidate();
protected void onDraw(Canvas canvas) {
mPaint.setColor(mainColor);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(0);
int center = getWidth() / 2;
int sideLength = center / 5 * 4;
if (this.isChecked()) {
drawPlay(canvas, center, sideLength);
drawStop(canvas, center, sideLength);
mPaint.setStrokeWidth(circleTotalWidth);
mPaint.setStyle(Paint.Style.STROKE);
int radius = center - circleTotalW
canvas.drawCircle(center, center, radius, mPaint);
RectF oval = new RectF(center - radius + circleTotalWidth, center
- radius + circleTotalWidth,
center + radius - circleTotalWidth, center + radius
- circleTotalWidth);
mPaint.setStrokeWidth(circleCurrentWidth);
canvas.drawArc(oval, -90, mProgress, false, mPaint);
* 画暂停状态
三角形中心横纵坐标
* sideLength
三角形边长
private void drawStop(Canvas canvas, int center, int sideLength) {
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
float genSan = (float) Math.sqrt(3);
Path path2 = new Path();
path2.moveTo((center - sideLength / (2 * genSan)), center - sideLength
path2.lineTo((center + 2 * sideLength / (2 * genSan)), center);
path2.lineTo((center - sideLength / (2 * genSan)), center + sideLength
path2.close();
canvas.drawPath(path2, mPaint);
* 画播放状态
两条线的对称轴中心横纵坐标
* sideLength
private void drawPlay(Canvas canvas, int center, int sideLength) {
float genSan = (float) Math.sqrt(3);
float linesWidth = sideLength / 5;
mPaint.setStrokeWidth(linesWidth);
canvas.drawLine((center - sideLength / (2 * genSan)) + linesWidth / 2,
center - sideLength / 2, (center - sideLength / (2 * genSan))
+ linesWidth / 2, center + sideLength / 2, mPaint);
canvas.drawLine((center + sideLength / (2 * genSan)) - linesWidth / 2,
center - sideLength / 2, (center + sideLength / (2 * genSan))
- linesWidth / 2, center + sideLength / 2, mPaint);
* 设置进度
* progress
public void setProgress(int progress) {
if (progress &= 100) {
mProgress = 360 ;
mProgress = (int) ((progress + 1) * 3.6);
postInvalidate();
public int getProgress() {
return (int) (mProgress / 3.6);
private int defultWidth = (int) getResources().getDimension(
R.dimen.weidght_size);
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int finalWidth = 0;
int finaLHeight = 0;
if (widthMode == MeasureSpec.EXACTLY) {
finalWidth = widthS
finalWidth = (int) (getPaddingLeft() + defultWidth + getPaddingRight());
if (heightMode == MeasureSpec.EXACTLY) {
finaLHeight = heightS
finaLHeight = (int) (getPaddingTop() + defultWidth + getPaddingBottom());
setMeasuredDimension(finalWidth, finaLHeight);
1.本人技术有限，又第一次写博客，肯定有很多纰漏之处，忘广大网友批评斧正，共同进步。
2.本组件其实挺简单，核心就是自定义组件，但是在研究过程中，那个画三角形确实花了点时间，要用三角函数来确定坐标，最终还是弄出来了，所以在这里分享出来，分享才是一种快乐。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19074次
排名：千里之外
原创：12篇
评论：27条
(1)(1)(1)(1)(2)(1)(4)(1)今日论坛第 1 个签到，每日签到可得财富值+2，连续5天签到后再连续签到则每日可得财富值
+4，记得每天都来签到哦~
上一主题：
下一主题：
查看: 5423 | 回复: 2
QQ音乐，点击播放，却放不出来，进度条也不走，求助
交易信用 0
积分/帖子：2
连续签到天数：0
全部签到天数：0
注册时间：
手机型号：
状态： 离线
QQ音乐，点击播放，却放不出来，进度条也不走，求助
QQ音乐里的歌曲点击播放，却放不出来，进度条也不走，缓存的也一样放不出。求助
财富值 1496
交易信用 0
佯bmD、so法逃离寂寞
积分/帖子：731
连续签到天数：1
全部签到天数：156
注册时间：
手机型号：
Lumia920/930
来自：草泥马戈壁
状态： 离线
果断卸载。推荐酷我音乐。或者自带的诺基亚音乐。
screen.width*0.7) {this.resized= this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onmouseover="if(this.width>screen.width*0.7) {this.resized= this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {} else {window.open(this.src);}" onmousewheel="return imgzoom(this);" alt="" />是时间把一切颓废？还是自己早颓废了一切？
交易信用 0
积分/帖子：12
连续签到天数：0
全部签到天数：0
注册时间：
手机型号：
状态： 离线
回复 #2 ii丶a丿 的帖子
另安装软件，自带的播放不用理它
微信扫一扫关注dospy为什么360扫描u盘扫到一半的时候进度条就不动了，而且我也点不开u盘。但是在别人的电脑上u盘是好的。_QQ音乐 - QQ志乐园
您的当前位置： &
为什么360扫描u盘扫到一半的时候进度条就不动了，而且我也点不开u盘。但是在别人的电脑上u盘是好的。求解
来源： |人气：716 ℃|时间： 13:41:03
为了解决用户可能碰到关于"为什么360扫描u盘扫到一半的时候进度条就不动了，而且我也点不开u盘。但是在别人的电脑上u盘是好的。求解"相关的问题，志乐园经过收集整理为用户提供相关的解决办法，请注意，解决办法仅供参考，不代表本网同意其意见,如有任何问题请与本网联系。"为什么360扫描u盘扫到一半的时候进度条就不动了，而且我也点不开u盘。但是在别人的电脑上u盘是好的。求解"相关的详细问题如下:
你好朋友这情况个人怀疑你电脑上的USB接口有问题，建议你找个接口试试，或升级一下主板驱动。网友回答把360卸了重新安装。　耶嘿 i′ ?
||||点击排行音乐为什么会在放音乐的时候QQ上不显示
全部答案（共5个回答）
软件设置界面中的状态和提醒选项卡中的“我正在播放的QQ音乐”选项勾选即可。如果我的回答对您有所帮助，请您在微问中选择“有用”。
在哪个位置勾上？
不知道你是用什么下载软件下载的，拿迅雷来说下载后你不知道下载的文件储存在什哪里了？我告诉你一个简单的办法：你可以重新下载一个文件，在点击《立即下载》前看一下《储...
。。。。。。。。。。。。。。。。。。。。
你要在手机QQ音乐是扫描本地音乐然后添加后就可以听了
编辑原来的音乐,把歌名、歌手、URL地址都改一下行了，要直接删除的话就会减少花藤分值
我这里问了''怎么QQ空间里面马上就有啊？不想把问问分享到空间里''怎么弄掉啊？
大家还关注
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区}