Android Image Resource from URL Website |
Android Image Resource from URL Website ตัวอย่างและบทความการเขียน Android เพื่อดึง Resource ของ Image ที่จะแสดงผลบน Widgets ของ ImageViewจากแหล่งต่าง ๆ เช่น URL เว็บไซต์ หรือ URL จาก IP Address ที่อยู่ในระบบ Internet www ผ่าน Protocal HTTP
จากรูปภาพประกอบจะเห็นว่า Android มีหน้าที่ในการส่ง URL เพื่อจะ Request ไปยัง Resource ของ Image ปลายทาง จากนั้น Web Server ปลายทางก็จะส่งค่า Resource ของ Image กลับมาและแสดงผลบน ImageView
AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
ในการติดต่อกับ Internet จะต้องเพิ่มคำสั่งนี้ลงในไฟล์ AndroidManifest.xml ด้วยทุกครั้ง
Example 1 การดึง Resouce แบบง่าย ๆ ด้วย Drawable และ InputStream
โครงสร้างของไฟล์ประกอบด้วย 2 ไฟล์คือ MainActivity.java, activity_main.xml
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" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Input Image URL" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:ems="20"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:text="Load Image" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="250dp"
android:layout_height="200dp"
android:layout_below="@+id/button1"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:src="@android:drawable/ic_menu_report_image" />
</RelativeLayout>
MainActivity.java
package com.myapp;
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.StrictMode;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
public class MainActivity extends Activity {
@SuppressLint("NewApi")
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Permission StrictMode
if (android.os.Build.VERSION.SDK_INT > 9) {
StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
}
final EditText txt1 = (EditText) findViewById(R.id.editText1);
final ImageView img1 = (ImageView) findViewById(R.id.imageView1);
final Button btn1 = (Button) findViewById(R.id.button1);
// Perform action on click
btn1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String url = txt1.getText().toString();
try {
img1.setImageDrawable(getResource(url));
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
});
}
public Drawable getResource(String url) throws MalformedURLException, IOException
{
return Drawable.createFromStream((InputStream)new URL(url).getContent(), "src");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Screenshot
แสดงรูปภาพจาก URL ปลายทาง
Example 2 การอ่าน Resource จากปลายแทางแล้วแปลงเป็น Bitmap สำหรับวิธีนี้จะสามารถทำการปรับแต่งขนาด Resource จากปลายทางได้
โครงสร้างของไฟล์ประกอบด้วย 2 ไฟล์คือ MainActivity.java, activity_main.xml
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" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="Input Image URL" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:ems="20" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:text="Load Image" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@android:drawable/ic_menu_report_image" />
</RelativeLayout>
MainActivity.java
package com.myapp;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.Closeable;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.StrictMode;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
private static final String TAG = "ERROR";
private static final int IO_BUFFER_SIZE = 4 * 1024;
@SuppressLint("NewApi")
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Permission StrictMode
if (android.os.Build.VERSION.SDK_INT > 9) {
StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
}
final EditText txt1 = (EditText) findViewById(R.id.editText1);
final ImageView img1 = (ImageView) findViewById(R.id.imageView1);
final Button btn1 = (Button) findViewById(R.id.button1);
// Perform action on click
btn1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String url = txt1.getText().toString();
try
{
img1.setImageBitmap(loadBitmap(url));
} catch (Exception e) {
// When Error
img1.setImageResource(android.R.drawable.ic_menu_report_image);
Toast.makeText(MainActivity.this,"Load Image Failed.",
Toast.LENGTH_LONG).show();
}
}
});
}
public static Bitmap loadBitmap(String url) {
Bitmap bitmap = null;
InputStream in = null;
BufferedOutputStream out = null;
try {
in = new BufferedInputStream(new URL(url).openStream(), IO_BUFFER_SIZE);
final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
out = new BufferedOutputStream(dataStream, IO_BUFFER_SIZE);
copy(in, out);
out.flush();
final byte[] data = dataStream.toByteArray();
BitmapFactory.Options options = new BitmapFactory.Options();
//options.inSampleSize = 1;
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length,options);
} catch (IOException e) {
Log.e(TAG, "Could not load Bitmap from: " + url);
} finally {
closeStream(in);
closeStream(out);
}
return bitmap;
}
private static void closeStream(Closeable stream) {
if (stream != null) {
try {
stream.close();
} catch (IOException e) {
android.util.Log.e(TAG, "Could not close stream", e);
}
}
}
private static void copy(InputStream in, OutputStream out) throws IOException {
byte[] b = new byte[IO_BUFFER_SIZE];
int read;
while ((read = in.read(b)) != -1) {
out.write(b, 0, read);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Screenshot
แสดงรูปภาพจาก Resource ปลายทาง
สำหรับการใช้งาน ImageView กับการดึงรุปภาพจาก URL มาแสดงผลใน ListView หรือ Widgets อื่น ๆ สามารถหาอ่านได้จากบทความที่เกี่ยวข้อง ซึ่งจะมีอยู่อย่างอยู่หลายตัว
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-07-05 22:43:43 /
2017-03-26 21:39:02 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|