Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK

Meningkatkan aplikasi foto dengan GPUImage & iCarousel

by
Difficulty:IntermediateLength:LongLanguages:

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

Tutorial ini akan mengajarkan Anda bagaimana menggunakan GPUImage untuk menerapkan filter gambar secara real-time sebagai camera feed ditampilkan. Sepanjang jalan, Anda akan belajar bagaimana untuk secara otomatis mengisi gambar dalam controller carausel dan bagaimana untuk mengubah ukuran gambar dengan UIImage + kategori.


Overview projek aplikasi


Prasyarat tutorial

Tutorial ini didasarkan pada sebelumnya post berjudul "Build a Photo App with GPUImage". Pelajaran sebelumnya menunjukkan bagaimana menggunakan UIImagePickerController untuk memilih foto dari perangkat foto album atau kamera, bagaimana untuk menambahkan GPUImage perpustakaan ke proyek Anda, dan bagaimana menggunakan GPUImageFilter class untuk meningkatkan kamera frame. Jika Anda sudah akrab dengan UIImagePickerController dan dapat mengetahui bagaimana menambahkan GPUImage untuk proyek Anda sendiri, Anda harus mampu mengambil dari mana tutorial terakhir Tinggalkan saja.


Langkah 1: Impor iCarousel

Proyek ini akan banyak menggunakan sebuah proyek open source yang disebut iCarousel untuk menambahkan style tampilan foto yang dipilih.

Untuk memasukkan iCarousel dalam proyek Anda, pergi ke halaman GitHub resmi dan men-download kode sumber sebagai zip file. Mengambil kode dari ZIP file dan kemudian drag-and-drop folder yang berjudul "iCarousel" ke Xcode proyek Navigator. Folder ini harus berisi iCarousel.h dan iCarousel.m. Pastikan untuk memilih "Create groups for any added folders" dan periksa kotak di samping "Copy items into destination group's folder (if needed)" dan kotak di sebelah nama sasaran proyek Anda di daerah "Add to targets".

Selanjutnya pergi ke ViewController.m dan menambahkan statement import untuk iCarousel:


Langkah 2: Mengimpor UIImage + Kategori

Sebelum kami menampilkan gambar kami dengan iCarousel, kita akan perlu menurunkan skala ke ukurang yang dibolehkan. daripada menulis semua kode untuk melakukan hal ini dengan tangan, kami akan membuat menggunakan UIImage + kategori proyek, yang menyediakan fungsi dasar untuk mengubah ukuran gambar serta beberapa trik manipulasi gambar lainnya.

Tip: Anda bisa atau menggunakan proyek MGImageUtilities untuk tugas ini. Sementara rincian pelaksanaan akan berbeda sedikit, ini juga menyediakan dukungan yang sangat baik untuk UIImage scaling.

Men-download kode UIImage + kategori dari GitHub dan kemudian membuat grup baru dengan nama yang sama dalam Xcode. Tarik file implementasi dan header untuk UIImage + Alpha, UIImage + Resize dan UIImage + RoundedCorner ke proyek Anda. Pastikan untuk memilih "Create groups for any added folders" dan periksa kotak di samping "Copy items into destination group's folder (if needed)" dan kotak di sebelah nama sasaran proyek Anda di daerah "Add to targets".

Dalam ViewController.m file, impor Kategori gambar dengan baris kode berikut:


Langkah 3: Menambahkan iCarousel View di IB

Dengan kode iCarousel diimpor ke proyek kami, beralih ke file MainStoryboard.storyboard untuk pengerjaan ulang antarmuka kami.

Pertama, pilih UIImageView saat ini yang terhubung ke selectedImageView IBOutlet dan menghapusnya. Beralih kembali ke ViewController.m dan memodifikasi kode proyek seperti berikut:

baris 1 di atas, ganti selectedImageView outlet dengan sebuah outlet iCarousel yang disebut photoCarousel. Swap keluar variabel dalam pernyataan synthesize di baris 14 di atas juga.

