Tut Android 023: Load images từ server trong Android

Hiện nay có rất nhiều ứng dụng trên Android thực hiện việc tải hình ảnh trên server, web về thiết bị Android để hiển thị chúng. Và nếu bạn là một người lập trình Android thì việc thực hiện các thao tác load hình ảnh trên server về ứng dụng của mình là rất cần thiết. Dưới đây sẽ là hướng dẫn giúp bạn có thể tải về và hiển thị hình ảnh trên ứng dụng Android của mình.

Ở hướng dẫn này mình sẽ xây dựng 1 ứng dụng bao gồm 2 nút thao tác cơ bản trên ActionBar, một là để load hình ảnh về và hiển thị nó, 2 là set lại toàn bộ các imageview.

LoadImageServer

Bạn có thể xem thêm video kết quả của ví dụ này tại đây

Giao diện

1. Giao diện chính bao gồm 4 ImageView để hiển thị 4 hình ảnh được tải về từ trên web.

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:background="#fafafa" >
<ImageView
 android:id="@+id/ivVNExpress"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:contentDescription="@string/app_name"
 android:paddingTop="10dp"
 android:onClick="onClick"/>
<ImageView
 android:id="@+id/ivTuoiTre"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:contentDescription="@string/app_name"
 android:paddingTop="10dp"
 android:onClick="onClick"/>
<ImageView
 android:id="@+id/ivAloAndroid"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:contentDescription="@string/app_name"
 android:paddingTop="10dp"
 android:onClick="onClick" />
<ImageView
 android:id="@+id/ivBaseTut"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:contentDescription="@string/app_name"
 android:paddingTop="10dp"
 android:onClick="onClick"/>
</LinearLayout>

2. Xây dựng các nút trên menu actionbar, bao gồm 2 nút thao tác chính:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 tools:context="truongbs.fet.hut.loadimagefromserver.MainActivity" >
<item
 android:id="@+id/AddImage"
 android:icon="@drawable/ic_action_new"
 android:title="@string/addImage"
 app:showAsAction="always"/>
 <item
 android:id="@+id/postImage"
 android:icon="@drawable/ic_action_accept"
 android:title="@string/addImage"
 app:showAsAction="always"/>
</menu>

3. strings.xml

<resources
<string name="app_name">LoadImageFromServer</string>
 <string name="addImage">Add Image</string>
 <string name="PostImage">Post Image</string>
 <string name="choosePic">Choose Picture</string>
 <string name="no_network_connection_toast">No Internet</string>
</resources>

Xử lý code

1. ImageLoader.java

Tại lớp này sẽ sử dụng phương thức DisplayImage(Url, ImageView)  để tải hình ảnh về từ server và lưu cache hình ảnh. Bạn cần cung cấp địa chỉ URL của hình ảnh và imageView, nơi mà bạn muốn hiển thị hình ảnh.

package truongbs.fet.hut.Util;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Collections;
import java.util.Map;
import java.util.WeakHashMap;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import truongbs.fet.hut.loadimagefromserver.R;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ImageView;
public class ImageLoader {

 MemoryCache memoryCache=new MemoryCache();
 FileCache fileCache;
 private Map<ImageView, String> imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>());
 ExecutorService executorService;

 public ImageLoader(Context context){
 fileCache=new FileCache(context);
 executorService=Executors.newFixedThreadPool(5);
 }

 final int stub_id = R.drawable.no_image;
 public void DisplayImage(String url, ImageView imageView)
 {
 imageViews.put(imageView, url);
 Bitmap bitmap=memoryCache.get(url);
 if(bitmap!=null)
 imageView.setImageBitmap(bitmap);
 else
 {
 queuePhoto(url, imageView);
 imageView.setImageResource(stub_id);
 }
 }

 private void queuePhoto(String url, ImageView imageView)
 {
 PhotoToLoad p=new PhotoToLoad(url, imageView);
 executorService.submit(new PhotosLoader(p));
 }

 private Bitmap getBitmap(String url)
 {
 File f=fileCache.getFile(url);

 //from SD cache
 Bitmap b = decodeFile(f);
 if(b!=null)
 return b;

 //from web
 try {
 Bitmap bitmap=null;
 URL imageUrl = new URL(url);
 HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection();
 conn.setConnectTimeout(30000);
 conn.setReadTimeout(30000);
 conn.setInstanceFollowRedirects(true);
 InputStream is=conn.getInputStream();
 OutputStream os = new FileOutputStream(f);
 Utils.CopyStream(is, os);
 os.close();
 bitmap = decodeFile(f);
 return bitmap;
 } catch (Exception ex){
 ex.printStackTrace();
 return null;
 }
 }
