7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Android SDK: Menggambar dengan Pattern Fills

Read Time: 8 mins

Indonesian (Bahasa Indonesia) translation by Shylchemist (you can also view the original English article)

Tutorial ini menunjukkan cara meningkatkan aplikasi menggambar dengan memungkinkan pengguna untuk melukis dengan pola mengisi daripada warna-warna solid. Baca terus!

Interaksi layar sentuh pada banyak perangkat Android membuat platform ini cocok untuk aplikasi menggambar. Dalam seri terbaru, kita membuat aplikasi gambar Android dasar, dengan pengguna dapat memilih dari palet warna dan menggambar pada kanvas menggunakan jari mereka. Dalam tutorial ini, kita akan memperluas apa yang kita bahas dengan menggunakan pola mengisi daripada warna yang solid. Anda tidak harus menyelesaikan seri aplikasi gambar sebelum mencoba tutorial ini, tetapi jika Anda memilikinya, Anda dapat menggunakannya untuk menyempurnakan aplikasi yang Anda buat sebelumnya.

Berikut ini pratinjau aplikasi menggambar pola yang akan dibuat dalam tutorial ini:

Drawing With PatternsDrawing With PatternsDrawing With Patterns

Tutorial ini akan memandu Anda melalui proses pembuatan aplikasi yang berdiri sendiri, tetapi juga akan menyertakan tips untuk menggunakan kode untuk meningkatkan aplikasi yang dibuat dalam rangkaian ini. Folder unduh kode sumber berisi aplikasi yang dibuat dalam tutorial ini dan versi yang disempurnakan dari aplikasi gambar umum yang dibuat dalam seri ini. Berikut ini pratinjau aplikasi yang ada yang ditingkatkan dengan fungsi menggambar pola:

Drawing With PatternsDrawing With PatternsDrawing With Patterns

1. Buat atau Perluas Aplikasi

Langkah 1

Meskipun Anda dapat menyelesaikan tutorial ini tanpa harus bekerja melalui seri Aplikasi Menggambar, kita akan membahas beberapa detail fungsi gambar yang dibahas lebih menyeluruh di sana. Kita akan menyertakan instruksi lengkap untuk menggunakan kode di aplikasi baru serta menunjukkan bagaimana Anda dapat menggunakannya untuk meningkatkan aplikasi menggambar yang ada. Jika Anda sudah memiliki aplikasi yang dibuat dalam rangkaian ini, Anda dapat langsung melompat ke bagian 2, langkah 1 dari tutorial sekarang.

Jika Anda memulai aplikasi baru untuk tutorial ini, buat satu di Eclipse sekarang, pilih level API minimal 14 dan pengaturan lain pilihan Anda. Biarkan Eclipse membuat Aktivitas dan tata letak kosong untuk aplikasi. Kita akan menggunakan banyak kode yang sama yang digunakan dalam seri aplikasi gambar, jadi untuk informasi lebih lanjut tentang fungsi ini, silakan lihat tiga tutorial di dalamnya.

Tambahkan kelas baru ke aplikasi untuk Tampilan kustom di mana gambar akan berlangsung, beri nama kelas "DrawingView" dan perpanjang deklarasi pembukaan sebagai berikut:

Anda akan membutuhkan pernyataan impor berikut di kelas:

Tambahkan variabel instan berikut ke kelas:

Beri kelas metode konstruktor di mana kita memanggil metode pembantu yang akan kita tambahkan berikutnya:

Tambahkan metode helper sekarang:

Metode ini mengatur kelas untuk menggambar. Ganti metode ketika View diberikan ukuran berikutnya:

Sekarang ganti metode onDraw untuk menampilkan gambar yang digambar oleh pengguna:

Akhirnya, tambahkan metode berikut untuk menerapkan gambar pengguna melalui sentuhan pada View:

Langkah 2

Sekarang mari kita tampilkan View kustom di interface pengguna aplikasi. Buka file layout utama Anda dan sertakan garis besar berikut:

Di dalam Linear Layout, tambahkan sebuah instance dari kelas View kustom yang Anda buat, menggunakan awalan paket untuk aplikasi Anda sendiri:

Kita ingin area kanvas untuk mengisi ruang terpisah dari tombol palet yang akan kita tambahkan berikutnya.


2. Tombol Pola 

Langkah 1

Kami akan menggunakan 8 pola fills - Anda dapat menggunakan gambar berikut atau membuat Anda sendiri jika Anda suka. Simpan ke dalam folder drawable proyek Anda - mereka termasuk dalam folder unduhan kode sumber. Kita akan menggunakan nama file untuk merujuk pada gambar dalam kode aplikasi.

Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern

Anda dapat menggunakan gambar pola Anda sendiri jika Anda suka, asalkan masing-masing berisi gambar bitmap tileable. Kita akan menggunakan gambar pada tombol pola di UI serta di fungsi gambar itu sendiri. Kita tunjukkan pada tombol sehingga pengguna dapat melihat seperti apa bentuk setiap pola sebelum memilihnya.

Langkah 2

Sekarang mari kita menambahkan palet ke interface pengguna untuk tombol pola. Buka file layout. Jika Anda bekerja dengan aplikasi yang dibuat dalam rangkaian, Anda dapat menambahkan tombol baru ke area palet untuk pola - lihat kiat di bawah dan lihat unduhan kode sumber untuk contoh lengkap dari aplikasi yang ada dengan fungsionalitas baru ditambahkan . Untuk aplikasi baru, tambahkan yang berikut setelah elemen View khusus yang Anda tambahkan:

