Part 9: Pengenalan Aplikasi GridView dan WebView dalam programs android
Di bagian ini, kita akan melihat widget GridView. Nanti, kita akan memeriksa WebView.
Ada banyak jenis aplikasi ini di Google Play Store, dan Anda akan belajar cara membuatnya sendiri. Inilah aplikasi yang akan Anda buat: (Grafiknya sangat mendasar, untuk aplikasi pelatihan ini.
Tetapi Anda akan dengan mudah dapat menambahkan milik Anda sendiri.)
1. Pengantar proyek Android GridView dan WebView
Dalam mode potret, aplikasi ini memiliki kisi-kisi dengan dua kolom. Dalam mode lanskap, aplikasi akan memiliki empat kolom:
Jika Anda mengetuk atau mengklik item di grid, itu akan mengarah ke WebView yang menampilkan halaman HTML:
Anda akan membutuhkan beberapa file untuk proyek ini. Unduh file ZIP proyek hewan peliharaan yang berisi gambar dan halaman web. Catat ke mana Anda menyimpan file.
Oke, mari kita mulai.
2. Menambahkan Android GridView ke Layout
Buat project baru di Android Studio. Berikan nama aplikasi Hewan peliharaan. Seperti biasa, pastikan Anda memilih Aktivitas Kosong sebagai templat. Saat proyek Anda dimuat, klik tab activity_main.xml di bagian atas dan hapus Hello World TextView default. Di area Palet versi Android Studio yang lebih lama, klik Kontainer, dan cari item GridView:
Di versi yang lebih baru, kontrol GridView telah dipindahkan di bawah item Legacy, untuk beberapa alasan aneh (tidak usang):
Seret GridView ke tata letak kosong Anda.
Di toolbar di bagian atas tampilan Desain, klik ikon Batas Kesimpulan (simbol kuning plus atau tongkat sihir di versi Android Studio yang lebih baru):
Dengan GridView Anda dipilih, ketik ID di area properti di sebelah kanan. Hubungi hewan peliharaan GridView AndaGrid:
GridView Anda kemudian akan terlihat seperti ini: (Versi Android Studio yang lebih baru tidak akan menampilkan Item dan Sub Item. Anda hanya akan memiliki layar whiote.)
Sekarang klik link Lihat semua properti di bagian bawah area properti di Versi Android Studio sebelumnya, atau exapnd item Semua Atribut di versi yang lebih baru.
Kita dapat mengatur tiga properti di sini: jumlah kolom, mode peregangan, dan spasi vertikal. Temukan properti numColumns terlebih dahulu dan ketikkan nilai 2:
Sekarang cari properti stretchMode dan pilih columnWidth dari daftar dropdown:
Terakhir, cari properti verticalSpacing. Masukkan nilai 20dp di sini (ini menetapkan penspasian antara setiap baris di kisi Anda):
Tata letak Anda akan terlihat seperti ini (versi Android Studio yang lebih baru masih akan melihat layar putih kosong):
Sekarang kita memiliki GridView, kita dapat membuat file XML untuk item individual yang membentuk grid.
3. Membuat File XML Item GridView
kami menambahkan GridView ke tata letak yang terlihat seperti ini (atau layar putih di versi Android Studio yang lebih baru):
Item 1, Item 2, dll, pada tangkapan layar di atas semuanya akan digantikan oleh gambar di aplikasi kami. Sub item 1, Sub item 2, dll, akan diganti dengan judul teks, seperti "Kucing", Anjing", dll. Untuk mencapai ini, kita akan membuat Adaptor Kustom, seperti yang kita lakukan untuk proyek ListView yang kita buat di proyek sebelumnya. Di tempat ini, maka:
kita akan memiliki ini:
Adaptor Kustom kami akan membuat banyak item dan sub item ini dan kemudian menempatkannya di GridView. Setiap item berasal dari file XML terpisah. Mari kita buat itu sekarang.
Untuk membuat file XML, klik kanan pada folder layout di sebelah kiri Android Studio:
Dari menu yang muncul, pilih File sumber daya Tata Letak > Baru. Dari kotak dialog yang muncul, ketik grid_item sebagai Nama file:
Pastikan bahwa LinearLayout adalah elemen root, dan klik OK untuk membuat file XML.
Dalam tampilan Desain grid_items, seret ImageView dari bagian Gambar palet ke pohon komponen atau tata letak kosong. Kotak dialog Sumber Daya akan muncul. Pilih drawable apa pun yang Anda suka dari sini, karena itu tidak masalah. Sebagai ID untuk ImageView, ketik petImage.
Di bagian Widget palet, seret TextView tepat di bawah ImageView (lebih mudah untuk melakukan ini di Pohon Komponen). Ubah ID TextView menjadi petHeading. Sekarang, di android studio versi lebih lama, klik link di bagian bawah area Properties yang bertuliskan View all properties. Di versi yang lebih baru, exapnd item All Attributes. Di bagian area Properti atau Atribut ini, cari item gravitasi dan ubah pusatnya. Ini akan memusatkan judul di TextView:
Sekarang ubah layout_height TextView menjadi match_parent:
Di Pohon Komponen, klik kembali ke petImage ImageView Anda. Sekali lagi, ubah layout_height menjadi match_parent:
Pohon Komponen Anda akan terlihat seperti ini:
Dan tata letak Anda akan terlihat seperti ini:
Oke, kita sekarang memiliki tata letak yang dapat kita gunakan dengan Adaptor Kustom. Tata letak grid_item ini akan disalin untuk setiap item hewan peliharaan yang kami miliki di kisi aplikasi kami.
4. Membuat array dalam file XML Android
Saat kita membuat Adaptor Kustom kita, kita akan memberikannya array judul untuk pergi di bawah gambar. Array judul ini dapat diatur dengan kode Java. Tetapi ada cara lain - buat array dalam file XML. Caranya cukup mudah!
Klik kanan folder res > values di area Explorer di sebelah kiri Android Studio:
Dari menu yang muncul, pilih File sumber daya > Nilai Baru. Dalam kotak dialog yang muncul, ketik headings_array untuk Nama file:
Klik OK untuk membuat file XML baru. Anda akan melihat ini:
<?xml version="1.0" encoding="utf-8"?>
<sumber></sumber daya>
Klik di antara dua tag sumber daya. Ketik tanda kurung siku runcing kiri untuk melihat daftar dropdown:
Pilih array string dari daftar. Untuk nama, ketik judul lalu tanda kurung runcing kanan. Ini akan menyelesaikan tag string-array. Tekan tombol enter di antara dua tag untuk memberi diri Anda ruang:
Untuk setiap item dalam array Anda, Anda memerlukan tag item. Jadi ketik braket titik kiri dan kemudian item kata. Ketik braket runcing kanan untuk menyelesaikan tag. Di antara tag item baru Anda, ketikkan kata Cat:
Sekarang tambahkan hewan peliharaan berikut dan istilah terkait hewan peliharaan, satu untuk setiap tag item:
Anjing
Ikan
Kuda
Kelinci Parrot
Pigeon
Duck
File XML Anda kemudian akan terlihat seperti ini:
Oke, Anda sudah selesai dengan file itu, sehingga Anda dapat menutupnya.
Kita bisa menyelesaikan beberapa pemrograman, sekarang.
Buka file MainActivity.java Anda. Tambahkan variabel array String di bagian atas kode Anda, tepat di atas onCreate tetapi di bawah kelas publik ...
Label string[] ;
Dalam metode onCreate, tambahkan baris ini tepat di bawah setContentView:
Resources res = getResources();
Jika Anda mendapatkan teks merah, tekan ALT + ENTER untuk menambahkan pustaka yang benar, atau ketik impor android.content.res.Resources; di bagian atas kode Anda. Apa yang kita lakukan di sini adalah mendapatkan referensi ke objek Resource. Kita membutuhkan ini untuk mendapatkan array string kita.
Selanjutnya, tambahkan baris ini:
labels = res.getStringArray( R.array.headings ) ;
Ada metode objek Resource yang disebut getStringArray. Di antara tanda kurung bulat getStringArray, kami memiliki ini:
R.array.headings
Saat Anda mengetik titik setelah R.array, Anda akan melihat menu popup. Array dari file headings_array.xml Anda harus ada di dalamnya.
Kode Anda sejauh ini akan terlihat seperti ini di versi Android Studio yang lebih lama:
Dan ini di versi yang lebih baru:
Array dari file XML kemudian akan berakhir di array label.
5. Membuat Adaptor Kustom untuk Android GridView
Array ini akan digunakan sebagai sub item di grid kita - judul di bawah gambar, dengan kata lain. Dalam pelajaran ini, kita akan membuat Adaptor Kustom yang menerima array sub item. Adaptor Kustom juga mengatur gambar untuk setiap item dalam kisi. Adaptor kemudian terpasang ke GridView, yang menampilkan segalanya untuk kita.
Sekarang mari kita buat Adaptor Kustom. Ini dilakukan dengan cara yang kurang lebih sama seperti yang kita lakukan sebelumnya, untuk aplikasi ListView - dengan menambahkan kelas baru dan mengganti View.
Untuk membuat class baru, klik kanan folder java anda di jendela Explorer di sebelah kiri Android Studio:
Dari menu yang muncul, pilih New > Java Class. Anda kemudian akan melihat kotak dialog berikut muncul:
Ketik CustomAdapter untuk Nama. Sebagai Superclass, ketik Base. Anda kemudian akan melihat menu popup. Yang ini:
Pilih BaseAdapter dari daftar. Sekarang beri tanda centang di kotak di bagian bawah untuk Perlihatkan Pilih Ganti Dialog. Kotak dialog Kelas Baru Anda akan terlihat seperti ini:
Klik OK untuk melihat kotak lain muncul. Yang ini:
Di Windows, CTRL klik untuk memilih opsi yang sama dengan opsi kami, pada gambar di atas. Di Mac, COMMAND klik untuk memilih multisel. Jadi, Anda ingin memilih BaseAdapter, getCount, getItem, getItemId, dan getView. Klik OK untuk membuat kelas Anda. Kode Anda akan terlihat seperti ini di versi Android Studio yang lebih lama:
Dan ini di versi yang lebih baru:
Di versi Android Studio yang lebih baru, beberapa nama variabel default berbeda. Ubah semua variabel int i ke posisi int. Ubah tampilan Tampilan, ViewGroup viewGroup untuk Melihat convertView, induk ViewGroup. Kode Anda kemudian akan terlihat seperti ini (perubahan disorot):
Perhatikan bahwa kelas CustomAdapter memperluas BaseAdapter, itulah sebabnya kami meminta Anda untuk mengetik BaseAdapter di area superclass dari kotak dialog pertama. Item yang Anda pilih multiseleksi adalah metode yang dibuat untuk Anda.
Sekarang saatnya menambahkan beberapa gambar ke proyek kami.
Buka jendela Explorer (atau Finder, jika Anda menggunakan Mac), dan navigasikan ke tempat Anda mengunduh file proyek. Jika Anda belum mengunduh file untuk proyek ini, dapatkan di sini:
Pilih semua gambar hewan:
Salin dengan CTRL + C (atau Command + C di Mac). Sekarang kembali ke Android Studio dan pilih folder drawable:
Tekan CTRL + V (atau Command + V) untuk menempelkan gambar. Anda akan melihat kotak dialog ini:
Klik OK untuk menyelesaikan proses penyalinan. Folder drawable Anda kemudian akan terlihat seperti ini:
Kita sekarang perlu menunjuk ke gambar-gambar ini dengan array dalam kode CustomAdapter kita.
Tepat setelah memperluas baris BaseAdapter di kelas CustomAdapter Anda, tambahkan yang berikut ini untuk menyiapkan array:
bilangan bulat pribadi[ ] petImages = {
};
(Jangan lupa tanda kurung siku setelah Bilangan Bulat. ) Di antara tanda kurung kurawal array, ketik R.drawable. Kemudian ketik titik. Segera setelah Anda mengetik titik, Anda akan melihat daftar popup dengan semua gambar drawable Anda:
Pilih drawable dari daftar, lalu ketik koma. Inilah yang seharusnya terlihat seperti kode Anda:
Perhatikan bahwa thumbnail gambar muncul di margin.
Tekan tombol enter pada keyboard Anda untuk memberi diri Anda garis baru. Sekarang tambahkan sisa drawable:
R.drawable.dog,R.drawable.fish,R.drawable.horse,R.drawable.rabbit,R.drawable.parrot,R.drawable.pigeon,R.drawable.duck
Drawable terakhir tidak perlu koma setelahnya. Inilah yang akan terlihat seperti jendela pengkodean:
(Kebetulan, jika Anda bertanya-tanya mengapa gambar harus masuk dalam array Integer daripada array String, itu karena Android mengubah gambar menjadi ID ketika Anda meletakkannya di folder drawable. ID adalah Bilangan Bulat.)
Kita membutuhkan dua variabel di bagian atas kode. Yang ini:
String pribadi[ ] imageLabels;
layoutinflater pribadiinflater iniInflater;
(ALT + ENTER untuk teks merah apa pun, atau tambahkan impor android.view.LayoutInflater; ke bagian atas kode Anda.)
Kita akan meneruskan CustomAdapter kita serangkaian judul. Mereka akan masuk ke array baru yang kita sebut imageLabels
LayoutInflater digunakan untuk mengembang file XML yang kita buat untuk item baris.
Sekarang cari konstruktor CustomAdapter dalam kode Anda:
public CustomAdapter( ) {
super();
}
Anda dapat menghapus baris super. Di antara tanda kurung bulat CustomAdapter, lewati objek Konteks dan array String (Konteks hanya memastikan bahwa kita tahu layar aplikasi mana yang sedang kita bicarakan):
public CustomAdapter( Context con, String[ ] labs ) {
}
Anda mungkin perlu menekan ALT + ENTER pada teks merah apa pun, atau menambahkan impor android.content.Context; ke bagian atas kode Anda.
Di antara tanda kurung kurawal konstruktor, atur beberapa nilai untuk variabel di bagian atas kode Anda:
this.thisInflater = LayoutInflater.from(con);
this.imageLabels = lab;
Bagian atas kode Anda akan terlihat seperti ini:
LayoutInflator memiliki metode from yang dapat kita gunakan. Di antara tanda kurung bulat dari Anda membutuhkan konteks, yang kontra bagi kami. Array labs disimpan dalam array imageLabels di bagian atas kode.
Mari kita isi metode getCount, getItem dan getItemId. Hanya ada satu baris untuk masing-masing baris.
Hitungan yang kita inginkan adalah berapa banyak item yang ada di array petImages. Tambahkan baris ini ke getCount:
@Override
public int getCount() {
kembalikan petImages.length;
}
Untuk getItem dan getItemId kita hanya membutuhkan posisi. Perbarui dua metode Anda seperti ini:
@Override
public Object getItem(int position) {
posisi kembali;
}
@Override
publik long getItemId(int position) {
posisi kembali;
}
Tiga metode Anda akan terlihat seperti ini:
Satu-satunya hal yang tersisa untuk dilakukan sekarang, di CustomAdapter, adalah menulis kode untuk metode getView.
Tambahkan Pernyataan IF ini di antara tanda kurung kurawal getView;
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
}
}
Variabel convertView adalah objek View. Kita akan mengatur gambar kita dan judul file XML sebagai convertView. Tapi kita perlu memeriksa apakah itu nol atau tidak. Jika itu nol maka kita dapat melanjutkan dan menetapkan beberapa nilai. Jika Anda tidak memeriksa null maka Anda akan mendapatkan terlalu banyak gambar dan judul yang sedang dibuat, dan aplikasi bisa macet. Kami hanya ingin membuat gambar dan judul View jika convertView adalah null.
Tambahkan ini di antara tanda kurung kurawal pernyataan IF:
convertView = thisInflater.inflate( R.layout.grid_item, induk, false );
File XML kami dengan ImageView dan TextView disebut grid_item. Kita menggelembungkan ini untuk membuat objek View. Ini kemudian masuk ke variabel yang disebut convertView. (Kami melakukan semua ini dalam tutorial sebelumnya di ListViews, jadi kami tidak akan menjelaskan parameter lain di sini.)
Sekarang kita memiliki referensi ke file XML kita, tambahkan dua baris ini:
TextView textHeading = (TextView) convertView.findViewById(R.id.petHeading);
ImageView thumbnailImage = (ImageView) convertView.findViewById(R.id.petImage);
Anda mungkin perlu menekan ALT + ENTER untuk menambahkan impor untuk ImageView dan TextView. Atau tambahkan dua baris ini ke bagian atas kode Anda:
impor android.widget.ImageView;
impor android.widget.TextView;
Namun, semua baris baru adalah mendapatkan referensi ke widget petHeading dan petImage dari file XML grid_item kami. Kami sedang menyiapkan variabel TextView yang disebut textHeading, dan variabel ImageView yang disebut thumbnailImage.
Untuk menyimpan sesuatu dalam dua variabel ini, tambahkan baris berikut:
textHeading.setText( imageLabels[position] );
thumbnailImage.setImageResource( petImages[posisi] );
Dua memahami garis-garis ini, ingat bahwa imageLabels dan petImages keduanya adalah array. Di antara tanda kurung siku array, kita memiliki variabel posisi dari tanda kurung bulat getView. Label atau gambar mana pun yang berada pada posisi tertentu dalam array akan mendapatkan kumpulan sumber daya teks atau gambarnya.
Akhirnya, di luar Pernyataan IF, kita dapat mengembalikan convertView:
Dan inilah seluruh kode untuk CustomAdapter Anda:
Kita sudah selesai dengan kelas CustomAdapter. Mari kita kembali ke MainActivity.java dan mengujinya.
6. Mengatur Adaptor Kustom ke GridView
Sekarang kita memiliki Adaptor Kustom, yang dapat kita lakukan sekarang adalah mendapatkan referensi ke GridView pada tata letak utama kita. Kita kemudian dapat melampirkan adapater ke GridVIew. Seperti biasa, kita bisa menggunakan findViewById untuk mendapatkan GridView.
Dengan file MainActivity.java Terbuka, letakkan baris ini di metode onCreate Anda, tepat di bawah yang mendapatkan array judul:
GridView grid = (GridView) findViewById( R.id.petsGrid );
ALT + ENTER pada teks merah apa pun untuk menambahkan perpustakaan yang benar. Atau ketik import android.widget.GridView; di bagian atas kode Anda.
Sekarang kita dapat membuat objek dari CustomAdapter kita:
CustomAdapter myAdapter = CustomAdapter baru( getApplicationContext(), label );
Ingat, kami mengatur Adaptor Kustom kami untuk menerima dua parameter, konteks, dan array string. Di antara tanda kurung bulat CustomAdapter kita memiliki getApplicationContext dan label.
Kita perlu memasang adaptor kita ke grid. Jadi tambahkan baris ini:
grid.setAdapter( myAdapter );
Kode MainActivity.java Anda akan terlihat seperti ini di versi Android Studio yang lebih lama:
Dan ini di versi yang lebih baru:
Anda dapat mencobanya, sekarang. Jalankan aplikasi Anda dan Anda akan melihat ini (jika Anda tidak dapat melihat judul Anda, baca di bawah):
Sekarang putar perangkat Anda untuk memasukkannya ke mode lanskap. Ini akan terlihat seperti ini:
Anda seharusnya dapat menggulir ke bawah dan melihat sisa item kisi. Tetapi perhatikan bahwa hanya ada dua kolom. Kami ingin memiliki empat kolom dalam tampilan lanskap. Apa yang dapat kita lakukan di sini adalah membuat tata letak baru untuk tampilan lanskap. Kami melakukan ini di bagian sebelumnya, jadi Anda harus terbiasa.
Tidak Ada Judul Teks?
Jika Anda menjalankan aplikasi di perangkat nyata dan tidak dapat melihat judul teks apa pun, kembali ke file grid_items.xml Anda. Di Pohon Komponen, klik pada petHeading TextView Anda untuk memilihnya. Di area properti di sebelah kanan, cari properti textColor:
Klik tombol di sebelah kanan untuk Pilih Sumber Daya. Di bagian Warna di sebelah kiri kotak dialog yang muncul, pilih warna. Kami telah pergi dengan warna / hitam.
Anda juga dapat mengatur properti textAppearance. Klik daftar dropdown untuk mengatur tampilan teks. Kami memilih AppCompat.Body1.
Jalankan aplikasi Anda lagi, dan Anda akan melihat judulnya sekarang.
Apa yang akan kita lakukan selanjutnya adalah merancang tata letak untuk mode lansekap. Ini akan memiliki empat kolom untuk kisi-kisi item, bukan keduanya dalam mode potret.
7. Tata Letak Lanskap untuk GridView
Kembali ke Android Studio.Kami akan membuat folder layout-land di bawah res. Lebih mudah untuk pergi ke File Proyek, untuk ini:
Klik aplikasi di jendela Explorer, lalu perluas src. Di bawah folder src, perluas utama. Sekarang klik pada res:
Sekarang klik kanan res. Dari menu yang muncul, pilih Direktori resource Android new >:
Dari kotak dialog yang muncul, pilih tata letak dari daftar turun bawah Tipe sumber daya. Kemudian ketik layout-land untuk nama Direktori: (Jangan lupa tanda hubung antara layout dan land.)
Klik OK dan Anda akan melihat folder baru di bawah res:
Klik kanan folder layout-land dan pilih File sumber daya New > Layout. Anda akan melihat kotak dialog kecil muncul. Ketik activity_main sebagai Nama file: (Kami menjelaskan tentang memiliki dua file activity_main.xml di bagian sebelumnya.)
Anda akan melihat tata letak baru muncul di tampilan Desain Android Studio. Perhatikan bahwa file activity_main kedua Anda sudah muncul dalam bentuk lanskap, jadi Anda tidak perlu melakukan apa pun untuk memutarnya:
Lihatlah Component Tree dan Anda akan melihat bahwa kami memiliki LinearLayout:
Klik kanan LinearLayout. Dari menu yang muncul, pilih Konversi LinearLayout ke ConstraintLayout: (A ConstraintLayout membuatnya lebih mudah untuk mendapatkan desain yang Anda inginkan.)
Di area Palette di Android Studio versi sebelumnya, klik kategori Containers, lalu cari GridView:
Di versi yang lebih baru, GridView telah pindah ke kategori Legacy:
Seret GridView ke tata letak putih atau Pohon Komponen. Klik tombol di toolbar tata letak lagi untuk Infer Constraints (simbol plus kuning, di android studio versi earleir, dan tongkat di versi yang lebih baru). Ini akan memperbaiki GridView ke tepi layar dengan margin default 8dp. Sebagai ID untuk GridView Anda, ketik petsGrid. Ini adalah nama yang sama dengan GridView asli, yang untuk tampilan potret:
Kita sekarang perlu mengatur jumlah kolom menjadi empat. Di bagian bawah area properti, klik link untuk Melihat semua properti di Android Studio versi lebih lama. Di versi yang lebih baru, perluas item Semua Atribut. Temukan properti numColumns dan tipe 4 untuk ini (kami mengetik 2 terakhir kali):
Properti lain yang dapat Anda atur di sini adalah untuk stretchMode. Atur ke columnWidth:
Jika Anda melihat tata letak Anda, Anda akan melihat ini (versi Android Studio yang lebih baru hanya akan melihat layar putih polos):
Dan hanya itu - kita sudah selesai dengan tata letak lanskap untuk activity_main. Jalankan aplikasi Anda lagi. Putar perangkat untuk melihat empat kolom item kisi:
Dalam pelajaran berikutnya, kita akan mulai di WebView, di mana kita ingin pergi ketika item grid diketuk. Kita perlu membuat folder aset untuk menyimpan halaman HTML.
8. Membuat Folder Aset di Android Studio
kita akan membutuhkan Aktivitas baru. Aktivitas ini akan menyimpan widget WebView. Pertama, bagaimanapun, kita perlu menambahkan halaman HTML dan gambar ke proyek.
Hal-hal seperti halaman HTML dan sumber daya yang Anda gunakan untuk halaman tersebut harus masuk ke folder Aset. Mereka bukan file yang dapat digambar atau file tata letak yang Anda tempatkan di bawah folder res. Di area Explorer di sebelah kiri Android Studio, beralih kembali ke tampilan Android:
Sekarang pilih folder aplikasi Anda:
Klik kanan folder aplikasi. Dari menu yang muncul, pilih Folder > Baru > Folder Aset:
Anda akan melihat kotak dialog Konfigurasi Komponen muncul. Cukup klik Selesai pada kotak dialog ini. Anda kemudian akan melihat folder aset di area Explorer Anda:
Sekarang navigasikan ke tempat di komputer Anda, Anda menyimpan file yang Anda unduh untuk proyek ini. Jika Anda belum mengunduh file, klik di sini:
Sorot semua file kecuali gambar cat_big.png (kita akan membuat folder gambar untuk ini):
Tekan CTRL + C atau (Command + C di Mac) untuk menyalin file. Sekarang kembali ke Android Studio. Klik pada folder aset Anda untuk memilihnya. Tekan CTL + V atau Command + V untuk menempelkan file. Anda akan melihat kotak Salin muncul:
Klik OK pada ini dan folder aset Anda akan terlihat seperti ini:
Perhatikan bahwa di area pengkodean utama, salah satu halaman HTML mungkin telah terbuka. Kami telah menyimpan kode yang cukup sederhana untuk halaman web:
Jika Anda tahu HTML apa pun, jangan ragu untuk mengubahnya. Satu hal yang perlu diperhatikan adalah tag Stylesheet di bagian atas:
<LINK REL = Stylesheet TYPE ="text/css" HREF ="mystyle.css">
HREF adalah "mystyle.css". Ini adalah file CSS yang kami buat. Itu ada di folder yang sama dengan halaman web, jadi Anda cukup mengetikkan nama file dan ekstensi untuk mereferensikan file CSS ini. Kode untuk file CSS juga cukup sederhana. Itu hanya mengubah beberapa nilai untuk judul H1:
H1 {
Warna:#996724;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
}
Jangan ragu untuk mengubah CSS, atau menambahkan lebih banyak lagi ke dalamnya.
Tapi klik dua kali halaman cat.html dan Anda akan melihat ini:
Kami memiliki referensi ke dua file dalam tag BODY, satu untuk gambar dan satu untuk halaman web (kami telah meninggalkan tag P):
<img src="images/cat_big.png">
<A HREF="dog.html">Masukkan ke Dog Page</A>
Sumber (src) untuk gambar (img) adalah "images/cat_big.png". Ini menunjuk ke folder bernama gambar. Kami mengatakan bahwa di dalam folder ini ada file bernama cat_big.png. Namun, kami tidak memiliki folder bernama gambar atau gambar kucing di dalamnya. Jadi ini akan gagal. (HREF untuk halaman web, anjing.html, akan baik-baik saja, karena halaman anjing berada di folder yang sama dengan halaman kucing.) Untuk mengatasi masalah ini, kita dapat membuat folder gambar di dalam aset.
Klik kanan folder aset Anda di jendela Explorer. Dari menu yang muncul, pilih New > Directory:
Dari kotak dialog yang muncul, ketik gambar:
Klik OK dan Anda akan melihat folder gambar di dalam aset Anda:
Sekarang salin dan tempel gambar cat_big itu dari file unduhan Anda ke folder gambar baru Anda:
Tag IMG dari HTML seharusnya baik-baik saja sekarang:
<img src="images/cat_big.png">
Kami memiliki folder gambar sekarang dan file bernama cat_big.png di dalam folder itu.
Tapi itulah pengaturan lengkap untuk folder aset. Mari kita lakukan beberapa pengkodean untuk WebView.
9. Pengkodean untuk WebView di Android
Yang ingin kita lakukan sekarang adalah mengatur array untuk menahan semua halaman html. Kita kemudian dapat mengakses setiap halaman web dengan sesuatu seperti halaman[posisi], di mana posisi adalah posisi setiap item di grid.
Kita bisa mengatur array seperti ini:
String[] halaman;
pages[0] = "kucing.html";
halaman[1] = "anjing.html";
Namun, halaman web kami ada di folder aset. Anda harus mengakses folder aset seperti ini:
file:///android_asset/cat.html
Jadi, Anda memerlukan file kata diikuti oleh titik dua dan kemudian tiga garis miring ke depan. Anda kemudian mengetik android_asset. (Perhatikan tunggal untuk aset: itu bukan aset.) Setelah garis miring ke depan lainnya, Anda mengetikkan nama file Anda. Jadi kita bisa mengatur array halaman kita dengan cara ini:
String[] halaman;
pages[0] = "file:///android_asset/cat.html";
halaman[1] = "file:///android_asset/dog.html";
Sebagai gantinya, kita akan mengatur array seperti yang kita lakukan sebelumnya - dari file XML array string.
Klik kanan folder res > values di area Explorer di sebelah kiri Android Studio. Dari menu yang muncul, pilih File sumber daya Nilai > Baru. Dalam kotak dialog, ketikkan pages_array sebagai Nama file:
Klik OK untuk membuat file XML baru:
<?xml version="1.0" encoding="utf-8"?>
<resources></resources>
Di antara dua tag sumber daya, ketik <string-array name="web_pages">. Tekan tombol enter pada keyboard Anda untuk menyelesaikan tag:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<keamaan array-string="web_pages">
</string-array>
</sumber daya>
Di antara dua tag string-array, ketikkan yang pertama dari item array:
<item>file:///android_asset/cat.html</item>
File XML Anda akan terlihat seperti ini:
Sekarang tambahkan sisa item untuk array
<item>file:///android_asset/dog.html</item>
<item>file:///android_asset/fish.html</item>
<item>file:///android_asset/horse.html</item>
<item>file:///android_asset/rabbit.html</item>
<item>file:///android_asset/parrot.html</item>
<item>file:///android_asset/pigeon.html</item>
<item>file:///android_asset/ bebek.html</barang>
Anda dapat menyalin dan menempel di sini, karena satu-satunya hal yang perlu Anda ubah adalah nama halaman HTML: anjing, ikan, kuda, dll. File XML Anda akan terlihat seperti ini:
Anda dapat menutup file ini sekarang, karena kita sudah selesai dengannya.
Kembali ke file MainActivity.java Anda. Siapkan array string lain di bagian atas kode, tepat di bawah label satu:
Label string[] ;
String[] halaman;
Dalam metode onCreate, kita dapat menetapkan array kita dari file XML ke array pages. Tambahkan baris ini tepat di bawah yang mengatur array label:
Resources res = getResources();
label = res.getStringArray(R.array.headings);
pages = res.getStringArray( R.array.web_pages );
Kode Anda akan terlihat seperti ini di versi Android Studio yang lebih lama (dua baris baru disorot):
Dan ini di versi yang lebih baru:
Anda tidak perlu membuat array string dalam file XML, tetapi mereka menghentikan kode Anda dari kekacauan dengan kode array.
Kita sekarang perlu menyiapkan onItemClickListener. Ini, seperti namanya, mendengarkan klik atau mengetuk item di kisi Anda.
Tambahkan kode ini ke metode onCreate Anda, tepat setelah grid.setAdapter:
grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
}
});
Garis-garisnya cukup panjang, jadi mungkin lebih mudah untuk menyalin dan menempelkannya dari halaman ini. (Anda mungkin perlu menghapus beberapa spasi yang berasal dari menyalin HTML dari halaman ini. Lihat kode pada gambar di bawah ini untuk melihat bagaimana seharusnya tampilannya.) Jangan lupa tiga simbol di baris terakhir: braket keriting, braket bundar, dan titik koma.
Anda mungkin mendapatkan teks merah untuk AdapterView dan View. Jika demikian, tekan ALT + ENTER untuk menambahkan pustaka. Atau ketik import android.widget.AdapterView; dan impor android.view.View; di bagian atas kode Anda
Satu-satunya hal yang benar-benar kita butuhkan dari pendengar adalah variabel posisi dalam metode onItemClick. Ini akan memberi tahu kita item grid mana yang diklik: item grid 0, item grid 1, item grid 2, dll. Kita dapat menggunakan angka-angka untuk mengambil halaman dari array halaman kita.
Tambahkan tiga garis ini di antara tanda kurung kurawal dari metode onItemClick:
Intent webPageIntent = Intent baru(getApplicationContext(), DisplayPage.class);
webPageIntent.putExtra("WEB_PAGE", halaman[ posisi ] );
startActivity( webPageIntent );
Anda pernah bertemu kode ini sebelumnya. Yang kami lakukan hanyalah menyiapkan Intent untuk memulai Activity baru. Kami juga menggunakan putExtra untuk mengirim nama halaman web ke Activity baru. Nama kunci yang kami buat adalah WEB_PAGE (Anda dapat mengubah ini, jika Anda mau); nilai untuk kunci adalah pages[ position ]. Ini akan mengirimkan sesuatu seperti file:///android_asset/cat.html atau file:///android_asset/dog.html ke Aktivitas baru.
Anda akan memiliki beberapa teks merah. Klik di dalam Intent dan tekan ALT + ENTER untuk menambahkan pustaka. Atau ketik import android.content.Intent; di bagian atas kode. Seharusnya terlihat seperti ini di versi Android Studio sebelumnya:
Dan ini di kemudian hari:
Namun, Anda masih akan memiliki teks merah untuk DisplayPage. Ini adalah Kegiatan baru. Karena kami belum membuat Aktivitas ini, Anda akan mendapatkan kesalahan untuk itu. Mari kita buat Aktivitas sekarang.
Menambahkan Aktivitas baru
Klik kanan pada folder java Anda (mungkin digarisbawahi dengan warna merah karena kesalahan.) Dari menu yang muncul, pilih Aktivitas > Baru > Aktivitas Kosong. Dalam kotak Nama Aktivitas, ketik DisplayPage:
Pastikan bahwa Kompatibilitas Mundur (AppCompat) dipilih, dan klik Selesai. Saat Aktivitas dibuat, teks merah dari baris Intent baru harus hilang. Itu hilang karena Anda sekarang memiliki file kelas bernama DisplayPage.
Serta file kelas bernama DisplayPage, file XML dengan nama activity_display_page dibuat. Muat file ini, jika belum ditampilkan. (Ada di folder tata letak res >).
Dalam tampilan Desain, temukan kontrol WebView, yang ada di bagian Kontainer palet di versi Android Studio yang lebih lama:
Di versi yang lebih baru, mereka telah memindahkan WebView ke bagian Widget:
Seret WebView ke tata letak kosong Anda. Seharusnya terlihat seperti ini:
Tambahkan beberapa batasan dengan mengklik simbol kuning plus di toolbar tata letak (Infer Constraints). Ini akan mengikat WebView ke sisi layar. Di area Properti atau Atribut di sebelah kanan, ubah ID ke webPageView:
Dan hanya itu yang kita butuhkan untuk tata letak WebView. Kita dapat beralih ke kode di belakang tata letak.
Kode Tampilan Web
Muat file DisplayPage.java Anda untuk mendapatkan kode.
Sama seperti yang kita lakukan sebelumnya, kita dapat mengatur objek Intent, dan kemudian mendapatkan informasi tambahan yang kita kirim dalam file MainActivity.java. Ini, jika Anda ingat, adalah nama halaman web di folder aset kami. Tambahkan dua baris ini dalam metode onCreate dari DisplayPage:
Halaman intent = getIntent();
String myPage = page.getStringExtra("WEB_PAGE");
Halaman web akan berakhir di dalam variabel String yang kami sebut myPage.
Selanjutnya, kita bisa mendapatkan referensi ke WebView di halaman XML.
WebView myWebView = (WebView) findViewById( R.id.webPageView );
Anda mungkin perlu ALT + ENTER teks merah apa pun. Atau tambahkan ini ke bagian atas kode Anda:
impor android.content.Intent;
impor android.webkit.WebView;
Baris berikutnya yang kita butuhkan adalah yang ini:
myWebView.setWebViewClient( WebViewClient baru( ) );
Jika kita tidak memiliki baris ini maka Android akan mencoba meluncurkan browser untuk menemukan halaman kita. Dengan mengatur myWebView menjadi WebClientView, kita dapat mencegah hal ini dan memastikannya memuat halaman lokal.
(ALT + ENTER untuk WebViewClient. Atau tambahkan impor android.webkit.WebViewClient; di bagian atas kode Anda.)
Terakhir, tambahkan baris ini:
myWebView.loadUrl( myPage );
Metode yang disebut load melakukan apa yang Anda harapkan untuk dilakukan: memuat halaman web yang berada di antara tanda kurung bulatnya. Bagi kami, ini adalah halaman web yang disimpan dalam variabel myPage. Namun, Anda dapat mengetikkan alamat web asli di sini:
myWebView.loadUrl( "https://www.homeandlearn.co.uk" );
Jika mengakses internet, Anda perlu menetapkan izin di file Manifes Android. Klik dua kali file ini untuk membukanya. Ketik yang berikut ini di suatu tempat di dekat bagian atas, tepat sebelum tag aplikasi:
<guna-izin android:name=" " />
Segera setelah Anda mengetik braket sudut kiri, Anda akan melihat popup. Pilih uses-permission dan Android Studio akan mengisi sisanya untuk Anda. Anda juga akan melihat daftar panjang izin yang bisa Anda pilih:
Pilih yang INTERNET, jika Anda ingin meminta halaman web dari internet.
Namun, halaman web kami datang secara lokal, jadi kami tidak perlu menambahkan ini.
Satu-satunya hal yang tersisa untuk dilakukan adalah menambahkan panah UP di App Bar Anda di bagian atas, yang membawa Anda ke layar utama. Kami telah melakukan ini sebelumnya beberapa kali, jadi tidak akan menjelaskannya di sini. Cukup ganti baris ini di file Manifes Anda:
<aktivitas android:name=". DisplayPage"></activity>
dengan ini:
<aktivitas android:name=". DisplayPage" android:parentActivityName="MainActivity" >
<kedata-besaran
android:name="android.support.PARENT_ACTIVITY"
android:value="MainActivity" />
</kegiatan>
Anda dapat menjalankan aplikasi Anda sekarang. Anda seharusnya dapat mengetuk item grid. Ketika Anda melakukannya, Anda akan dibawa ke Aktivitas kedua, yang memiliki WebView. Di dalam WebView, Anda akan melihat halaman web muncul.
Dalam pelajaran berikutnya di bawah ini, Anda akan melihat cara mengatur API level untuk proyek Anda.
10. Setting Tingkat API Android
Anda dapat menetapkan API level untuk aplikasi Anda. Idenya adalah Anda menetapkan API level minimum tempat aplikasi Anda berjalan, dan versi tempat aplikasi Anda dikompilasi (ini adalah Versi SDK Target). Anda juga dapat mengatur sesuatu yang disebut versi Build Tools.
Untuk menetapkan al level ini, buka File > Project Structure dari bilah menu di bagian atas Android Studio:
Dari kotak dialog yang muncul, Klik Modul, lalu aplikasi di tengah. Pada tab Properti, cari Versi Sdk Kompilasi dan Versi Alat Build:
Android Studio 3.5 hanya naik ke API 28, yang baik-baik saja. Tapi ini Android 9.0 (Pie). Android 10 sudah keluar, dan ini adalah API 29. Anda memerlukan Android Studio 3.3 atau yang lebih tinggi untuk menguji aplikasi anda untuk Android 10 ke atas. Meski begitu, Anda mungkin mendapatkan error tentang kegagalan sinkronisasi Gradle dan peringatan tentang dependensi usang. Versi Furture dari versi Android Studio mungkin akan memiliki dukungan penuh untuk 10 dan lebih tinggi. Ketika itu terjadi, Anda akan melihatnya API 29 atau lebih tinggi di kotak dropdown.
Untuk kedua kotak dropdown ini, Kompilasi Versi Sdk dan Versi Build Tools, pilih yang tertinggi. Klik Terapkan dan OK dan selesai.
Sekarang lihat file build.gradle di area file proyek di sebelah kiri:
Klik dua kali build.gradle untuk membukanya. Anda akan melihat sesuatu seperti ini:
Anda benar-benar dapat mengetikkan berbagai api dan build level di sini, daripada membuka kotak dialog. (Kotak dialog hanya menambahkan nilai di sini, dalam file ini.) Pada gambar di atas, Anda dapat melihat bahwa compileSdkVersion adalah 28, sedangkan buildToolsversion adalah 29.0.1. Versi SDK minimum diatur ke 15 sedangkan targetSdkVersion adalah 28,
Klik tautan Buka Struktur Proyek di kanan atas untuk melihat kotak dialog lagi.
Perhatikan area dependensi di bagian bawah. Anda dapat menambahkan milik Anda sendiri di sini, jika perlu.
Dan itu saja untuk bagian ini tentang Pengenalan Aplikasi GridView dan WebView dalam programs android. Cobalah untuk mengadaptasi aplikasi. Tambahkan beberapa konten untuk halaman web. Atau ubah gambar tampilan kisi dan judul menjadi sesuatu yang Anda pilih sendiri. Anda mungkin akan melihat banyak aplikasi di Google Play store yang menggunakan GridView dan WebView. Anda sekarang dapat menambahkan milik Anda sendiri!