基于Android平台的新闻客户端的设计与实现

实习项目四、

基于Android平台的新闻客户端的

设计与实现

专业：计算机技术

学号：

姓名：ls

辅导老师：

2015年7月7日

目录

第1章诸论 (3)

1.1开发背景 (3)

1.2开发工具的选用及介绍 (3)

1.3开发环境介绍 (4)

第2章系统分析与设计流程 (5)

2.1服务器和数据库的搭建 (5)

2.2使用PHP生成新闻JSON数据 (6)

2.3实现新闻列表界面的布局 (8)

2.4实现新闻列表界面的JSON数据解析和填充 (9)

2.5实现新闻列表界面的跳转并展示详情 (11)

结束语 (12)

附录 (13)

第1章诸论

1.1 开发背景

移动互联网背景下，手机凭借其随时随地、移动与便携等优势发展成为重要的大众传播媒体，成为媒介融合的新平台。移动新闻客户端凭借其丰富的资讯资源、实时的信息推送被越来越多的用户认可。对于各行各业来说，为了展示企业良好形象，新闻客户端是面向用户中必不可少的一部分。

1.2 开发工具的选用及介绍

1. PHP 生成JSON 数据：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java 和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。JSON 可以将JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从Web 客户机传递给服务器端程序。本文利用PHP文件解析数据库表，生成JSON数据。

2.HBuilder：HBuilder是DCloud（数字天堂）推出一款支持html5的Web 开发ide。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升html、js、css的开发效率。本文利用HBuilder来编写PHP文件。

3.XAMPP：XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建XAMPP 软件站集成软件包。许多人通过他们自己的经验认识到安装Apache 服务器是件不容易的事儿。如果想添加MySQL、PHP 和Perl，那就更难了。XAMPP 是一个易于安装且包含MySQL、PHP 和Perl 的Apache 发行版。XAMPP 的确非常容易安装和使用：只需下载，解压缩，启动即可。本文通过XAMPP搭建

Apache服务器和MySQL数据库。

4.Eclipse：Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。本文以Eclipse为工具，以Android为平台，开发一个简单的新闻客户端应用，实现新闻列表界面的布局、JSON数据解析和填充、以及新闻列表界面的跳转并显示详情。

1.3 开发环境介绍

基于Android平台的新闻客户端项目所用数据库为MySQL，服务器为Apache，主要开发工具为eclipse，在Android平台实现，程序运行环境为windows 8，内存4G，源码详见附录。

第2章系统分析与设计流程

本章主要利用Apache+MyAQL+Android，采用边开发边分析的方法，搭建了一个简单的、可运行的Android新闻客户端服务系统，实现了从服务器端获取数据并显示在应用界面，点击时跳转到新闻详情页面的功能。

2.1 服务器和数据库的搭建

图2-1 用XAMPP启动Apache和MySQL

服务器的架设是在本机上完成，装上XAMPP软件包后打开，如图2-1，启动Apache服务器和MySQL数据库，点击Admin进入管理界面，新建一个名为newsdemo的数据库，排序规则为utf8，然后建立一个名为news的数据库表，创建六个字段，然后插入两条相应的新闻数据，如图2-2。

2.2 使用 PHP 生成新闻 JSON 数据

图2-3 数据库表news

如图2-3，数据库中的表news，有六个字段，第一个字段叫做id，是新闻的序号，序号作为新闻的主键，使每条新闻不重复，与新闻内容有关的是另外五个字段：title（标题），desc（新闻简要概述），time（新闻时间），content_url（新

闻内容链接），pic_url（新闻图片链接）。最终实现的效果是通过一个PHP网

页，即http：//xxx/getNewsJSON.php，将表中的所有数据转换为JSON数据的格式，就可以得到图下方的JSON字符串，即一个数组包裹的JSON对象，其中包含了5个键值对，分别为新闻的5个元素。

图2-4 用Hbuilder编写PHP文件

如图2-4，通过HBuider编辑器编写PHP网页，连接数据库，并把当前的数据输出为JSON格式，新建一个getNewsJSON.php文件用来获得JSON数据，和一个mysql_connect.php文件用来连接数据库，代码详见附录。

因为服务器搭建在本机，在浏览器中访问地址http://127.0.0.1/NewsDemo/getNewsJSON.php，可以看到这时生成了格式为utf-8的JSON数据，如图2-5，证明数据解析成功。

图2-5 本机测试浏览JSON数据

2.3 实现新闻列表界面的布局

本节主要完成了在Android界面中实现新闻列表界面的布局，主界面采用垂直线性布局，完成新闻列表项listview，声明一个NewsAdapter的类使其继承自BaseAdapter，并实现图2-6的四个方法。

图2-6 adapter实现的四个方法

其中第四个方法getView（）是非常重要的，如图2-7，在News2程序界面的最外层是一个listview，它里面有两项，对应了两条新闻，getView是指的其中某一项的布局，也就是右边的view，包括了新闻缩略图，新闻标题，新闻梗概，和布局右上侧的新闻时间，用NewsAdapter将新闻与布局适配起来。

图2-7 getView方法的使用

2.4 实现新闻列表界面的 JSON 数据解析和填充

首先要有一个获取JSON字符串的网络地址，即public static final String GET_NEWS_URL="http://192.168.191.1/NewsDemo/getNewsJSON.php"；因为服务器软件是在本机运行的，所以192.168.191.1为本机的IP地址，打开浏览器，输入http://192.168.191.1/NewsDemo/getNewsJSON.php，如图2-8，可以看到，确实从外网访问到了我本机的IP，并且取到了getNewsJSON所生成的这个字符串。

图2-8 利用IP测试浏览JSON数据

因为我们要访问网络，所以要写一个HttpUtils的工具类，实现getNewsJSON （）方法，用来传入获取到JSON数据的url并解析JSON数据，首先用new Thread （）方法开启一个线程，开启输入流，一行一行的读取数据，每读完一行就要进行拼接，因为在字符串拼接方面StringBuilder要比单纯的String的那种“+”的方式要高效很多，所以这里使用StringBuilder方法拼接。获取到JSON数据后，调用handler.sendmessage（）方法通知主线程。然后再在MainActivity当中实现Handler（）方法，调用其中的handlerMessage（）回调方法获取到JSON数据，下一步就是对其进行解析。

因为JSON数据格式为数组，它里面有若干个JSON的对象，对于JSON数据的解析，可以看下下面的代码，首先将获取到的jsonData传递进来，

jsonArray.length()获取到JSON对象的个数，然后写一个循环来获取到JSON里的每一个对象。

JSONArray jsonArray = new JSONArray(jsonData);

for (int i=0;i

JSONObject object = jsonArray.getJSONObject(i);

String title = object.getString("title");

String desc = object.getString("desc");

……

}

这样解析出来了还远远不够，得到的数据现在还是分散的，在组织上看起来比较杂乱无章，为了能让这些数据更好的组织起来，就是每个新闻对应5个元素，另一个新闻也对应5个元素，那么这时候我们在新建一个javabean的类，比如说它叫News，那么这个News对象它里面就有5个属性，分别对应了新闻的5个元组，通过这种方式就可以很好地把获取到的数据有序的组织起来，方便后面的使用，方法里的成员属性和构造方法如下，并实现get（）和set（）方法。

public class News {

private String title;

private String desc;

private String time;

private String content_url;

private String pic_url;

public News(String title ,String desc,String time,String content_url,String, pic_url){ setTitle(title);

setDesc(desc);

setTime(time);

setContent_url(content_url);

setPic_url(pic_url);

}

}

在MainActivity中定义一个List集合，集合里的每个元素都是News类型，叫做newslist，在OnCreate（）方法中初始化newslist后，就可以将解析完的JSON 对象的5个元素添加到newslist里面，更新adapter方法，并将List添加到成员属性和构造方法中。对于图片的加载，由于需要访问网络，则需在HttpUtils 工具类里用setPicBitmap()方法实现。

2.5 实现新闻列表界面的跳转并展示详情

对listview添加点击事件，来实现点击相应的新闻列表项可以查看相应的新闻详情。实现机制如图2-9，在MainActivity中就很多的新闻条目，点击某一个新闻条目的时候，将这个新闻项的content_url，也就是这个新闻的具体地址传递给一个Activity，例如叫做BrowseNewsActivity，用来浏览新闻，里面只有一个控件WebView，WebView相当于一个提供好的自带的浏览器，可以直接调用webView.loadUrl()，将content_url这个地址传递进去，在WebView上加载出这个网页，根据这个思路，需要新建一个BrowseNewsActivity以及对应的布局文件，用getSettings().setJavaScriptEnabled(true)方法启用当前WebView的JavaScript，就像当前页面中的JavaScript代码；用getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK)方法设置为，当没有网络时读取本地的缓存，有网络的时候就直接访问。

图2-9 单击跳转的实现机制

在MainAcitivity中添加OnItemClickListener点击事件,并实现未实现的方法onItemClick（），在此方法中获取到新闻的地址conten_url，并传递到BrowseNewsActivity当中去，然后在BrowseNewsActivity中用getIntent（）方法获取到新闻地址，直接调用webView.loadUrl()函数将地址传入，最后将BrowseNewsActivity加入到AndroidManifest中就可以了。

结束语

经过老师耐心细致的指导，及设计小组同学们的密切合作，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)，项目已经初步完成，总结这次“基于Android平台的新闻客户端”开发制作过程，我们综合使用了目前互联网上的各种工具，包括使用XAMPP搭建服务器和数据库，使用HBuidler设计PHP文件等，初步在Android平台上实现了这个简单的新闻客户端。同时通过解决项目中遇到的各类问题（比如由于本地搭建服务器，在真机测试时获取不到JSON数据，获取到了数据填充不上等问题磨了很长时间才解决），对用Android 开发应用有了更进一步的认识。学会了如何使用MYSQL建立数据库，以及对数据库浏览，修改，添加，查询；学会了如何用PHP解析JSON数据等；受益匪浅。

由于课程设计者水平有限，错误之处在所难免，请老师批评指正。

附录

MainActivity.java

package com.example.news2;

import java.util.ArrayList;

import java.util.List;

import org.json.JSONArray;

import org.json.JSONObject;

import com.example.news2.R;

import com.example.news2.adapter.NewsAdapter;

import com.example.news2.model.News;

import com.example.news2.utils.HttpUtils;

import android.support.v7.app.ActionBarActivity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ListView;

public class MainActivity extends ActionBarActivity implements OnItemClickListener {

private ListView lvNews;

private NewsAdapter adapter;

private List newsList;

public static final String

GET_NEWS_URL="http://192.168.191.1/NewsDemo/getNewsJSON.php";

private Handler getNewsHander=new Handler(){

public void handleMessage(android.os.Message msg) {

String jsonData=(String) msg.obj;

System.out.println(jsonData);

try {

JSONArray jsonArray=new JSONArray(jsonData);

for(int i=0;i

JSONObject object=jsonArray.getJSONObject(i);

String title=object.getString("title");

String desc=object.getString("desc");

String time=object.getString("time");

String content_url=object.getString("content_url");

String pic_url=object.getString("pic_url");

System.out.println("title="+title);

System.out.println("pic_url="+pic_url);

newsList.add(new

News(title,desc,time,content_url,pic_url));

}

adapter.notifyDataSetChanged();

} catch (Exception e) {

e.printStackTrace();

}

};

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(https://www.360docs.net/doc/a715331727.html,yout.activity_main);

lvNews=(ListView) findViewById(R.id.lvNews);

newsList=new ArrayList();

adapter=new NewsAdapter(this,newsList);

lvNews.setAdapter(adapter);

lvNews.setOnItemClickListener(this);

HttpUtils.getNewsJSON(GET_NEWS_URL, getNewsHander);

}

@Override

public void onItemClick(AdapterView arg0, View arg1, int position, long arg3) {

News news=newsList.get(position);

Intent intent=new Intent(this,BrowseNewsActivity.class);

intent.putExtra("content_url", news.getContent_url());

startActivity(intent);

}

}

BrowseNewsActivity.java

package com.example.news2;

import com.example.news2.R;

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebSettings;

public class BrowseNewsActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(https://www.360docs.net/doc/a715331727.html,yout.activity_browse_news);

webView=(WebView) findViewById(R.id.webView);

String pic_url=getIntent().getStringExtra("content_url");

webView.loadUrl(pic_url);

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_ NETWORK);

}

}