//decodes image and scales it to reduce memory consumption
 private Bitmap decodeFile(File f){
 try {
 //decode image size
 BitmapFactory.Options o = new BitmapFactory.Options();
 o.inJustDecodeBounds = true;
 BitmapFactory.decodeStream(new FileInputStream(f),null,o);

 //Find the correct scale value. It should be the power of 2.
 final int REQUIRED_SIZE=700;
 int width_tmp=o.outWidth, height_tmp=o.outHeight;
 int scale=1;
 while(true){
 if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
 break;
 width_tmp/=2;
 height_tmp/=2;
 scale*=2;
 }

 //decode with inSampleSize
 BitmapFactory.Options o2 = new BitmapFactory.Options();
 o2.inSampleSize=scale;
 return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
 } catch (FileNotFoundException e) {}
 return null;
 }

 //Task for the queue
 private class PhotoToLoad
 {
 public String url;
 public ImageView imageView;
 public PhotoToLoad(String u, ImageView i){
 url=u;
 imageView=i;
 }
 }

 class PhotosLoader implements Runnable {
 PhotoToLoad photoToLoad;
 PhotosLoader(PhotoToLoad photoToLoad){
 this.photoToLoad=photoToLoad;
 }

 @Override
 public void run() {
 if(imageViewReused(photoToLoad))
 return;
 Bitmap bmp=getBitmap(photoToLoad.url);
 memoryCache.put(photoToLoad.url, bmp);
 if(imageViewReused(photoToLoad))
 return;
 BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad);
 Activity a=(Activity)photoToLoad.imageView.getContext();
 a.runOnUiThread(bd);
 }
 }

 boolean imageViewReused(PhotoToLoad photoToLoad){
 String tag=imageViews.get(photoToLoad.imageView);
 if(tag==null || !tag.equals(photoToLoad.url))
 return true;
 return false;
 }

 //Used to display bitmap in the UI thread
 class BitmapDisplayer implements Runnable
 {
 Bitmap bitmap;
 PhotoToLoad photoToLoad;
 public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;}
 public void run()
 {
 if(imageViewReused(photoToLoad))
 return;
 if(bitmap!=null)
 photoToLoad.imageView.setImageBitmap(bitmap);
 else
 photoToLoad.imageView.setImageResource(stub_id);
 }
 }
public void clearCache() {
 memoryCache.clear();
 fileCache.clear();
 }
}

2. MemoryCache.java

package truongbs.fet.hut.Util;
import java.lang.ref.SoftReference;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import android.graphics.Bitmap;
public class MemoryCache {
 private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());

 public Bitmap get(String id){
 if(!cache.containsKey(id))
 return null;
 SoftReference<Bitmap> ref=cache.get(id);
 return ref.get();
 }

 public void put(String id, Bitmap bitmap){
 cache.put(id, new SoftReference<Bitmap>(bitmap));
 }
public void clear() {
 cache.clear();
 }
}

3. FileCache.java

package truongbs.fet.hut.Util;
import java.io.File;
import android.content.Context;
public class FileCache {

 private File cacheDir;

 public FileCache(Context context){
 //Find the dir to save cached images
 if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
 cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),"LazyList");
 else
 cacheDir=context.getCacheDir();
 if(!cacheDir.exists())
 cacheDir.mkdirs();
 }

 public File getFile(String url){
 //I identify images by hashcode. Not a perfect solution, good for the demo.
 String filename=String.valueOf(url.hashCode());
 //Another possible solution (thanks to grantland)
 //String filename = URLEncoder.encode(url);
 File f = new File(cacheDir, filename);
 return f;

 }

 public void clear(){
 File[] files=cacheDir.listFiles();
 if(files==null)
 return;
 for(File f:files)
 f.delete();
 }
}

4. Utils.java

package truongbs.fet.hut.Util;
import java.io.InputStream;
import java.io.OutputStream;
public class Utils {
 public static void CopyStream(InputStream is, OutputStream os)
 {
 final int buffer_size=1024;
 try
 {
 byte[] bytes=new byte[buffer_size];
 for(;;)
 {
 int count=is.read(bytes, 0, buffer_size);
 if(count==-1)
 break;
 os.write(bytes, 0, count);
 }
 }
 catch(Exception ex){}
 }
}