Kembali ke interface Builder dan menyeret UIView baru ke tampilan controller. Dengan UIView baru yang dipilih, pergi ke tab "Indentitiy Inspector" dalam panel Utilities dan mengatur nilai kolom "Class" ke "iCarousel". Ini memberitahu Interface Builder bahwa UIView yang kami menambahkan proyek harus instantiated sebagai instance class iCarousel.

Adding the iCarousel View

Sekarang membuat hubungan antara outlet photoCarousel hanya deklarasi dan UIView yang baru saja ditambahkan sebagai subview.

Adding the iCarousel View

Kita perlu untuk menetapkan sumber data dan delegasi untuk photoCarousel juga, dan kita dapat mencapai ini dari dalam interface Builder. Pertama, pergi ke ViewController.h dan menyatakan bahwa view controller ini akan sesuai dengan protokol yang sesuai:

Baris 2 kita mengimpor iCarousel, dan baris 4 kami kemudian menyatakan kesesuaian untuk delegasi dan sumber data.

Kembali ke storyboard file, sekarang Anda bisa memetakan sumber data dan delegasi ke view controller.

Adding the iCarousel View

Sebelum pindah, silakan dan mengubah warna latar belakang pemandangan iCarousel ke hitam.

Oke, hanya satu hal lagi. Kami ingin view iCarousel untuk muncul di bawah UIToolbar dalam hirarki view. Anda dapat melakukan ini secara visual dengan hanya menyeret mereka ke urutan yang benar di interface Builder:

Adding the iCarousel View

Perhatikan bagaimana tampilan iCarousel sekarang muncul sebelum Toolbar.

Menyimpan pekerjaan Anda dalam Interface Builder.


Langkah 4: Mengimplementasikan protokol iCarousel

iCarousel menggunakan design pattern yang mirip dengan UITableView bahwa sumber data yang digunakan untuk pakan masukan ke dalam kontrol dan delegasi digunakan untuk menangani interaksi dengan kontrol.

Untuk proyek kami, sumber data yang akan NSMutableArray sederhana yang disebut "displayImages". Menambahkan ini ke ekstensi class dalam ViewController.m sekarang:

Selanjutnya, kami ingin mengalokasikan memori untuk array dalam c;ass initializer Ruangan Khusus. Dalam kasus kami, voew controller akan instantiated dari Storyboard, sehingga initialize yang tepat initWithCoder:. Namun, jika class instantiated pemrograman dari XIB, initializer yang tepat akan initWithNibName:bundle:. Untuk mengakomodasi baik style inisialisasi, kita akan menulis initializer kita sendiri kustom dan menyebutnya dari keduanya, seperti:

Sekarang kita dapat implementasi sumber data dan mendelegasikan. Mulailah dengan data sumber metode numberOfItemsInCarousel:, seperti:

Ini akan memberitahu iCarousel berapa banyak gambar untuk menampilkan dengan melihat jumlah gambar yang disimpan dalam array sumber data.

Selanjutnya, menulis metode yang benar-benar akan menghasilkan view untuk setiap gambar yang ditampilkan di carousel:

Ini adalah awal yang baik, tapi ada satu masalah yang sangat signifikan di atas: gambar harus diperkecil sebelum dipasok ke iCarousel. Tambahkan baris berikut kode untuk memperbarui metode:

Pro Tip: Menggunakan metode ini dalam produksi app? Mempertimbangkan meningkatkan kode untuk kinerja dengan melakukan mengubah ukuran pada thread background gambar dan menjaga NSMutableArray terpisah yang cache menurunakn skala versi gambar.
UPDATE 9/27/2012: Nick Lockwood (penulis iCarousel) telah merilis sebuah proyek yang disebut FXImageView yang secara otomatis akan menangani loading gambar di sebuah thread background. Hal ini juga dilengkapi dengan lain berguna lonceng-dan-peluit seperti bayangan dan sudut lengkung, sehingga check it out!

Di atas, kita menetapkan ukuran maksimum 250px antara lebar atau tinggi gambar, dan kemudian kita skala atribut berlawanan untuk mencocokkan. Ini kendala proporsi gambar dan terlihat jauh lebih baik daripada hanya skala ke 250px oleh 250px persegi.

Dua metode di atas adalah semua kebutuhan iCarousel untuk mulai menampilkan gambar.

Dengan metode sumber delegasi dan data yang dikonfigurasi, sekarang adalah waktu yang baik untuk setup iCarousel objek dalam metode viewDidLoad juga:

Dengan hanya beberapa tweak, proyek akan mampu menampilkan gambar dalam carousel!


Langkah 5: Beralih ke Model Data baru

Sebelumnya dalam tutorial ini, kita digantikan selectedImageView properti dengan properti photoCarousel, diperbarui interface Storyboard untuk mencocokkan, dan menciptakan NSMutableArray untuk bertindak sebagai iCarousel data model. Namun, ada beberapa metode di ViewController.m yang masih menggunakan model data lama yang akan mencegah proyek kompilasi, jadi mari kita memperbaiki mereka sekarang. Pembaruan metode saveImageToAlbum seperti:

Baris 3 memilih UIImage dari data model yang cocok dengan indeks iCarousel saat ini. Baris 4 melakukan yang sebenarnya disk menulis dengan gambar.

Selanjutnya, pergi ke UIImagePickerController mendelegasikan metode dan memodifikasi kode:

Pada baris 6 di atas, kita menambahkan foto yang dipilih ke model baru dan baris 8 kita memaksa merefresh carousel.

Hanya satu perubahan lagi. Pergi ke clickedButtonAtIndex action sheet: metode dan memodifikasi kode sebagai berikut:

Tiga baris akhir dari metode ini akan menyaring data model gambar yang sesuai dengan indeks caraousel saat ini, menggantikan tampilan carousel dengan gambar dan kemudian merefresh caraousel.

Jika semua berjalan baik, sekarang Anda dapat mengkompilasi dan menjalankan proyek! Melakukan hal ini akan memungkinkan Anda untuk melihat gambar Anda dalam carousel bukan hanya dalam image view.


Langkah 6: Menambahkan Gesture untuk menghapus gambar

App terlihat baik sejauh ini, tapi akan menyenangkan jika pengguna dapat menghapus foto dari carousel sesudah menambahkannya ke layar. Tidak ada masalah! Kita dapat memilih semua subclass UIGestureRecognizer membuat ini terjadi. Untuk tutorial ini, aku telah memilih untuk menggunakan two-finger double-tap. gesture ini mungkin tidak segera intuitif, tetapi sangat mudah untuk melakukan dan kompleksitas ditambahkan akan membantu mencegah penghapusan gambar secara tidak sengaja.

Dalam ViewController.m file, pergi ke carausel: viewForItemAtIndex:reusingView: metode dan menambahkan baris berikut sebelum akhir metode:

Baris 4-8 deklarasi objek UITapGestureRecognizer baru, menetapkan jumlah sentuhan (finger) diperlukan untuk memicu gerakan ke 2, dan menetapkan jumlah keran yang diperlukan untuk 2 juga. Akhirnya, sebelum melewati view ke obyek iCarousel, kita mengatur properti gestureRecognizers dengan recognizer baru dibentuk.

Catatan bahwa bila dipicu, recognizer gerakan ini akan menjalankan removeImageFromCarousel selector:. Mari kita menerapkan berikutnya:

Baris 3 menghilangkan gesture dari target saat ini untuk mencegah beberapa gerakan yang dipicu ketika memproses. Sisa dua baris yang tidak baru saat ini.

Build dan menjalankan aplikasi lagi. Anda sekarang harus mampu secara dinamis menghapus item dari carousel!


Step 7: Membuat MTCameraViewController

Sisanya dari tutorial ini akan fokus pada menggunakan GPUImageStillCamera untuk membangun kustom kamera picker control yang dapat menerapkan filter untuk video yang masuk secara real time. GPUImageStillCamera bekerja sama dengan class disebut GPUImageView. Frame kamera yang dihasilkan oleh GPUImageStillCamera dikirim ke objek GPUImageView yang diberikan untuk ditampilkan kepada pengguna. Semua ini dicapai dengan fungsi yang mendasari yang disediakan oleh framework AVFoundation, yang menyediakan akses pragmatis ke kamera frame data.

