Menampilkan Gambar dengan Gallery dan ImageView

Sejauh ini semua latihan kita adalah menampilkan informasi berupa text. Untuk menampilkan image, kita bisa menggunakan 'ImageView', 'Gallery', 'ImageSwitcher', dan 'GridView'.

Menggunakan 'Gallery' dan 'ImageView'

'Gallery' adalah suatu 'view' yang menampilkan item-item (misalnya gambar) dalam suatu list horizontal yang terkunci di tengah/pusat seperti dalam gambar di bawah ini.
Contoh Gallery
Berikut di bawah adalah contoh latihan menampilkan gambar dengan menggunakan 'Gallery' dan 'ImageView'.

File layout: activity_main.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="fill_parent"
android:orientation="vertical" > 
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Gambar-gambar di San Francisco" /> 
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> 
<ImageView
android:id="@+id/image1"
android:layout_width="320dp"
android:layout_height="250dp"
android:scaleType="fitXY" />
</LinearLayout>

Selanjutnya, klik kanan pada folder "res/values" dan tambahkan file xml dengan "New -> File", dan beri nama file 'attrs.xml'. Kemudian tambahkan kode berikut dalam file 'attrs.xml':
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Gallery1">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>

Kemudian siapkan beberapa image/gambar dan beri nama pic1.png, pic2.png, dan seterusnya. Kemudian copy dan paste (atau drag-and-drop) semua gambar ke folder "res/drawable".
Catatan:
Untuk memastikan bahwa ukuran gambar sesuai dengan layar, kita perlu memastikan bahwa kita punya banyak versi gambar sesuai dengan folder "drawable" untuk masing-masing ukuran layar. Untuk latihan ini akan diabaikan, dan hanya menggunakan salah satu jenis ukuran resolusi layar saja.

File java: MainActivity.java
package com.example.gallery; 
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast; 
public class MainActivity extends AppCompatActivity { 
//--gambar yang akan ditampilkan--
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 
Gallery gallery = (Gallery) findViewById(R.id.gallery1); 
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show();
}
});
public class ImageAdapter extends BaseAdapter
{
Context context;
int itemBackground; 
public ImageAdapter(Context c)
{
context = c;
//--setting style--
TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground,0);
a.recycle();
//--return jumlah gambar--
public int getCount() {
return imageIDs.length;
//--returns item--
public Object getItem(int position) {
return position;
//--return ID item--
public long getItemId(int position) {
return position;
//--return ImageView--
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150,120));
} else {
imageView = (ImageView) convertView;
}
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}
}

Kemudian jalankan di emulator Android Studio. Hasilnya adalah seperti gambar di bawah ini, tampilan 'Gallery' yang menampilkan beberapa gambar. Kita bisa men-swipe gambar-gambar tersebut untuk melihat semua gambar. Bila kita amati ketika kita men-klik gambar, class 'Toast' akan menampilkan namanya.



Untuk menampilkan gambar yang dipilih di dalam 'ImageView', tambahkan kode berikut dalam file MainActivity.java (kode yang ditulis dengan huruf tebal):
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 
Gallery gallery = (Gallery) findViewById(R.id.gallery1); 
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show(); 
//--menampilkan gambar yang dipilih--
ImageView imageView = (ImageView) findViewById(R.id.image1);
imageView.setImageResource(imageIDs[position]);

}
});
}

Hasil tampilannya adalah seperti gambar berikut di bawah ini:


Penjelasan

Kita pertama menambahkan 'Gallery' dan 'ImageView' di file layout "activity_main.xml":
<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> 
<ImageView
android:id="@+id/image1"
android:layout_width="320dp"
android:layout_height="250dp"
android:scaleType="fitXY" />

Seperti yang sudah disebutkan sebelumnya, view 'Gallery' digunakan untuk menampilkan beberapa gambar dalam list horizontal. 'ImageView' digunakan untuk menampilkan gambar yang dipilih oleh user.

List gambar yang ditampilkan disimpan dalam array 'imageIDs':
//--gambar yang akan ditampilkan--
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
};

Kita akan membuat class 'ImageAdapter' (yang menerapkan 'extends' class 'BaseAdapter') sehingga bisa mengikat ke view 'Gallery' dengan 'ImageView'. Class 'BaseAdapter' akan bertindak sebagai jembatan antara 'AdapterView' dan sumber data yang memasukkan ke dalamnya. Beberapa contoh dari 'AdapterView' adalah sebagai berikut:
  • ListView
  • GridView
  • Spinner
  • Gallery
Ada beberapa subclass dari class 'BaseAdapter' di Android:
  • ListAdapter
  • ArrayAdapter
  • CursorAdapter
  • SpinnerAdapter
Untuk class 'ImageAdapter', kita mengimplementasikan method-method berikut ini (dalam huruf tebal):
public class ImageAdapter extends BaseAdapter
{
public ImageAdapter(Context c) {...} 
//--return jumlah gambar--
public int getCount() {...} 
//--returns item--
public Object getItem(int position) {...} 
//--return ID item--
public long getItemId(int position) {...} 
//--return ImageView--
public View getView(int position, View convertView, ViewGroup parent) {...}
}

Secara khusus, method 'getView()' akan mengembalikan/returns suatu 'View' pada posisi tertentu. Dalam hal ini, kita mengembalikan/return object 'ImageView'.

Ketika suatu image/gambar di dalam 'Gallery' dipilih (misalnya di-klik), posisi gambar yang dipilih (0 untuk gambar pertama, 1 untuk gambar kedua, dst) ditampilkan dan gambar ditampilkan di dalam 'ImageView':
Gallery gallery = (Gallery) findViewById(R.id.gallery1); 
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show(); 
//--menampilkan gambar yang dipilih--ImageView imageView = (ImageView) findViewById(R.id.image1);imageView.setImageResource(imageIDs[position]);}
});

No comments: