内文-2.indd

Size: px

Start display at page:

Download "内文-2.indd"

读里宰
5 years ago
Views:

包括歌手名与歌曲名, 单击列表条目可实现在线音乐播放, 单击播放暂停上一曲下一曲按钮可实现对应的功能, 进度条可以显示歌曲播放进度, 如图 1-2 所示图 1-1 程序启动画面

1 客户端服务端音乐资源信息 : 1. 项目需求从本项目开始, 我们一起开发一个简单的在线音乐播放器, 它具有以下功能 (1) 程序启动时显示一个启动画面, 如图 1-1 所示 (2) 在程序主页面显示服务器上的歌曲列表, 包括歌手名与歌曲名, 单击列表条目可实现在线音乐播放, 单击播放暂停上一曲下一曲按钮可实现对应的功能, 进度条可以显示歌曲播放进度, 如图 1-2 所示图 1-1 程序启动画面图 1-2 程序主页面 2. 项目设计思路在线音乐播放器的开发包括客户端的开发与服务端的开发音乐资源存放在服务器上客户端向服务端发送 URL 请求, 服务端将歌手名歌曲名 MP3 链接信息封装为 JSON 数组, 返回给客户端, 如图 1-3 所示下面对服务端与客户端分别进行设计 HttpGet:URL JSON 图 1-3 在线音乐播放器开发框架

2 项目一在线音乐播放器 15 要满足项目需求, 服务端需要按以下思路设计 : (1) 在 Apache 服务器上合理设计本项目的目录结构, 存放音乐资源文件及音乐信息索引文件 (2) 设计服务端与客户端的信息交互接口, 包括访问 URL 访问参数返回值 (3) 设计音乐信息索引文件, 按照 JSON 格式存放音乐信息, 可以方便地将音乐信息返回给客户端要满足项目需求, 客户端设计结构如图 1-4 所示, 相应的设计思路如下 : (1) 设计一个程序启动动画视图类 SplashActivity, 用于显示一个启动动画, 显示 APP 名称版本信息等动画播放完成后, 跳转到主视图 (2) 设计一个主视图类 MainActivity, 作为提供给用户的操作界面, 控制音乐的播放 (3) 设计一个 HTTP 访问功能类 HttpAsyncRequestTask, 负责客户端与服务端信息的交互 (4) 设计一个音乐信息封装类 Music, 用于封装音乐信息, 如歌手名音乐名等, 方便在不同的类之间传递音乐信息 (5) 设计一个音乐播放服务类 MusicService, 用于在后台播放音乐 MainActivity 通过 HttpAsyncRequestTask 从服务器获取到音乐信息, 通过 Music 封装后, 传递给 MusicService, 从而实现音乐的播放 (6) 设计一个音乐播放工具类 MusicUtil, 用于实现音乐播放的具体操作, 如播放暂停上一曲下一曲等 MusicService 通过调用 MusicUtil 中的方法实现音乐播放的具体操作 (7) 设计一个音乐列表显示适配器类 MusicListViewMainAdapter, 用于音乐列表显示 MainActivity 通过 HttpAsyncRequestTask 从服务器获取到音乐信息, 通过 Music 封装后, 传递给 MusicListViewMainAdapter, 从而实现音乐列表的显示 SplashActivity. java 启动视图 : 显示程序启动画面 MainActivity. java 主视图 : 音乐信息显示及音乐播放控制封装获取音乐信息 : HTTPGET:URL 返回音乐信息 : JSON Http Async Request Tast. java MusicService. java 音乐播放服务 : 在后台进行音乐播放播放 Music. java 音乐信息封装类 : 封装音乐信息服务端播放暂停 MusicUtil. java 音乐播放功能类 : 用于实现音乐播放的具体工作, 包括播放暂停上一曲下一曲等音乐信息显示 MusicListViewMainAdapter. java 音乐列表显示适配器 : 显示音乐列表服务器访问功能类 : 实现客户端与服务端信息交互图 1-4 客户端类结构

16 基于工作项目的 Android 高级开发实战按照以上设计思路, 我们把本项目的开发划分为两个任务 : 任务 1-1 服务端开发 ; 任务 1-2 客户端开发下面我们对两个任务分别进行描述任务 1-1 服务端开发 1.1.1 服务端目录结构设置在 XAMPP 的安装文件夹中找到 htdocs 文件夹, 在该文件夹中新建一个 music 文件夹, 用于存放音乐资源在 music 文件夹中新建一个文本文件, 命名为 music.

3 16 基于工作项目的 Android 高级开发实战按照以上设计思路, 我们把本项目的开发划分为两个任务 : 任务 1-1 服务端开发 ; 任务 1-2 客户端开发下面我们对两个任务分别进行描述任务 1-1 服务端开发服务端目录结构设置在 XAMPP 的安装文件夹中找到 htdocs 文件夹, 在该文件夹中新建一个 music 文件夹, 用于存放音乐资源在 music 文件夹中新建一个文本文件, 命名为 music.json, 存放歌手名歌曲名音乐文件存放路径等信息服务端文件结构如图 1-5 所示图 1-5 服务端文件结构接口设计访问 URL : 访问参数 : 无返回值 (json): 见表 1-1 表 1-1 音乐查询 JSON 接口服务器响应参数参数类型说明 name String 歌曲名 singer String 歌手名 mp3 String 音乐文件存放路径服务端代码编写用记事本打开 music.json, 建立一个 JSON 数组, 存放音乐资源信息, 代码如下 D:\xampp\htdocs\music\music.json [{"name":" 时间都去哪了 ","singer":" 王铮亮 ","mp3":"music/101.mp3",

mp3"] 注意 : 这里需要将 music.json 保存为 UTF-8 格式选择另存为命令, 然后将编码格式更改为 UTF-8 即可 1.1.4 测试在 XAMPP 安装文件夹中双击 xampp-control.

4 项目一在线音乐播放器 17 {"name":" 太多 ","singer":" 陈绮贞 ","mp3":"music/102.mp3", {"name":" 你我 ","singer":" 陈妍希 ","mp3":"music/103.mp3", {"name":" 十年 ","singer":" 陈奕迅 ","mp3":"music/104.mp3", {"name":" 待我长发及腰 ","singer":" 尚雯婕 ","mp3":"music/105.mp3"] 注意 : 这里需要将 music.json 保存为 UTF-8 格式选择另存为命令, 然后将编码格式更改为 UTF-8 即可测试在 XAMPP 安装文件夹中双击 xampp-control.exe 文件, 打开 XAMPP 控制台在控制台中单击 Apache 服务器对应的 Start 按钮, 开启 Apache 服务器, 如图 1-6 所示图 1-6 开启 Apache 服务器打开浏览器, 在地址栏中输入如果能够正常打开页面, 则测试成功, 如图 1-7 所示图 1-7 测试成功

$18 基于工作项目的 Android 高级开发实战注意 : 如果希望使用 Tomcat 服务器, 则需将上述开发的服务端 (music 文件夹 ) 复制到 D:\xampp\tomcat\webapps\ 中, 在 XAMPP 控制台中关闭 Apache 服务器, 开启 Tomcat 服务器, 然后在浏览器地址栏中输入 http://localhost:8080/music/music.$

5 18 基于工作项目的 Android 高级开发实战注意 : 如果希望使用 Tomcat 服务器, 则需将上述开发的服务端 (music 文件夹 ) 复制到 D:\xampp\tomcat\webapps\ 中, 在 XAMPP 控制台中关闭 Apache 服务器, 开启 Tomcat 服务器, 然后在浏览器地址栏中输入进行测试任务 1-2 客户端开发客户端文件结构在线音乐播放器客户端为 Android 客户端, 主要实现的功能包括显示程序启动画面显示服务器音乐资源信息在线播放音乐客户端主要描述分为启动界面和主界面两个模块启动界面 : 显示程序启动动画主界面 : 显示服务器音乐资源信息及在线播放音乐客户端文件结构如图 1-8 所示, 源文件共有 5 个包图 1-8 客户端文件结构客户端开发 1. 启动界面模块开发 1) 新建工程在 ADT 中新建一个 Android 工程, 应用程序名为 mp3online, 包名为 com.sziit.mp3online, 如图 1-9 所示单击 Next 按钮, 在所有页面选默认选项, 在最后的页面单击 Finish 按钮

6 项目一在线音乐播放器 19 图 1-9 新建一个 Android 工程工程创建成功后, 在包资源管理器中会出现一个 mp3online 工程, 有一个默认的包 com.sziit.mp3online.activities, 如图 1-10 所示图 1-10 包资源管理器如图 1-11 所示, 在 src 上单击鼠标右键, 在弹出的快捷菜单中选择 New Package 命令, 建立如图 1-12 所示的 adapters bean services 和 utils 几个包

$20 基于工作项目的 Android 高级开发实战图 1-11 新建包图 1-12 源程序所有的包再编辑 res\values\strings.xml, 方便字符串资源的整理, 代码如下 <?xml version="1.0" encoding="utf-8"?> <resources>.\mp3online\res\values\strings.$ $utils 上单击鼠标右键, 在弹出的快捷菜单中选择 New Class 命令, 建立一个空的类, 命名为 LogUtil, 用于控制日志的输出 ( 代码如下 ) 当 isopen 变量值为 true 时, 输出日志 ; 当 isopen 变量值为 false 时, 不输出日志.\mp3online\src\com.sziit.mp3online.utils\LogUtil.$

7 20 基于工作项目的 Android 高级开发实战图 1-11 新建包图 1-12 源程序所有的包再编辑 res\values\strings.xml, 方便字符串资源的整理, 代码如下 <?xml version="1.0" encoding="utf-8"?> <resources>.\mp3online\res\values\strings.xml <string name="app_name"> 在线音乐播放器 </string> <string name="action_settings">settings</string> <string name="hello_world">hello world!</string> <string name="title_activity_splash">splashactivity</string> </resources> 2) 日志控制类编写在包 com.sziit.mp3online.utils 上单击鼠标右键, 在弹出的快捷菜单中选择 New Class 命令, 建立一个空的类, 命名为 LogUtil, 用于控制日志的输出 ( 代码如下 ) 当 isopen 变量值为 true 时, 输出日志 ; 当 isopen 变量值为 false 时, 不输出日志.\mp3online\src\com.sziit.mp3online.utils\LogUtil.java package com.sziit.mp3online.utils; import android.content.context; import android.util.log;

8 项目一在线音乐播放器 21 import android.widget.toast; public class LogUtil { private static final String tag = "mylog"; private static final boolean isopen = true; * 打印日志 log public static void log(string log){ if(isopen){ Log.d(tag, log); * 显示 Toast context message public static void toast(context context, String message){ Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); 3) 创建启动画面视图 (1) 用鼠标右键单击包 com.sziit.mp3online.activities, 在弹出的快捷菜单中选择 New Other 命令 (2) 弹出选择框, 选择 Android Android Activity Blank Activity Next 操作路径 (3) 为相应的类文件与布局文件命名, 如图 1-13 所示图 1-13 为类文件与布局文件命名 4) 启动画面布局设计在 res 下新建一个文件夹 drawable, 将本书的相应资源文件复制到该文件夹中, 如图 1-14 所示

$22 基于工作项目的 Android 高级开发实战编辑 activity_splash.xml, 实现如图 1-15 所示的启动画面, 代码如下.\mp3online\res\layout\activity_splash.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.$

9 22 基于工作项目的 Android 高级开发实战编辑 activity_splash.xml, 实现如图 1-15 所示的启动画面, 代码如下.\mp3online\res\layout\activity_splash.xml <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".splashactivity" <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:text=" 在线音乐播放器 " android:textcolor="#555555" android:textsize="30dp" /> </RelativeLayout> 图 1-14 复制资源文件图 1-15 播放器启动画面 5) 程序启动动画设计编辑 SplashActivity.java, 实现在 1500 毫秒的屏闪后跳转到播放器主界面, 代码如下

10 项目一在线音乐播放器 23.\mp3online\src\com.sziit.mp3online.activities\SplashActivity.java package com.sziit.mp3online.activties; import com.sziit.mp3online.r; import android.os.bundle; import android.os.handler; import android.app.activity; import android.content.intent; * 闪屏 * 一般显示 1-3 秒 public class SplashActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_splash); // 延迟 1500 毫秒后跳转 new Handler().postDelayed(new Runnable() public void run() { // 跳转至工作界面 Intent intent = new Intent(SplashActivity.this, MainActivity.class); startactivity(intent); // 结束当前 Activity 的生命周期 SplashActivity.this.finish();, 1500); 6) 设置 SplashActivity 为程序启动视图编辑 AndroidManifest.xml, 取消 MainActivity 启动, 设置 SplashActivity 为程序启动视图且全屏显示, 代码如下.\mp3online\AndroidManifest.xml <activity android:name="com.sziit.mp3online.activties.splashactivity" android:screenorientation="portrait" android:theme="@android:style/theme.black.notitlebar.fullscreen" > <!-- 去掉标题栏, 且全屏显示 ( 去掉任务栏 ) - <intent-filter> <!-- 作为第一个启动的 activtiy - <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" />

24 基于工作项目的 Android 高级开发实战 </intent-filter> </activity> <activity android:name="com.sziit.mp3online.activties.mainactivity" android:label="@string/app_name" android:theme="@android:style/theme.black.

11 24 基于工作项目的 Android 高级开发实战 </intent-filter> </activity> <activity android:name="com.sziit.mp3online.activties.mainactivity" > </activity> 2. 主界面模块开发 1) 主界面布局设计编辑 activity_main.xml( 代码如下 ), 实现主界面布局使用 ListView 控件实现歌曲信息的显示, 如图 1-16 所示该布局设计较为复杂, 采用了线性布局的多层嵌套, 如图 1-17 所示权重设置方法 android:layout_weight="1" 在多处出现, 目的是使相应控件的宽 ( 对应水平线性布局 ) 或高 ( 对应垂直线性布局 ) 尽可能地充满整个布局空间图 1-16 播放器主界面布局图 1-17 播放器主界面布局设计.\mp3online\res\layout\activity_main.xml <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent"

12 项目一在线音乐播放器 25 android:orientation="vertical" tools:context=".mainactivity" > <!-- 标题栏 - <RelativeLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="#333" > <!-- 标题栏文字 - <TextView android:id="@+id/textviewtitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:text="@string/app_name" android:textcolor="#eee" android:textsize="18sp" /> </RelativeLayout> <!-- 音乐列表 - <ListView android:id="@+id/listv_main_music_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" > </ListView> <!-- 控制器 - <LinearLayout android:layout_width="match_parent" android:layout_height="100dp" android:layout_weight="0" android:background="#555" android:orientation="horizontal" > <!-- 封面图 - <ImageView android:id="@+id/imgv_main_music_cover" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginbottom="25dp" android:layout_marginleft="5dp" android:layout_marginright="5dp" android:layout_margintop="25dp" android:onclick="gotoplayer" android:src="@drawable/player_bg" /> <!-- 封面右边的区域 - <LinearLayout android:layout_width="0dp" android:layout_height="match_parent"

13 26 基于工作项目的 Android 高级开发实战 android:layout_weight="1" android:background="#555" android:orientation="vertical" > <!-- 音乐名称 - <TextView android:id="@+id/txtv_main_music_title" android:layout_width="wrap_content" android:layout_height="30dp" android:text="@string/app_name" android:textcolor="#eee" android:gravity="center_vertical" android:textsize="18sp" /> <!-- 播放进度 - <LinearLayout android:layout_width="match_parent" android:layout_height="30dp" android:gravity="center_horizontal"> <!-- 当前播放进度 - <TextView android:id="@+id/txtv_main_curr_time" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="00:00" android:textcolor="#eee" android:gravity="center_vertical" android:textsize="18sp" /> <!-- 进度条 - <SeekBar android:id="@+id/skb_main" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> <!-- 总的播放时长 - <TextView android:id="@+id/txtv_main_total_time" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="00:00" android:gravity="center_vertical" android:textcolor="#eee" android:textsize="18sp" /> </LinearLayout> <!-- 播放控制 - <RelativeLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal"

14 项目一在线音乐播放器 27 android:gravity="center_vertical"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_marginleft="30dp" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_marginright="30dp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout> 新建布局文件 list_item.xml, 为 activity_main.xml 中的 ListView 控件编写布局, 使用 TextView 控件实现歌手名与歌曲名的显示, 使用 weight 参数调整 TextView 控件宽度, 歌手名占每行的 3/10, 歌曲名占每行的 7/10( 代码如下 ), 实现效果如图 1-18 所示.\mp3online\res\layout\list_item.xml <?xml version="1.0" encoding="utf-8"?> <!-- 这个视图就是列表中的一条的视图布局文件 - <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:id="@+id/txtv_main_list_item_singer" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginleft="10dp" android:layout_weight="3" android:text=" 歌手名称 "

15 28 基于工作项目的 Android 高级开发实战 android:textsize="20dp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginleft="20dp" android:layout_weight="7" android:text=" 音乐名称 " android:textsize="20dp" /> </LinearLayout> 图 1-18 ListView 布局 2) 设计 HTTP 访问功能类在 com.sziit.mp3online.utils 中新建一个 HttpAsyncRequestTast 类, 用于 HTTP 访问该类继承自异步任务类 AsyncTask, 实现 HTTP 访问的后台异步执行通过参数 HttpUriRequest 获取客户端请求的 URL, 并返回服务器相应参数代码如下.\mp3online\src\com.sziit.mp3online.utils\HttpAsyncRequestTast.java package com.sziit.mp3online.utils; import java.io.ioexception; import org.apache.http.httpresponse; import org.apache.http.client.clientprotocolexception; import org.apache.http.client.httpclient; import org.apache.http.client.methods.httpurirequest; import org.apache.http.impl.client.defaulthttpclient; import org.apache.http.util.entityutils; import android.os.asynctask; * 异步任务实现类 * * <ol> * <li> 网络请求, 如加载数据下载图片下载音视频 </li> * <li> 一些复杂的耗时的工作 </li> * </ol> * lenovo public abstract class HttpAsyncRequestTast extends AsyncTask<HttpUriRequest, Integer, String> protected String doinbackground(httpurirequest... arg0) {

16 项目一在线音乐播放器 29 LogUtil.log(" 任务开始了, 进入后台执行任务 "); // 真正执行异步任务的方, 不可以在此方法修改 UI // 如果是作网络请求, 那么读取数据的地方也应该在这里 HttpUriRequest request = arg0[0]; //HttpGet HttpPost 都继承自 HttpUriRequest String result = null; //Apache 提供的一个 HTTP 客户端 HttpClient client = new DefaultHttpClient(); try { // 通过 HTTP 客户端执行一个请求, 它可以执行 get 和 post 请求 HttpResponse response = client.execute(request); //EntityUtils 用于帮助处理 HttpResponse 通过 getentity 获得数据的类 result = EntityUtils.toString(response.getEntity(), "UTF-8"); catch (ClientProtocolException e1) { e1.printstacktrace(); catch (IOException e1) { e1.printstacktrace(); //doinbackground() 执行成功后, 将从服务器获取到的数据 result 作为返回值返回, 接着会调用 onpostexecute(),result 将成为 onpostexecute() 的输入参数 return protected void oncancelled() { // 当取消异步任务时调用, 此处也可以更新 UI LogUtil.log(" 任务被取消了 "); protected void onpostexecute(string result) { // 当任务执行完成后回调, 此方法内部可以修改 UI LogUtil.log(" 任务完成了 "); super.onpostexecute(result); oncomplete(result);// protected void onprogressupdate(integer... values) { // 当执行的进度发生变化时回调, 这里也可以去更新 UI LogUtil.log(" 任务完成了 %"+values[0]+" "); super.onprogressupdate(values); * 当成功时

17 30 基于工作项目的 Android 高级开发实战 public abstract void oncomplete(string result); 3) 设计音乐信息封装类在 com.sziit.mp3online.bean 中创建一个类 Music, 用于封装音乐数据信息为该类定义属性 title path singer, 分别存放音乐的歌曲名音乐文件在服务器的存放路径歌手名定义属性后, 在代码空白处单击鼠标右键, 在弹出的快捷菜单中选择 Source Generate Getters and Setters 命令, 为所有的属性添加 get 与 set 方法代码如下.\mp3online\src\com.sziit.mp3online.bean\Music.java package com.sziit.mp3online.bean; * 音乐实体 * public class Music { private String title;// 标题 private String path;// 路径 private String singer;// 歌手 the title public String gettitle() { return title; title the title to set public void settitle(string title) { this.title = title; the path public String getpath() { return path; path the path to set public void setpath(string path) {

18 项目一在线音乐播放器 31 this.path = path; the singer public String getsinger() { return singer; singer the singer to set public void setsinger(string singer) { this.singer = singer; 4) 设计音乐列表显示适配器在 com.sziit.mp3online.adapters 中新建一个 MusicListViewMainAdapter 类, 作为主界面 ListView 适配器主界面视图将封装好的音乐信息发送给该适配器, 该适配器实现音乐列表的显示代码如下.\mp3online\src\com.sziit.mp3online.adapters\MusicListViewMainAdapter.java package com.sziit.mp3online.adapters; import java.util.list; import com.sziit.mp3online.r; import com.sziit.mp3online.bean.music; import android.content.context; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; import android.widget.baseadapter; import android.widget.textview; * 首页音乐列表 Adapter lenovo public class MusicListViewMainAdapter extends BaseAdapter { private List<Music> mdata; private Context mcontext; private LayoutInflater minflater;// 用于读取 layout 布局文件 * MusicListViewMainAdapter 的构造方法, 在实例化时会要求传入音乐列表及当前的上下文

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new

ListView 自訂排版主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new int[]{r.drawable.dog1, R.drawable.dog2,