android小项目之音乐播放器一

以你之姓@ 2023-10-16 19:29 46阅读 0赞

## **Android应用开发--MP3音乐播放器界面设计（1）** ##

**![20130508124334595][]**

近期突然想自己开发一款MP3播放器，所以就有了上面的界面，小巫不才，为了记录自己的开发过程，写成博客，个人开发可能有很多地方不规范，但学习嘛，总会有个过程的，不能连爬都不会就想跑吧。

简单介绍一下这个播放器

作者：wwj

名称：简、美音乐播放器（注：自己取的名字，能不能做到字面上的效果还不一定，勿喷啊！）

项目成立时间：2013年5月7日

预期结束时间：2013年5月20日

### 第一步：搭建界面 ###

实现代码：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.  xmlns:tools="http://schemas.android.com/tools"
3.  android:id="@+id/RelativeLayout1"
4.  android:layout\_width="match\_parent"
5.  android:layout\_height="match\_parent"
6.  android:background="@drawable/bg\_playback"
7.  android:orientation="vertical" >
8.  
9.  <RelativeLayout
10. android:id="@+id/handle\_btnlayout"
11. android:layout\_width="match\_parent"
12. android:layout\_height="wrap\_content" >
13. 
14. <Button
15. android:id="@+id/previous\_music"
16. android:layout\_width="wrap\_content"
17. android:layout\_height="wrap\_content"
18. android:layout\_alignParentLeft="true"
19. android:background="@drawable/previous\_music\_selector" />
20. 
21. <Button
22. android:id="@+id/repeat\_music"
23. android:layout\_width="wrap\_content"
24. android:layout\_height="wrap\_content"
25. android:layout\_toRightOf="@id/previous\_music"
26. android:background="@drawable/repeat\_none\_selector" />
27. 
28. <Button
29. android:id="@+id/play\_music"
30. android:layout\_width="wrap\_content"
31. android:layout\_height="wrap\_content"
32. android:layout\_toRightOf="@id/repeat\_music"
33. android:background="@drawable/play\_selector" />
34. 
35. <Button
36. android:id="@+id/shuffle\_music"
37. android:layout\_width="wrap\_content"
38. android:layout\_height="wrap\_content"
39. android:layout\_toRightOf="@id/play\_music"
40. android:background="@drawable/shuffle\_none\_selector" />
41. 
42. <Button
43. android:id="@+id/next\_music"
44. android:layout\_width="wrap\_content"
45. android:layout\_height="wrap\_content"
46. android:layout\_alignParentRight="true"
47. android:background="@drawable/next\_music\_selector" />
48. </RelativeLayout>
49. 
50. <ListView
51. android:id="@+id/music\_list"
52. android:layout\_width="match\_parent"
53. android:layout\_height="wrap\_content"
54. android:layout\_below="@id/handle\_btnlayout"
55. android:layout\_marginBottom="50dp" >
56. </ListView>
57. 
58. <RelativeLayout
59. android:id="@+id/singleSong\_layout"
60. android:layout\_width="match\_parent"
61. android:layout\_height="wrap\_content"
62. android:layout\_alignParentBottom="true" >
63. 
64. <ImageView
65. android:id="@+id/music\_album"
66. android:layout\_width="wrap\_content"
67. android:layout\_height="50dp"
68. android:layout\_alignParentBottom="true"
69. android:layout\_alignParentLeft="true"
70. android:src="@drawable/ic\_launcher" />
71. 
72. 
73. <RelativeLayout
74. android:id="@+id/music\_about\_layout"
75. android:layout\_width="match\_parent"
76. android:layout\_height="match\_parent"
77. android:layout\_alignParentBottom="true"
78. android:layout\_alignTop="@+id/music\_album"
79. android:layout\_toRightOf="@id/music\_album" >
80. 
81. <TextView
82. android:id="@+id/text1"
83. android:layout\_width="wrap\_content"
84. android:layout\_height="wrap\_content"
85. android:layout\_alignParentLeft="true"
86. android:layout\_marginTop="5.0dp"
87. android:layout\_marginLeft="5.0dp"
88. android:text="@string/siger"/>
89. <TextView
90. android:id="@+id/text2"
91. android:layout\_width="wrap\_content"
92. android:layout\_height="wrap\_content"
93. android:layout\_below="@id/text1"
94. android:layout\_alignParentLeft="true"
95. android:layout\_marginLeft="5.0dp"
96. android:layout\_marginTop="8.0dp"
97. android:text="@string/time"/>"
98. </RelativeLayout>
99. 
100. 
101. <Button
102. android:layout\_width="wrap\_content"
103. android:layout\_height="wrap\_content"
104. android:layout\_alignParentBottom="true"
105. android:layout\_alignParentRight="true"
106. android:background="@drawable/play\_queue\_selector" />
107. 
108. </RelativeLayout>
109. 
110. </RelativeLayout>

图片素材：

![20130508125312318][]

![20130508125329071][] ![20130508125409914][] ![20130508125418644][]![20130508125426553][] ![20130508125439253][]![20130508125444389][]![20130508125458552][]![20130508125505742][]![20130508125516716][]![20130508125527017][]![20130508125558563][]![20130508125605206][]![20130508125612131][]

![20130508125642140][]![20130508125648269][]

项目初始结构：

![20130508125814670][]

以上内容为整个项目的开篇，接下来一步一步去解决困难，寻找需求，希望能顺利开发出这款简单、美丽的音乐播放器。

[20130508124334595]: https://img-blog.csdn.net/20130508124334595
[view plain]: http://blog.csdn.net/wwj_748/article/details/8899699#
[20130508125312318]: https://img-blog.csdn.net/20130508125312318
[20130508125329071]: https://img-blog.csdn.net/20130508125329071
[20130508125409914]: https://img-blog.csdn.net/20130508125409914
[20130508125418644]: https://img-blog.csdn.net/20130508125418644
[20130508125426553]: https://img-blog.csdn.net/20130508125426553
[20130508125439253]: https://img-blog.csdn.net/20130508125439253
[20130508125444389]: https://img-blog.csdn.net/20130508125444389
[20130508125458552]: https://img-blog.csdn.net/20130508125458552
[20130508125505742]: https://img-blog.csdn.net/20130508125505742
[20130508125516716]: https://img-blog.csdn.net/20130508125516716
[20130508125527017]: https://img-blog.csdn.net/20130508125527017
[20130508125558563]: https://img-blog.csdn.net/20130508125558563
[20130508125605206]: https://img-blog.csdn.net/20130508125605206
[20130508125612131]: https://img-blog.csdn.net/20130508125612131
[20130508125642140]: https://img-blog.csdn.net/20130508125642140
[20130508125648269]: https://img-blog.csdn.net/20130508125648269
[20130508125814670]: https://img-blog.csdn.net/20130508125814670