这篇文章主要为大家详细介绍了Android仿网易云音乐播放界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
现在很多的播放器的播放界面都是采用光盘的转动，下面是我仿造网易的播放界面。先上两张图：
第一张为播放前的界面，第二张为点击播放按钮的图片。布局文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
android:background
=
"#ffffff"
>
<
LinearLayout
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
android:orientation
=
"vertical"
>
<
RelativeLayout
android:layout_width
=
"fill_parent"
android:layout_height
=
"48dp"
android:background
=
"#222222"
>
<
ImageView
android:id
=
"@+id/back_main_activity"
android:layout_width
=
"40dp"
android:layout_height
=
"40dp"
android:layout_centerVertical
=
"true"
android:layout_marginLeft
=
"5dp"
android:background
=
"@drawable/back_main_view"
/>
<
TextView
android:id
=
"@+id/play_music_name"
android:layout_width
=
"wrap_content"
android:layout_height
=
"40dp"
android:layout_centerInParent
=
"true"
android:layout_marginLeft
=
"10dp"
android:layout_toRightOf
=
"@+id/back_main_activity"
android:paddingTop
=
"5dp"
android:text
=
"music"
android:textColor
=
"#ffffff"
android:textSize
=
"20dp"
/>
</
RelativeLayout
>
<
RelativeLayout
android:id
=
"@+id/play_disc"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:gravity
=
"center|center_vertical"
>
</
RelativeLayout
>
</
LinearLayout
>
<
LinearLayout
android:layout_width
=
"fill_parent"
android:layout_height
=
"80dp"
android:layout_below
=
"@+id/seekbarLayout"
android:background
=
"#222222"
android:gravity
=
"center_horizontal"
android:orientation
=
"horizontal"
android:layout_alignParentBottom
=
"true"
>
<
ImageView
android:id
=
"@+id/music_paly_pause"
android:layout_width
=
"80dp"
android:layout_height
=
"fill_parent"
android:background
=
"@drawable/play_btn_play"
/>
</
LinearLayout
>
</
RelativeLayout
>
|
MainActivity的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
public
class
MainActivity
extends
Activity {
private
RelativeLayout playDisc;
private
MusicPlayDiscView musicPlayDiscView;
//播放按钮
private
ImageView playMusic;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
playDisc = (RelativeLayout) findViewById(R.id.play_disc);
//加载光盘view
musicPlayDiscView =
new
MusicPlayDiscView(
this
);
playDisc.addView(musicPlayDiscView);
playMusic = (ImageView) findViewById(R.id.music_paly_pause);
//监听方法
playMusic.setOnClickListener(
new
OnClickListener() {
@Override
public
void
onClick(View v) {
switch
(Constant.CurrentState) {
case
Constant.Pause:
Constant.CurrentState = Constant.Play;
playMusic.setBackgroundResource(R.drawable.play_btn_pause);
break
;
case
Constant.Play:
Constant.CurrentState = Constant.Pause;
playMusic.setBackgroundResource(R.drawable.play_btn_play);
break
;
}
}
});
}
}
|
光盘界面是自定义的view。MusicPlayDiscView，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
public
class
MusicPlayDiscView
extends
View {
Paint paint;
private
Handler handler;
// 光盘图片
Bitmap bitmapDisc = BitmapFactory.decodeResource(getResources(),
R.drawable.play_disc);
// 专辑图片
Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(),
R.drawable.music_play_people);
Bitmap bitmapCircularAblum, bitmapDiscCircular;
// 光盘指针图片
Bitmap bitmapNeedle = BitmapFactory.decodeResource(getResources(),
R.drawable.play_needle);
public
MusicPlayDiscView(Context context) {
super
(context);
//分别获得光盘和专辑的圆形图片
bitmapCircularAblum = getCircularBitmap(bitmapImage,
400
);
bitmapDiscCircular = getCircularBitmap(bitmapDisc,
bitmapDisc.getWidth());
paint =
new
Paint();
handler =
new
Handler();
handler.post(runnable);
}
/**
* 利用线程不断更新界面
*/
private
Runnable runnable =
new
Runnable() {
public
void
run() {
postInvalidate();
handler.postDelayed(runnable,
50
);
}
};
//状态标志：
int
before =
0
;
//角度标志
private
int
degreeFlag =
0
;
@Override
protected
void
onDraw(Canvas canvas) {
super
.onDraw(canvas);
/**
* 先画光盘与专辑图片
*/
if
(Constant.CurrentState == Constant.Play) {
Constant.Degree++;
if
(Constant.Degree >
360
)
Constant.Degree =
0
;
degreeFlag = Constant.Degree;
canvas.save();
//360为屏幕的中间位置，手机是720的宽度
canvas.rotate(Constant.Degree,
360
,
170
+ bitmapDiscCircular.getHeight() /
2
);
canvas.drawBitmap(bitmapCircularAblum,
360
- bitmapCircularAblum.getWidth() /
2
,
200
, paint);
canvas.drawBitmap(bitmapDisc,
360
- bitmapDiscCircular.getWidth() /
2
,
170
, paint);
canvas.restore();
}
else
{
//before = 0;
canvas.save();
canvas.rotate(degreeFlag,
360
,
170
+ bitmapDiscCircular.getHeight() /
2
);
canvas.drawBitmap(bitmapCircularAblum,
360
- bitmapCircularAblum.getWidth() /
2
,
200
, paint);
canvas.drawBitmap(bitmapDisc,
360
- bitmapDiscCircular.getWidth() /
2
,
170
, paint);
canvas.restore();
}
/**
* 再画光盘指针图片,三张图不能同时画
*/
if
(Constant.CurrentState == Constant.Play ) {
canvas.drawBitmap(bitmapNeedle,
360
- bitmapNeedle.getWidth() /
2
,
0
, paint);
}
else
{
canvas.save();
Matrix matrix =
new
Matrix();
matrix.postRotate(-
45
);
paint.setAntiAlias(
true
);
//获得指针旋转后的图片
Bitmap bm = Bitmap.createBitmap(bitmapNeedle,
0
,
0
,
bitmapNeedle.getWidth(), bitmapNeedle.getHeight(), matrix,
true
);
canvas.drawBitmap(bm,
360
- bitmapNeedle.getWidth() /
2
+
5
, -
60
,
paint);
canvas.restore();
}
}
/**
* 获得圆形图片的方法
*
*/
private
Bitmap getCircularBitmap(Bitmap bitmap,
int
radius) {
Bitmap sbmp = Bitmap.createScaledBitmap(bitmap, radius, radius,
false
);
Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
Config.ARGB_8888);
Canvas canvas =
new
Canvas(output);
Paint paint =
new
Paint();
Rect rect =
new
Rect(
0
,
0
, sbmp.getWidth(), sbmp.getHeight());
paint.setAntiAlias(
true
);
paint.setFilterBitmap(
true
);
paint.setDither(
true
);
canvas.drawARGB(
0
,
0
,
0
,
0
);
paint.setColor(Color.BLACK);
canvas.drawCircle(sbmp.getWidth() /
2
, sbmp.getHeight() /
2
,
sbmp.getWidth() /
2
, paint);
paint.setXfermode(
new
PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(sbmp, rect, rect, paint);
return
output;
}
}
|
Constant为常量类，定义了四个常量。都是int类型，分别为播放、暂停、播放状态与转动角度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。