AsyncHttpClient和SmartImageView的使用及案例（新聞客戶端）

阿新 • • 發佈：2019-02-08

本篇博文呢，我們來介紹一下AsyncHttpClient和SmartImageView這兩個開源專案的使用以及通過一個案例來展示它們的功能

1.AsyncHttpClient的使用

AsyncHttpClient是對HttpClient的再次包裝。

特點
傳送非同步HTTP請求
HTTP請求發生在UI執行緒之外
內部採用了執行緒池來處理併發送請求

用法：
a. 下載AsyncHttpClient原始碼
要使用AsyncHttpClient首先要下載它的原始碼。

b.將AsyncHttpClient引入自己的工程中
下載AsyncHttpClient的原始碼之後，解壓複製src資料夾下的原始碼，然後將其貼上到自己的工程目錄src下即可，也可以下載jar包，將jar檔案貼上在工程目錄的libs資料夾下，然後右擊並依此選擇Build Path—-Add to Build Path即可。

c.常用類及作用

常用類名稱	功能描述
AsyncHttpClient	用來訪問網路的類
RequestParams	用於參加引數的類
AsyncHttpResponseHandler	訪問網路後回撥的介面

如果要使用AsyncHttpClient，首先建立AsyncHttpClient的例項，然後設定引數，接著通過AsyncHttpClient的例項物件訪問網路。如果訪問成功則會回撥AsyncHttpResponseHandler介面中的OnSucess方法，失敗則會回撥OnFailure方法

2.SmartImageView的使用

開源專案SmartImageView的出現主要是為了加速從網路上載入圖片，它繼承自ImageView類，支援根據URL地址載入圖片，支援非同步載入圖片，支援圖片快取等。

在使用SmartImageView之前，同樣需要下載SmartImageView的原始碼,然後將SmartImageView的原始碼引入到自己的工程專案中。

新增SmartImageView控制元件樣例程式碼如下：

<com.loopj.android.image.SmartImageView
    android:layout_weight="1000"
    android:id="@+id/siv"
    android:layout_width="fill_parent" 

    android:layout_height="fill_parent"
/>

使用SmartImageView控制元件樣例程式碼如下：

public class MainActivity extends Activity {
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SmartImageView siv=(SmartImageView)findViewById(R.id.siv);
        siv.setImageUrl("指定地址圖片",R.drawable.ic_launcher,R.drawable.ic_launcher);
        }
}

上述程式碼演示瞭如何使用SmartImageView來載入一張網路圖片。從程式碼中可以看出，SmartImageView可以當做一個自定義控制元件來使用。在載入指定圖片的時候，只需要呼叫setImageURL()方法指定圖片的路徑、載入中現實的圖片以及載入失敗顯示的圖片即可。

下面我們通過一個簡易的案例–新聞客戶端來看一下這兩個開源專案的應用。該案例實現了獲取伺服器的XML檔案並將其解析出來捆綁顯示到ListView上的功能，具體步驟如下：

1.建立程式
首先建立一個程式，設計使用者互動介面，對應的佈局檔案（activity_main.xml）如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.anew.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:id="@+id/loading"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="invisible" >

            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="正在載入資訊..." />
        </LinearLayout>

        <ListView
            android:id="@+id/lv_news"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

</LinearLayout>

這裡寫圖片描述

這個頁面主要包含了提示使用者資料正在載入中的ProgressBar，TextView以及用於展示新聞資訊的ListView。

2.建立ListView Item的佈局
由於用到了ListView控制元件，因此需要為ListView的item建立一個佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="65dip">

    <com.loopj.android.image.SmartImageView
        android:id="@+id/siv_icon"
        android:layout_width="80dip"
        android:layout_height="60dip"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="5dip"
        android:layout_marginLeft="5dip"
        android:layout_marginTop="5dip"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" >
    </com.loopj.android.image.SmartImageView>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginTop="10dip"
        android:layout_toRightOf="@id/siv_icon"
        android:text="我是標題"
        android:maxLength="20"
        android:singleLine="true"
        android:ellipsize="end"
        android:textColor="#000000"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/tv_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_marginLeft="5dip"
        android:layout_marginTop="5dip"
        android:layout_toRightOf="@id/siv_icon"
        android:text="我是描述"
        android:maxLength="16"
        android:singleLine="true"
        android:ellipsize="end"
        android:textColor="#99000000"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/tv_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dip"
        android:text="評論"
        android:textColor="#99000000"
        android:textSize="12sp" />

</LinearLayout>

上述佈局檔案使用到了自定義控制元件SmartImageView和三個分別用於展示新聞標題，新聞內容以及新聞評論數的TextView。

3.編寫介面互動程式碼
當UI介面建立好後，需要在MainActivity裡面編寫與介面互動的程式碼。用於實現獲取伺服器的NewsInfo.xml檔案解析並將解析的資訊設定到ListView顯示在介面上。