Karena GPUImageView child class dari UIView, kita dapat menanamkan tampilan seluruh kamera ke dalam class UIViewController kustom kami sendiri.

Menambahkan sebuah subclass UIViewController baru untuk proyek dengan mengklik kanan "PhotoFX" di navigasi proyek, dan kemudian memilih New File > Objective-C class. Nama claass "MTCameraViewController" dan masukkan "UIViewController" di bidang "subclass".

Creating MTCameraViewController

Klik "Next" dan kemudian "Create" untuk menyelesaikan proses.

Pergi ke MTCameraViewController.m file dan impor GPUImage:

Selanjutnya buat ekstensi class dengan diperlukan GPUImage data anggota:

Akhirnya, pergi ke viewDidLoad: metode dan menambahkan kode untuk memulai penangkapan kamera:

Baris 5-9 menciptakan GPUImageView baru untuk menampilkan kamera feed dan instance GPUImageFilter default untuk menerapkan efek khusus ke tampilan. Kita bisa dengan mudah menggunakan salah satu sub GPUImageFilter, seperti GPUImageSketchFilter, tetapi kita sebaliknya akan memulai dengan filter bawaan (yaitu tidak ada manipulasi) dan membiarkan pengguna secara dinamis memilih filter kemudian.

Baris 11-17 instantiate GPU kamera instance dan menerapkan filter yang dibuat sebelumnya untuk kamera sebelum memulai penangkapan.


Langkah 8: Menambahkan kamera kustom di IB

Sebelum kode dari langkah 8 akan bekerja, kita perlu menambahkan class MTCameraViewController kustom baru saja dibuat untuk proyek Storyboard.

Buka MainStoryboard.storyboard file dan menyeret keluar View Controller baru dari perpustakaan objek. Dengan objek ini dipilih, pergi ke tab Indentitiy inspector dan menetapkan nilai bidang "Class" untuk "MTCameraViewController".

Selanjutnya, drag UIToolbar ke layar dan mengatur style properti untuk "Black Opaque" di Inspektur atribut. Kemudian tambahkan dua width fleksibel bar tombol item ke toolbar dengan "Take Photo" UIBarButtonItem di tengah.

Adding MTCameraViewController Subviews

Untuk menghubungkan controller view ini ke aliran aplikasi, klik kanan tombol "camera" dari controller tampilan utama dan tarik dipicu segues outlet untuk melihat controller baru:

Adding New Segue

Bila diminta, pilih "Push" sebagai gaya segue.

Dengan baru ditambahkan segue objek yang masih dipilih, pergi ke "Attributes inspector" dan mengatur indentifier untuk "pushMTCamera". Pergi ke depan dan pastikan bahwa "Push" dipilih dari "Style" drop down.

Configuring Segue

dengan seque dibuat, memastikan bahwa UIImagePicker akan tidak lagi ditampilkan bila pengguna menyentuh tombol kamera pada layar app pertama dengan melepas IBAction outlet dari metode photoFromCamera.

Akhirnya, pilih tampilan utama MTCameraViewController yang baru dibuat. pergi ke Identity inspector dan set nilai class untuk "GPUImageView".

Sementara bleum sempurna dulu, jika Anda membangun dan menjalankan app sekarang, Anda harus mampu mendorong MTCameraViewController ke hirarki view dan melihat GPUImageView menampilkan frame dari kamera secara real-time!


Langkah 9: Tambahkan Realtime Filter seleksi

Kita sekarang dapat menambahkan logika yang diperlukan untuk mengendalikan filter yang diterapkan pada tampilan kamera. Pertama, pergi ke viewDidLoad: metode dalam MTCameraViewController.m file dan menambahkan kode yang akan menciptakan sebuah "Filter" tombol di bagian atas kanan dari tampilan controller:

Baris 6 di atas, kita membuat UIBarButtonItem kustom yang akan memicu applyImageFilter: ketika dipilih.

Sekarang membuat metode selector:

Setelah menambahkan di atas Anda akan melihat kompiler peringatan yang menyatakan bahwa saat ini lihat controller tidak mematuhi protokol UIActionSheetDelegate. Memperbaiki bahwa masalah sekarang dengan pergi ke MTCameraViewController.h dan memodifikasi Deklarasi class kelas seperti:

