Menampilkan Gambar di GridView

Di sini kita membuat aplikasi di Sketchware yang akan menampilkan gambar yang diambil menggunakan FilePicker di GridView. Dan saat mengklik item GridView, itu akan menampilkan kotak dialog yang menanyakan apakah kita ingin menghapus gambar. Untuk membuat aplikasi seperti itu, ikuti langkah-langkah yang diberikan di bawah ini. 

1. Buat proyek baru di Sketchware. 

2. Di area LIHAT, tambahkan Tombol button1 dan LinearV linear1 .

3. Tambahkan pemilih komponen FilePicker  dengan tipe gambar mime  / * .

4. Buat variabel jumlah n , sebuah Daftar Peta maplist , dan Daftar String slist . 

5. Dalam acara  di button1 Klik  , gunakan blok 
FilePicker  picker  pick file.

Ini akan membuka galeri ketika tombol1 diklik, dan memungkinkan pengguna untuk memilih gambar. 

6. Di area ACARA tambahkan acara baru  FilePicker onFilesPicked di  bawah   bagian Komponen .

7. Jika  FilePicker onFilesPicked  menggunakan blok seperti yang ditunjukkan pada gambar di bawah, untuk mendapatkan jalur gambar yang dipilih ke daftar peta .

Kemudian gunakan kode untuk menampilkan gambar yang dipilih di gridview1 . 

gridview1.setAdapter(new ImageAdapter(getBaseContext()));
((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();

8. Buat lebih banyak blok  tambahan .

9. Di blok  tambahan , gunakan  sumber add langsung  blok dan masukkan kode untuk mendeklarasikan GridView gridview1 , dan mendefinisikan BaseAdapter disebut ImageAdapter untuk GridView. 

}
GridView gridview1;

public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return maplist.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams((int)(SketchwareUtil.getDip(getApplicationContext(), 150)), (int)SketchwareUtil.getDip(getApplicationContext(), 150)));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setPadding(4, 4, 4, 4);
int strokeWidth = 5;
int strokeColor = Color.BLACK; android.graphics.drawable.GradientDrawable gD = new android.graphics.drawable.GradientDrawable(); gD.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
gD.setStroke(strokeWidth, strokeColor);
imageView.setBackground(gD);
} else {
imageView = (ImageView) convertView;
}
try {
imageView.setImageBitmap(FileUtil.decodeSampleBitmapFromPath(maplist.get((int)position).get("image").toString(), 1024, 1024));
} catch (Exception e){
imageView.setBackgroundColor(Color.GRAY);
}
return imageView;
}

10. Dalam   event onCreate , gunakan  add source secara langsung  memblokir dan meletakkan kode untuk mendefinisikan gridview1 dan menambahkannya ke linear1. 


gridview1 = new GridView(this);
gridview1.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT));
gridview1.setBackgroundColor(Color.WHITE);
gridview1.setNumColumns(2); gridview1.setColumnWidth(GridView.AUTO_FIT); gridview1.setVerticalSpacing(20); gridview1.setHorizontalSpacing(2); gridview1.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

linear1.addView(gridview1);

Setelah ini gunakan sumber tambahan lain  secara langsung  memblokir dan meletakkan kode untuk mengatur OnItemClickListener untuk GridView. 

gridview1.setOnItemClickListener(new AdapterView.OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?>, View p2, final int p3, long p4){
final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this).create();
dialog2.setTitle("Remove this image?");
dialog2.setButton("YES", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface p1, int p2){
maplist.remove(p3);
gridview1.setAdapter(new ImageAdapter(getBaseContext()));
((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();
}
});
dialog2.show();
}

}); 

7. Simpan  dan Jalankan  proyek. Aplikasi GridView sudah siap.