package com.example.anew;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.anew.bean.NewsInfo;
import com.example.anew.utils.NewsInfoService;
import com.loopj.android.http.AsyncHttpClient;
import com.loopj.android.http.AsyncHttpResponseHandler;
import com.loopj.android.http.RequestParams;
import com.loopj.android.image.SmartImageView;

import org.apache.http.Header;

import java.io.ByteArrayInputStream;
import java.util.List;
import java.util.Objects;


public class MainActivity extends AppCompatActivity {
    private ListView lv_news;
    private LinearLayout loading;
    private List<NewsInfo> newsInfos;

    private class NewsAdapter extends BaseAdapter{
        public int getCount(){
            return newsInfos.size();
        }
    }
    public View getView(int position, View converView, ViewGroup parent){
        View view=View.inflate(MainActivity.this,R.layout.news_item,null);
        SmartImageView siv=(SmartImageView)view.findViewById(R.id.siv_icon);
        TextView tv_title=(TextView)view.findViewById(R.id.tv_title);
        TextView tv_description=(TextView)view.findViewById(R.id.tv_description);
        TextView tv_type=(TextView)view.findViewById(R.id.tv_type);
        NewsInfo newsInfo=newsInfos.get(position);
        siv.setImageUrl(newsInfo.getIconPath(),R.drawable.a,R.drawable.ic_launcher);

        tv_title.setText(newsInfo.getTitle());
        tv_description.setText(newsInfo.getDescription());
        int type=newsInfo.getType();

        switch (type){
            case 1:
                tv_type.setText("評論:"+newsInfo.getComment());
                break;
            case 2:
                tv_type.setTextColor(Color.RED);
                tv_type.setText("專題");
                break;
            case 3:
                tv_type.setTextColor(Color.BLUE);
                tv_type.setText("LIVE");
                break;
        }
        return view;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv_news=(ListView)findViewById(R.id.lv_news);
        loading=(LinearLayout)findViewById(R.id.loading);
        fillData2();
    }
    private void fillData2(){
        AsyncHttpClient asyncHttpClient=new AsyncHttpClient();
        asyncHttpClient.get(getString(R.string.serverurl), new AsyncHttpResponseHandler() {
            @Override
            public void onSuccess(String content) {
                super.onSuccess(content);
                byte[] bytes=content.getBytes();
                ByteArrayInputStream bais=new ByteArrayInputStream(bytes);
                newsInfos= NewsInfoService.getNewsInfos(bais);
                if(newsInfos==null){
                    Toast.makeText(MainActivity.this,"解析失敗",Toast.LENGTH_SHORT).show();
                }else {
                    loading.setVisibility(View.INVISIBLE);
                    lv_news.setAdapter(new NewsAdapter());
                }
            }

            @Override
            public void onFailure(Throwable error,String content) {
                super.onFailure(error,content);
                Toast.makeText(MainActivity.this,"請求失敗",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

上述程式碼用到了ListView的介面卡類，使用了SmartImageView載入指定路徑的圖片，實現了用AsyncHttpClient獲取伺服器上的XML檔案。並呼叫工具類NewsInfoService的getNewsInfos方法解析XML檔案得到NewsInfo物件的List集合。需要注意的是config.xml檔案並不是工程自帶的配置檔案而是自己建立的，程式碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="serverurl">http://10.51.27.175:8080/newsInfo.xml</string>
</resources>

4.建立NewsInfo類

package com.example.anew.bean;

public class NewsInfo {
    private String iconPath;
    private String title;
    private String description;
    private int type;
    private long comment;

    public NewsInfo() {
    }

    public String getIconPath() {
        return this.iconPath;
    }

    public void setIconPath(String iconPath) {
        this.iconPath = iconPath;
    }

    public String getTitle() {
        return this.title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return this.description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public int getType() {
        return this.type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public long getComment() {
        return this.comment;
    }

    public void setComment(long comment) {
        this.comment = comment;
    }
}

上述程式碼中，為NewsInfo定義了iconPath圖片路徑、title新聞標題、description新聞描述、type新聞型別和comment新聞評論數五種屬性。

5.建立工具類解析xml檔案

由於從伺服器上獲取的是一個XML檔案，因此需要使用XmlPulParser物件解析出xml裡面的內容並設定到相應的JavaBean中。將解析操作的邏輯放在工具類NewsInfoService中。

package com.example.anew.utils;
import android.util.Xml;
import com.example.anew.bean.NewsInfo;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import org.xmlpull.v1.XmlPullParser;

public class NewsInfoService {
    public NewsInfoService() {
    }

    public static List<NewsInfo> getNewsInfos(InputStream is) {
        XmlPullParser parser = Xml.newPullParser();

        try {
            parser.setInput(is, "utf-8");
            int e = parser.getEventType();
            ArrayList newsInfos = null;

            for(NewsInfo newsInfo = null; e != 1; e = parser.next()) {
                switch(e) {
                    case 2:
                        if("news".equals(parser.getName())) {
                            newsInfos = new ArrayList();
                        } else if("newsInfo".equals(parser.getName())) {
                            newsInfo = new NewsInfo();
                        } else {
                            String comment;
                            if("icon".equals(parser.getName())) {
                                comment = parser.nextText();
                                newsInfo.setIconPath(comment);
                            } else if("title".equals(parser.getName())) {
                                comment = parser.nextText();
                                newsInfo.setTitle(comment);
                            } else if("content".equals(parser.getName())) {
                                comment = parser.nextText();
                                newsInfo.setDescription(comment);
                            } else if("type".equals(parser.getName())) {
                                comment = parser.nextText();
                                newsInfo.setType(Integer.parseInt(comment));
                            } else if("comment".equals(parser.getName())) {
                                comment = parser.nextText();
                                newsInfo.setComment(Long.parseLong(comment));
                            }
                        }
                        break;
                    case 3:
                        if("newsInfo".equals(parser.getName())) {
                            newsInfos.add(newsInfo);
                            newsInfo = null;
                        }
                }
            }

            return newsInfos;
        } catch (Exception var6) {
            var6.printStackTrace();
            return null;
        }
    }
}

上述程式碼在getNewsInfos()方法中建立一個List集合newsInfo，解析出來的新聞資料都存放在這個集合中。

6.配置伺服器

由於需要從伺服器上下載一個XML，因此需要開啟tomcat伺服器，在tomcat的安裝目錄下開啟webapps資料夾，將NewsInfo.xml檔案放置在ROOT檔案下。

<?xml version="1.0" encoding="utf-8"?>
<news>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/a.PNG</icon>
        <title>科技溫暖世界</title>
        <content>進入一個更有愛的領域</content>
        <type>1</type>
        <comment>69</comment>
    </newsInfo>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/b.PNG</icon>
        <title>《神武》</title>
        <content>新美術資源盤點 視覺新體驗</content>
        <type>2</type>
        <comment>35</comment>
    </newsInfo>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/c.PNG</icon>
        <title>南北車正式公佈合併</title>
        <content>南北車將於近日正式公佈合併</content>
        <type>3</type>
        <comment>2</comment>
    </newsInfo>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/d.PNG</icon>
        <title>北京擬推醫生電子註冊</title>
        <content>突破多點執業“限制”</content>
        <type>1</type>
        <comment>25</comment>
    </newsInfo>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/e.PNG</icon>
        <title>風力發電進校園</title>
        <content>風力發電普進校園</content>
        <type>2</type>
        <comment>26</comment>
    </newsInfo>
    <newsInfo>
        <icon>http://10.51.27.175:8080/images/a.PNG</icon>
        <title>地球一小時</title>
        <content>地球熄燈一小時</content>
        <type>1</type>
        <comment>23</comment>
    </newsInfo>
</news>

上述程式碼標籤為icon的值代表圖片的地址，因此需要在ROOT目錄下建立一個images資料夾用來防止用到的圖片。

AsyncHttpClient和SmartImageView的使用及案例（新聞客戶端）

使用libevent和多執行緒構建高效能伺服器（客戶端）

python實現ftp（客戶端）

zabbix部署（客戶端）

20 字元裝置驅動相關的函式和引數及實現（虛擬檔案）

C#伺服器端與客戶端通訊（客戶端）

GitHub上傳項目，使用desktop（客戶端）教程

Windows C語言 Socket程式設計 client端（客戶端）--斷線重連版

C#：簡單的Socket非同步通訊功能（客戶端）

SVM的一些學習心得及案例（Python程式碼）實現

SpringCloud學習 - Ribbon負載均衡（客戶端）

Spring Cloud Config 之svn配置倉庫與動態重新整理（客戶端）

GCM(谷歌雲推送)客戶端伺服器端開發全指南（客戶端）

Android（客戶端）通過socket與QT（服務端）通訊

動作手遊實時PVP幀同步方案（客戶端）

App （客戶端）登入介面設計Token探究（一）

AsyncHttpClient和SmartImageView的使用及案例（新聞客戶端）

實驗：android案例——新聞客戶端（使用開源專案AsyncHttpClient和SmartImageView）

Redis的安裝與啟動（doc和本地客戶端）

windows安裝zabbix客戶端及配置（遠端關機）

mysql 8.0的完美安裝及連線Navicat客戶端（全網獨此一篇！！！）---整合篇

AsyncHttpClient和SmartImageView的使用及案例（新聞客戶端）

相關推薦