NewsAdapter.java

package com.example.news2.adapter;

import java.util.List;

import com.example.news2.R;

import com.example.news2.model.News;

import com.example.news2.utils.HttpUtils;

import android.content.Context;

import https://www.360docs.net/doc/a715331727.html,youtInflater;

import android.view.View;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class NewsAdapter extends BaseAdapter {

private Context context;

private List newsList;

public NewsAdapter(Context context,List newsList){

this.context=context;

this.newsList=newsList;

}

@Override

public int getCount() {

return newsList.size();

}

@Override

public Object getItem(int position) {

return newsList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) { if(convertView==null){

convertView=LayoutInflater.from(context).inflate(https://www.360docs.net/doc/a715331727.html,yout.news_item, null);

}

TextView tvTitle=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Title);

TextView tvDesc=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Desc);

TextView tvTime=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Time);

ImageView ivPic=(ImageView) convertView.findViewById(R.id.ivPic);

News news=newsList.get(position);

tvTitle.setText(news.getTitle());

tvDesc.setText(news.getDesc());

tvTime.setText(news.getTime());

String pic_url=news.getPic_url();

HttpUtils.setPicBitmap(ivPic, pic_url);

return convertView;

}

}

News.java

package com.example.news2.adapter;

import java.util.List;

import com.example.news2.R;

import com.example.news2.model.News;

import com.example.news2.utils.HttpUtils;

import android.content.Context;

import https://www.360docs.net/doc/a715331727.html,youtInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class NewsAdapter extends BaseAdapter {

private Context context;

private List newsList;

public NewsAdapter(Context context,List newsList){

this.context=context;

this.newsList=newsList;

}

@Override

public int getCount() {

return newsList.size();

}

@Override

public Object getItem(int position) {

return newsList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) { if(convertView==null){

convertView=LayoutInflater.from(context).inflate(https://www.360docs.net/doc/a715331727.html,yout.news_item, null);

}

TextView tvTitle=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Title);

TextView tvDesc=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Desc);

TextView tvTime=(TextView) convertView.findViewById(https://www.360docs.net/doc/a715331727.html,Time);

ImageView ivPic=(ImageView) convertView.findViewById(R.id.ivPic);

News news=newsList.get(position);

tvTitle.setText(news.getTitle());

tvDesc.setText(news.getDesc());

tvTime.setText(news.getTime());

String pic_url=news.getPic_url();

HttpUtils.setPicBitmap(ivPic, pic_url);

return convertView;

}

}

HttpUtils.java

package com.example.news2.utils;

import java.io.BufferedReader;

import java.io.InputStream;

import java.io.InputStreamReader;

import https://www.360docs.net/doc/a715331727.html,.HttpURLConnection;

import https://www.360docs.net/doc/a715331727.html,.URL;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.os.Handler;

import android.os.Message;

import android.widget.ImageView;

public class HttpUtils {

public static void getNewsJSON(final String url,final Handler handler){ new Thread(new Runnable(){

@Override

public void run() {

HttpURLConnection conn;

InputStream is;

try {