ImageView

Project : ImageViewDemo

สําหรับโปรเจ็กนี้ จะแนะนําให้รู้จักกับ ImageView โดยที่เราจะอ่านไฟร์ภาพจาก Resource ซึ่งเราจะ

เก็บไฟร์รูปภาพไว้ใน res/drawable เพื่อที่จะอ้างถึงด้วย id ได้

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center" >

<ImageView
android:id = "@+id/image"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
</ImageView>

<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Department of" >
</TextView>

<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Computing"
android:textSize = "12pt" >
</TextView>

<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Silpakorn University"
android:textSize = "9pt" >
</TextView>

</LinearLayout>
 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center" >

Code XML ในการจัด Layout ของ LinearLayout

orientation : อะไรก็ตามที่ใส่เข้าไปใน linear จะเรียงต่อกันตามแนวดิ่ง
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
gravity : กําหนดให้อะไรก็ตามที่ใส่เข้าไปในนี้ จะอยู่ตรงกลางของ LinearLayout

<ImageView
android:id = "@+id/image"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
</ImageView>

Code XML ในการจัด Layout ของ ImageView

id : มีชื่อตัวแปรว่า image
width : กว้าง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ไฟร์รูปภาพที่เราจะอ่านเข้ามา
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ไฟร์รูปภาพที่เราจะอ่านเข้ามา

<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Department of" >
</TextView>

Code XML ในการจัด Layout ของ TextView

width : กว้าง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Department of
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Department of
text : เป็นการกําหนดข้อความให้กับ TextView ในที่นี้คือ Department of
 <TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Computing"
android:textSize = "12pt" >
</TextView>

Code XML ในการจัด Layout ของ TextView

width : กว้าง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Computing
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Computing
text : เป็นการกําหนดข้อความให้กับ TextView ในที่นี้คือ Computing
textSize : เป็นการกําหนดขนาดตัวอักษรในที่นี้คือ 12 pt

<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Silpakorn University"
android:textSize = "9pt" >
</TextView>

Code XML ในการจัด Layout ของ TextView

width : กว้าง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Silpakorn University
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ Silpakorn University
text : เป็นการกําหนดข้อความให้กับ TextView ในที่นี้คือ Silpakorn University
textSize : เป็นการกําหนดขนาดตัวอักษรในที่นี้คือ 9 pt
 เรามาเตรียมรูปภาพกันดีกว่า
1. คลิกขวาที่ res เลือก New > Folder

2. ตั้งชื่อ Folder ว่า drawable จากนั้น คลิก Finish

 4. ลากไฟร์ ภาพ ลงใน Folder drawable

5. เลือก Copy file เพื่อ คัดลอก ไฟร์ มาลงใน Folder Project จากนั้น คลิก OK
ไฟร์ภาพที่ใช้ใน Project Android นั้น จะต้องตั้งชื่อไฟร์ด้วยตัวอักษรตัวเล็กเท่านั้น
import android.app.Activity;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.ImageView;

public class ImageViewDemo extends Activity {

ImageView imageView;
Resources image;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

image = new Resources(getAssets(), null, null);

imageView = (ImageView)findViewById(R.id.image);
imageView.setImageDrawable(image.getDrawable(R.drawable.cpsulogo));

}
}

ImageView imageView;

Code Java ในการประกาศตัวแปร ImageView

Resources image;

Code Java ในการประกาศตัวแปร Resource สําหรับการ ค้นหา และ อ่านไฟร์ รูปภาพ

image = new Resources(getAssets(), null, null);

Code Java ในสร้าง object ของ Resource โดยที่มีชื่อว่า image

imageView = (ImageView)findViewById(R.id.image);

Code Java ในการการเชื่อม ตัวแปร ImageView กับ Layout ( XML )

 จากนั้นเราก็มากําหนดรูปภาพที่จะให้แสดงใน ImageView ด้วยฟังก์ชัน setImageDrawable
โดยที่เราจะกําหนดค่าของ drawable ได้จาก Resource.getDrawable จะได้ว่า

imageView.setImageDrawable(image.getDrawable(R.drawable.cpsulogo));

drbomkung@gmail.com