新聞客戶端案例開發 · java/android朝圣之路

新聞客戶端，顧名思義就是看新聞用的客戶端。該新聞用到的知識模塊有：android高級界面設計（Fragment、ViewPager），android網絡通信（http通信），開源組件（xutils框架-HttpUtils模塊、xutils框架-BitmapUtils模塊），開源框架（library）。所需jar包：xUtils、gson、android-support-v4。主界面滑動標簽：library框架用于主界面標簽 ?主界面ViewPager：ViewPager與上部分的library框架結合做成Fragment動態效果 ?ListView中的每個Item： ?HttpUtils模塊進行是用于進行訪問網絡，獲取json數據 ?BitmapUtils模塊進行網絡圖片的加載和顯示 ?android-support-v4.jar包提供ViewPager控件 ?library開源代碼框架庫，是用來實現簡易新聞客戶端上端的滑動標簽，同時它與ViewPager控件結合最終實現的是[Fragment](http://blog.csdn.net/sdksdk0/article/details/Fragment%E4%BB%8B%E7%BB%8D.doc)的動態實現。 ?簡易新聞客戶端上端滑動標簽是用了library開源代碼框架中的com.viewpagerindicator.TabPageIndicator控件 ?ViewPager控件是android-support-v4.jar包中的android.support.v4.view.ViewPager控件。 ?用了com.viewpagerindicator.TabPageIndicator這個控件之后，要對界面主題（Theme）進行修改，在styles.xml文件中創建相關的style 首先導入libary庫：千萬不要直接把庫拷貝進項目文件夾中，這樣可能會出現各種其他不知名的錯誤，建議通過Import Module方式一步步導入庫文件。然后在file->project structure->dependencies->3Model dependency中選擇library庫就可以了，還要在2中導入一個gson.jar和xUtils.jar。此時庫已成功導入。我們首先來寫布局文件，activity_main.xml ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <include android:id="@+id/header" android:layout_width="match_parent" android:layout_height="@dimen/header_height" layout="@layout/header"/> <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/header"> </com.viewpagerindicator.TabPageIndicator> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/indicator"> </android.support.v4.view.ViewPager> </RelativeLayout> ~~~ 第2個是頭部header.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="@dimen/header_height" android:background="@mipmap/setting_iv_bg" android:gravity="center"> <TextView android:text="@string/header_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/header_text_size" /> </RelativeLayout> ~~~ 第三個是下面的viepage頁面，fragment.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/newsList" android:layout_width="match_parent" android:layout_height="wrap_content"></ListView> </LinearLayout> ~~~ 以及細節部分fragment_list_item.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" > <ImageView android:id="@+id/newIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:src="@mipmap/skyblue_logo_whatsapp_checked"/> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="@+id/newIcon" > <TextView android:id="@+id/newTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/newTitleTxtSize" /> <TextView android:id="@+id/newTime" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/newTimeTxtSize" /> </LinearLayout> </RelativeLayout> ~~~ 既然是一個新聞客戶端那必須要有數據，那么數據當然就需要json解析來從第三方網站獲取新聞數據，下面來簡要介紹一下json數據的解析過程。 ?JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。它基于ECMAScript的一個子集。JSON采用完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數據交換語言。易于人閱讀和編寫，同時也易于機器解析和生成(一般用于提升網絡傳輸速率)。這個時候我們需要在src中新建一個bean類來存放json的數據 ~~~ public class jsonBean { private String title; private String url; private String listimage; private String pubdate; public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getListimage() { return listimage; } public void setListimage(String listimage) { this.listimage = listimage; } public String getPubdate() { return pubdate; } public void setPubdate(String pubdate) { this.pubdate = pubdate; } } ~~~ 然后再bean中再創建一個ListBean.java,用于存取多個新聞的內容，這里面需要兩個內部類，通過data獲取NewsList,然后通過NewsLis獲取到NewsItem中的值。 ~~~ public class listBean { //變量名最好跟json中一樣 public NewsList data; public static class NewsList{ //變量名最好跟json中一樣 public ArrayList<NewsItem> news; } public static class NewsItem{ public String title; public String url; public String listimage; public String pubdate; }} ~~~ 接下來就需要訪問網絡了，新建一個utils包，再建一個NetUtils.java類 ~~~ public class NetUtils { //定義我們需要的變量 private HttpUtils httpUtils; //全局變量 private Gson gson=new Gson(); private List<News> newsList=new ArrayList<News>(); private News news; //獲取新聞信息 public List<News> getNews(String url){ //訪問網絡是一個耗時操作，建議開啟新線程 GetNewsRunnable getNewsRunnable=new GetNewsRunnable(httpUtils, gson, newsList, news, url); getNewsRunnable.run(); return newsList; } public void addAll(List<News> newsList){ this.newsList.addAll(newsList); } } ~~~ 新建一個GetNewsRunnable.java，請求網絡。 ~~~ public class GetNewsRunnable implements Runnable{ private HttpUtils httpUtils; private Gson gson; private List<News> newsList; private News news; private String url; private NetUtils netUtils; public GetNewsRunnable(HttpUtils httpUtils,Gson gson,List<News> newsList,News news,String url){ this.httpUtils=httpUtils; this.gson=gson; this.newsList=newsList; this.news=news; this.url=url; netUtils=new NetUtils(); } //run方法中訪問網絡并解析json數據 public void run() { if(newsList==null){ newsList=new ArrayList<News>(); } httpUtils=new HttpUtils(); httpUtils.send(HttpMethod.GET, url, new RequestCallBack<String>() { public void onFailure(HttpException arg0, String arg1) { Log.e("failure", "訪問失敗"); } public void onSuccess(ResponseInfo<String> responseInfo) { Log.e("success", "訪問成功"); //訪問成功，就進行數據解析 NewsListBean newsListBean=gson.fromJson(responseInfo.result, NewsListBean.class); //for-each循環 for(NewsListBean.NewsItem newsItem:newsListBean.data.news){ news=new News(); news.setTitle(newsItem.title); news.setListimage(newsItem.listimage); news.setUrl(newsItem.url); news.setPubdate(newsItem.pubdate); newsList.add(news); netUtils.addAll(newsList); } } }); } } ~~~ 好了，我們現在需要添加一個適配器了，4個構造方法getCount()、getItem、getItemId、getView可以自動生成就可以了，在適配器中我們首先把變量寫好 ~~~ //定義變量 private List<News> newsList; private LayoutInflater mInflater; //獲取外部布局用的 private BitmapUtils mBitmapUtils; //加載和顯示圖片用的 ~~~ ~~~ public NewsListAdapter(Context context,List<News> newsList){ this.newsList=newsList; this.mInflater=LayoutInflater.from(context); mBitmapUtils=new BitmapUtils(context); } ~~~ ~~~ //真正存放東西的方法 @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder=null; if(convertView==null){//如果傳進來的view為空，就進行創建，并填充內容 holder=new ViewHolder(); convertView=mInflater.inflate(R.layout.fragment_list_item, null); holder.newIcon=(ImageView) convertView.findViewById(R.id.newIcon); holder.newTime=(TextView) convertView.findViewById(R.id.newTime); holder.newTitle=(TextView) convertView.findViewById(R.id.newTitle); convertView.setTag(holder); }else{ holder=(ViewHolder) convertView.getTag(); } //將數據放到我們的控件當中 News news=newsList.get(position); holder.newTitle.setText(news.getTitle()); holder.newTime.setText(news.getPubdate()); mBitmapUtils.display(holder.newIcon, news.getListimage()); return convertView; } //模擬我們傳遞的控件 class ViewHolder{ ImageView newIcon; TextView newTitle; TextView newTime; } //把所有News加進List中 public void addListItem(List<News> list){ newsList.addAll(list); ~~~ 通過適配器將數據傳送到listview中，之后我們要用到fragment， ~~~ //這里是ListView的滾動和點擊事件 newsList.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) { // TODO Auto-generated method stub //獲取新聞詳細信息的地址 String descriptionUrl=newsDatas.get(position).getUrl(); //定義并實例化Intent Intent intent=new Intent(getActivity().getApplicationContext(),DescriptActivity.class); String name="url"; //將值放到intent當中 intent.putExtra(name, descriptionUrl); //開啟Activity startActivity(intent); } }); ~~~ 然后我們添加一些詳情頁TabIndicatorAdapter 最后描述新聞詳情 ~~~ public class DescriptActivity extends Activity { private WebView newsDescription; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_descript); String url=this.getIntent().getExtras().get("url").toString(); newsDescription=(WebView) findViewById(R.id.newsDescription); /** * 適配屏幕 */ newsDescription.getSettings().setUseWideViewPort(true); newsDescription.getSettings().setLoadWithOverviewMode(true); newsDescription.setVerticalScrollBarEnabled(true); newsDescription.setHorizontalScrollBarEnabled(false); newsDescription.loadUrl(url); } } ~~~ 記得在清單文件中添加網絡權限等，還有一些步驟就不一一細說了，具體的可以下載源碼看一下。 ~~~ <uses-permission android:name="android.permission.INTERNET" /> ~~~ 最終效果圖為： ![](https://box.kancloud.cn/2016-03-14_56e65d6e9a21c.jpg)[點擊打開鏈接](http://download.csdn.net/detail/sdksdk0/9446330) 源碼下載地址：[點擊打開鏈接](http://download.csdn.net/detail/sdksdk0/9446330)http://download.csdn.net/detail/sdksdk0/9446330 ??