下面这篇文章我在国外的网站上看到的，感觉质量很不错，所以就花了一些时间来翻译一下，并且里面也加入了我自己的开发经验，希望这篇文章能够为广大Android开发者提供一个帮助。

在本教程中,我将讨论构建一个简单的播放器,有基本的控件,比如播放、暂停、前进、后退,下一首,前一首，播放列表和进度条。这款应用基本上会读所有的音频文件(mp3)从sdcard，然后播放选中歌曲。对于本教程我引用MediaPlayer类来实现这个App.

Android MediaPlayer Class

Android SDK提供了MediaPlayer这个类在Android里构建媒体服务例如音频，视频的播放等等。在本教程中,我使用下面这个类的功能控制音频播放器。
MediaPlayer mp = new MediaPlayer(); // Set data source - setDataSource( "/sdcard/path_to_song" ); // Play audio mp.start(); // Pause audio mp.pause(); // Reset mediaplayer mp.reset(); // Get song length duration - in milliseconds mp.getDuration(); // Get current duration - in milliseconds mp.getCurrentDuration(); // Move song to particular second - used for Forward or Backward mp.seekTo(positon); // position in milliseconds // Check if song is playing or not mp.isPlaying(); // returns true or false

1. Designing the Audio Player Layout


设计你的音频播放器可以使用一些平面设计软件例如photoshop之类，当然这个是专业的要求，因为我们要做的更好。我用photoshop来设计这款应用程序的布局。如果你不想自己设计可以从互联网下载图片使用，下面是一张截图,音频播放器,我们将在本教程中构建。

2. 准备所需的 Icons and Images

一旦你完成了你的应用程序的布局设计,为音频播放器应用程序准备所需的图标和背景图像,准备不同状态下的图标，例如默认，聚焦，按下等等。然后把它们放在drawable文件夹下。

3. 为不同状态的ICON写布局 (默认/聚焦/按下)

在保存所有不同状态的图标之后，我们需要为每一个icon写布局，下面是一个play button的布局，在drawable文件夹下创建并保存。
btn_play.xml
< selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:drawable = "@drawable/img_btn_play_pressed" android:state_focused = "true" android:state_pressed = "true" /> < item android:drawable = "@drawable/img_btn_play_pressed" android:state_focused = "false" android:state_pressed = "true" /> < item android:drawable = "@drawable/img_btn_play_pressed" android:state_focused = "true" /> < item android:drawable = "@drawable/img_btn_play" android:state_focused = "false" android:state_pressed = "false" /> </ selector>
注意: 其他的icon根据这个例子来写(如btn_pause.xml,btn_next.xmletc,.)

4. 为SeekBar写布局设计

在本教程中,我使用定制的SeekBar显示歌曲的进展，您可以设计默认风格的SeekBar通过使用xml样式。在drawable文件夹下建立xml文件夹并创建 seekbar_progress_bg.xml 这个是改变SeekBar的背景样式（不使用默认的）
<?xmlversion="1.0"encoding="utf-8"?> <layer-listxmlns:android="http://schemas.android.com/apk/res/android"> <item> <clip> <bitmapxmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/img_seekbar_progress_blue" android:tileMode="repeat" android:antialias="true" android:dither="false" android:filter="false" android:gravity="left" /> </clip> </item> </layer-list>
seekbar_progress.xml 这个是改变 SeekBar的进度条样式
<? 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:drawable = "@drawable/img_seekbar_bg" android:dither = "true" > </ item > < item android:id = "@android:id/secondaryProgress" > < clip > < shape > < gradient android:startColor = "#80028ac8" android:centerColor = "#80127fb1" android:centerY = "0.75" android:endColor = "#a004638f" android:angle = "270" /> </ shape > </ clip > </ item > < item android:id = "@android:id/progress" android:drawable = "@drawable/seekbar_progress_bg" /> </ layer-list >
<? 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:drawable = "@drawable/img_seekbar_bg" android:dither = "true" > </ item > < item android:id = "@android:id/secondaryProgress" > < clip > < shape > < gradient android:startColor = "#80028ac8" android:centerColor = "#80127fb1" android:centerY = "0.75" android:endColor = "#a004638f" android:angle = "270" /> </ shape > </ clip > </ item > < item android:id = "@android:id/progress" android:drawable = "@drawable/seekbar_progress_bg" /> </ layer-list >