Kita akan mendaftar empat tombol di setiap baris. Tambahkan empat yang pertama di dalam Linear Layout untuk baris atas:

Tambahkan empat berikutnya di dalam Linear Layout untuk baris bawah:

Tips: Untuk aplikasi yang kami buat dalam rangkaian, ubah kode ini untuk menggunakan struktur Tombol Gambar yang sama dengan tombol warna Anda, tetapi dengan pola yang tercantum sebagai gambar yang dapat digambar alih-alih warna dan nama pola sebagai atribut tag seperti pada kode di atas. Anda dapat mengganti beberapa tombol warna Anda dengan tombol pola atau hanya menambahkan beberapa di samping tombol warna. Jika Anda menambahkan banyak tombol ke aplikasi, Anda mungkin perlu mengurangi ukurannya agar muat dengan rapi di berbagai layar.

Setiap Tombol Gambar menentukan metode untuk memanggil klik pengguna - metode ini akan dapat mengakses nama pola untuk tombol yang diklik dari atribut tagnya.


3. Pattern Fills 

Langkah 1

Tips: Anda dapat menyimpan kelas Aktivitas utama seperti jika Anda menyelesaikan rangkaian, satu-satunya perubahan yang perlu Anda lakukan adalah ke kelas View khusus seperti yang akan Anda lihat di bawah.

Sekarang kita bisa menerapkan menggunakan pattern fills. Di kelas Aktivitas utama aplikasi Anda, tambahkan impor berikut:

Sebelum metode onCreate, tambahkan variabel instan berikut untuk kelas View khusus:

Di onCreate, instantiate ini dengan referensi ke contoh View khusus yang ditambahkan ke tata letak:

Selanjutnya tambahkan metode yang dicantumkan sebagai atribut onClick untuk tombol pola:

Di dalam metode, ambil tag dari pola Gambar Tombol yang diklik:

Kita membutuhkan View kustom untuk mengatur isi pola berdasarkan pilihan pengguna. Di kelas "DrawingView" Anda, tambahkan metode berikut (lihat tip di bawah ini jika Anda meningkatkan aplikasi gambar yang ada untuk alternatif untuk menambahkan metode ini):

Di dalam metode, pertama-tama batalkan View:

Kita akan menggunakan pola nama drawable untuk membawanya ke kelas lukisan sebagai Bitmap. Dapatkan referensi ke ID sumber daya untuk pola string yang diteruskan:

Ubah nama paket sesuai keinginan Anda. Selanjutnya dalam metode, dekode sumber daya sebagai Bitmap, meneruskan nilai ID yang diambil:

Daripada menggambar langsung dengan Bitmap, kita akan menggambar dengan warna solid dan menggunakan Bitmap sebagai Shader untuk itu. Buat objek Shader menggunakan pola bitmap yang di-decode:

Kita ingin pola tersebut diulangi di seluruh area yang digunakan pengguna dengan itu. Atur warna menjadi putih solid dan Shader untuk menggunakan pola:

Ini akan menciptakan kesan bahwa pengguna menggambar dengan pola sebagai cat, seperti halnya dengan warna solid. Tidak peduli apa ukuran gambar gambar yang dapat digambar, selama itu adalah tileable itu akan diulang mulus di seluruh kanvas di mana pun pengguna memilih untuk menggambar dengannya.

Kembali ke metode Activity paintClicked utama, Anda sekarang dapat memanggil metode baru dengan pola String diambil dari tag tombol:

Pengguna akan dapat mengetuk pola apa pun yang ingin mereka gunakan di area palet dan ini akan tercermin ketika mereka kemudian menggambar di kanvas. Untuk perilaku yang lebih maju dalam tombol palet, silakan lihat seri aplikasi gambar jika Anda belum menyelesaikannya.

Tips: Jika Anda meningkatkan aplikasi gambar yang ada, Anda dapat terus menggunakan metode setColor dari Aktivitas utama Anda, mengubah konten metode di kelas "DrawingView" untuk menggunakan pemrosesan di atas jika warna yang diteruskan String tidak dimulai dengan "#" karakter, menggunakan pemrosesan yang ada jika ya. Jika pengguna telah memilih warna daripada pola, Anda juga perlu mengatur Shader pada objek Paint kembali ke null - lihat kode sumber untuk detail.

Anda harus dapat menjalankan aplikasi dan menguji fungsi menggambar pola sekarang. Memilih pola dengan mengetuk tombol palet, lalu menyentuh area kanvas dengan jari Anda dan menyeret di layar akan menggambar dengan pola yang dipilih seperti halnya dengan warna solid.


Kesimpulan 

Dalam tutorial ini kita telah menunjukkan cara menerapkan fungsi gambar menggunakan pola daripada warna di aplikasi Android Anda. Menggunakan pattern fill hanya sedikit berbeda dengan menggunakan warna solid, tetapi membutuhkan pemrosesan yang lebih sedikit seperti yang Anda lihat. Ingat untuk memeriksa unduhan kode sumber untuk informasi lebih lanjut jika Anda telah bekerja pada aplikasi yang dibuat dalam seri aplikasi gambar. Ada banyak opsi lain yang dapat Anda jelajahi dalam menggambar aplikasi, termasuk opasitas, yang akan kita lihat dalam tutorial yang akan datang. Kita juga akan melihat interaksi yang tidak berasal dari layar sentuh. Sementara itu, lihat apakah Anda dapat meningkatkan aplikasi menggambar Anda dengan cara lain.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.