Lengkap lingkaran dengan kembali ke MTCameraViewController.m file dan menambahkan logika yang akan menanggapi UIActionSheet yang disajikan:

Baris 11-12 digunakan untuk me-reset filter yang saat ini dipilih.

Baris 15-42 di atas harus akrab bagi logika di ViewController.m; kita hanya menggati tombol yang dipilih untuk membuat sebuah instance filter berhubungan.

Baris 44-47 ambil filter baru yang dibuat dan menerapkannya ke kamera GPUImage.

Jika Anda membangun dan menjalankan proyek sekarang, Anda akan melihat bahwa tombol filter baru dibuat memungkinkan pengguna untuk mencoba GPUImage filter secara real time!


Langkah 10: Membuat protokol delegasi kamera

Sekarang bahwa kita memiliki filter live feed bekerja, langkah besar terakhir dalam tutorial adalah untuk memungkinkan pengguna untuk mengambil foto dengan kamera GPUImage dan kemudian menampilkan mereka kembali dalam tampilan utama controller foto carousel.

Untuk mencapai ini, kita akan memasukan pesan antara tampilan controller menggunakan delegation design pattern. Secara khusus, kami akan membuat protokol kustom resmi mendelegasikan kita sendiri di MTCameraViewController dan kemudian mengkonfigurasi class ViewController utama untuk menyesuaikan diri dengan protokol itu untuk menerima delegasi pesan.

Untuk memulai, pergi ke MTViewController.h dan memodifikasi kode sebagai berikut:

Kode di atas menyatakan pattern resmi mendelegasikan disebut MTCameraViewControllerDelegate pada baris 3-7, dan kemudian menciptakan sebuah objek delegasi pada baris 11.

Selanjutnya beralih ke MTCameraViewController.m dan mensintesis properti delegasi:

Dengan protokol yang dideklarasi, kita sekarang perlu untuk menerapkannya dalam class ViewController utama. Pergi ke ViewController.h dan tambahkan baris berikut:

Sekarang membuka ViewController.m file. Kami ingin menetapkan properti delegasi bila controller di inisialisasi. Karena kita menggunakan storyboard, tempat yang tepat untuk melakukan ini adalah di prepareForSegue:sender: metode, yang akan dipanggil sebelum view baru controller didorong ke layar:

Selanjutnya kita perlu untuk mengimplementasikan didSelectStillImage:withError: metode yang diperlukan oleh protokol MTCameraViewControllerDelegate:

Kode di atas akan mengkonversi NSData objek menyerahkan kepada metode untuk UIImage dan kemudian reload foto carousel.

Akhirnya, kita perlu untuk membungkus hal dengan mengembalikan MTCameraViewController.m dan menambahkan dalam panggilan metode delegasi sesuai. Pertama, men-setup sebuah metode IBAction yang akan memicu snap kamera:

Sebelum melanjutkan, menghubungkan metode ini untuk "Take Photo" tombol di MainStoryboard.storyboard file.

Akhirnya, tambahkan implementasi metode:

Baris atas 3-5 menonaktifkan tombol "Take Phoyo" untuk mencegah beberapa tekan saat pemrosesan.

Baris 7-22 menggunakan GPUImage metode capturePhotoAsJPEGProcessedUpToFilter:withCompletionHandler: untuk benar-benar menyimpan gambar JPEG, periksa untuk melihat jika seorang delegasi telah ditetapkan, dan kemudian mengirim data gambar ke delegasi jika sudah diatur.

Baris 19 muncul saat ini view controller, tapi seterusnya thread aplikasi utama.


Ringkasan

Selamat! Jika Anda telah mengikuti tutorial sejauh ini, maka Anda harus sepenuhnya fungsional, advanced aplikasi pengambil foto! Jika Anda memiliki pertanyaan atau umpan balik, jangan ragu untuk meninggalkannya di bagian komentar di bawah ini atau mengirimkannya kepada saya secara langsung di Twitter (@markhammonds).

Terima kasih sudah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.