如下是 SeekBar的xml布局，可以看到在他的属性里面调用了上面两个xml文件，这样就实现了自定义样式。
< SeekBar android:id = "@+id/songProgressBar" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_marginRight = "20dp" android:layout_marginLeft = "20dp" android:layout_marginBottom = "20dp" android:layout_above = "@id/player_footer_bg" android:thumb = "@drawable/seek_handler" android:progressDrawable = "@drawable/seekbar_progress" android:paddingLeft = "6dp" android:paddingRight = "6dp" />

5. 为Player写XML布局

到目前为止,我们为所有的图标，seekbar创建了单独的xml布局,现在我们需要将所有东西组合起来都变成单独布局。在layout创建一个新文件player.xml
player.xml
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "@color/player_background" > <!-- Player Header --> < LinearLayout android:id = "@+id/player_header_bg" android:layout_width = "fill_parent" android:layout_height = "60dip" android:background = "@layout/bg_player_header" android:layout_alignParentTop = "true" android:paddingLeft = "5dp" android:paddingRight = "5dp" > <!-- Song Title --> < TextView android:id = "@+id/songTitle" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_weight = "1" android:textColor = "#04b3d2" android:textSize = "16dp" android:paddingLeft = "10dp" android:textStyle = "bold" android:text = "The Good, The Bad And The Ugly" android:layout_marginTop = "10dp" /> <!-- Playlist button --> < ImageButton android:id = "@+id/btnPlaylist" android:layout_width = "wrap_content" android:layout_height = "fill_parent" android:src = "@drawable/btn_playlist" android:background = "@null" /> </ LinearLayout > <!-- Song Thumbnail Image --> < LinearLayout android:id = "@+id/songThumbnail" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:paddingTop = "10dp" android:paddingBottom = "10dp" android:gravity = "center" android:layout_below = "@id/player_header_bg" > < ImageView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:src = "@drawable/adele" /> </ LinearLayout > <!-- Player Footer --> < LinearLayout android:id = "@+id/player_footer_bg" android:layout_width = "fill_parent" android:layout_height = "100dp" android:layout_alignParentBottom = "true" android:background = "@layout/bg_player_footer" android:gravity = "center" > <!-- Player Buttons --> < LinearLayout android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:orientation = "horizontal" android:gravity = "center_vertical" android:background = "@layout/rounded_corner" android:paddingLeft = "10dp" android:paddingRight = "10dp" > <!-- Previous Button --> < ImageButton android:id = "@+id/btnPrevious" android:src = "@drawable/btn_previous" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "@null" /> <!-- Backward Button --> < ImageButton android:id = "@+id/btnBackward" android:src = "@drawable/btn_backward" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "@null" />

更多相关文章

  1. Android首席设计师宣称移动概念已死，开发者应该面向屏幕编写应用
  2. Android(安卓)界面滑动实现---Scroller类 从源码和开发文档中学
  3. Android(安卓)Studio安卓学习笔记(三)Android用户界面的设计布局
  4. Android(安卓)API Guides---Layouts
  5. Android中Toast的常用使用方式总结
  6. 简述Unity中调用Android方法
  7. 第3.1.3节 排布视图
  8. 【Android】ColorPickerDialog 自定义颜色选择器的实现
  9. Android应用设计提示：关于资源对象

随机推荐

  1. android p vts VtsTrebleVendorVintfTest
  2. Android(安卓)Studio build.gradle 编码
  3. Android(安卓)Neon 优化方式讲解
  4. 最近在翻译国外一本新书 The Android(安
  5. Android：从Eclipse到Android(安卓)Studio
  6. android 在google商店里搜索不到的问题
  7. android 计算器（2）
  8. android studio 程序员有福了—从layout
  9. 设置 listview 滚动条样式
  10. android 开发实现静默安装