5. AndroidManifest.xml

Bận cần yêu cầu quyền truy cập INTERNET và WRITE_EXTERNAL_STORAGE trong file AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

6. MainActivity

Đây là nơi xử lý chính các công việc của ví dụ này.

package truongbs.fet.hut.loadimagefromserver;

import truongbs.fet.hut.Util.ImageLoader;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

// URL Image
public static final String urlVNExpress = "http://st.f1.vnecdn.net/responsive/i/v2/graphics/img_logo_vne_web.gif";
public static final String urlTuoiTre = "http://tuoitre.vn/App_Themes/TuoiTre/images/logo.jpg";
public static final String urlAloAndroid = "http://www.aloandroid.com/wp-content/uploads/2014/04/logo-aloandroid.png";
public static final String urlBaseTut = "http://blankapham.com/wp-content/uploads/2014/02/logo2.png";
private ImageView ivVNExpress, ivTuoiTre, ivAloAndroid, ivBaseTut;
private ImageLoader mLoader;

// private ProgressDialog dialog = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// init view
ivVNExpress = (ImageView) findViewById(R.id.ivVNExpress);
ivTuoiTre = (ImageView) findViewById(R.id.ivTuoiTre);
ivAloAndroid = (ImageView) findViewById(R.id.ivAloAndroid);
ivBaseTut = (ImageView) findViewById(R.id.ivBaseTut);
mLoader = new ImageLoader(this);
// init ActionBar
InitActionBar();
}

// init ActionBar

private void InitActionBar() {
android.app.ActionBar myActionBar = getActionBar();
// myActionBar.setBackgroundDrawable(new ColorDrawable(Color.BLUE));
// enable ActionBar app icon to behave as action to toggle nav drawer
Drawable myDrawable = this.getResources()
.getDrawable(R.drawable.header);
myActionBar.setBackgroundDrawable(myDrawable);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

// Bat su kien click tren Actionbar
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id) {
case R.id.postImage:
Log.d("deub", "clear image");
ivVNExpress.setImageResource(R.drawable.bg_null);
ivAloAndroid.setImageResource(R.drawable.bg_null);
ivBaseTut.setImageResource(R.drawable.bg_null);
ivTuoiTre.setImageResource(R.drawable.bg_null);
break;

case R.id.AddImage:
Log.d("deub", "load Image");
if (isNetworkAvailable(MainActivity.this)) {
loadImageFromServer();
} else {
Toast.makeText(
MainActivity.this,
"please check internet connecttion befor loading image",
Toast.LENGTH_LONG).show();
}
break;

default:
break;
}
return super.onOptionsItemSelected(item);
}

// Load hinh anh va hien thi chung tren cac imageview
private void loadImageFromServer() {
mLoader.DisplayImage(urlVNExpress, ivVNExpress);
mLoader.DisplayImage(urlAloAndroid, ivAloAndroid);
mLoader.DisplayImage(urlBaseTut, ivBaseTut);
mLoader.DisplayImage(urlTuoiTre, ivTuoiTre);
}

// Kiem tra ket noi Internet
public boolean isNetworkAvailable(Context context) {
ConnectivityManager connectivity = (ConnectivityManager) context
.getSystemService(CONNECTIVITY_SERVICE);
if (connectivity == null) {
} else {
NetworkInfo[] info = connectivity.getAllNetworkInfo();
if (info != null) {
for (int i = 0; i < info.length; i++) {
if (info[i].getState() == NetworkInfo.State.CONNECTED) {
return true;
}
}
}
}
return false;
}

// Bat su kien click vao cac hinh anh
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.ivVNExpress:
Toast.makeText(MainActivity.this, "Click chon VN Express",
Toast.LENGTH_SHORT).show();
break;
case R.id.ivTuoiTre:
Toast.makeText(MainActivity.this, "Click chon Tuoi Tre",
Toast.LENGTH_SHORT).show();
break;
case R.id.ivAloAndroid:
Toast.makeText(MainActivity.this, "Click chon AloAndroid.Com",
Toast.LENGTH_SHORT).show();
break;
case R.id.ivBaseTut:
Toast.makeText(MainActivity.this, "Click chon BaseTut.COM",
Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}

Bạn có thể tải vể source code của ví dụ này về tại đây: LoadImageFromServer.

Comments
  1. 4 years ago
  2. 4 years ago
    • 4 years ago
  3. 3 years ago

Leave a Reply

Your email address will not be published. Required fields are marked *