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

Android SDK: Membuat Dialer berputar

by
Read Time:12 minsLanguages:

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

Android SDK menawarkan berbagai macam komponen interface, termasuk TextViews, tombol, dan EditText. Namun, menambahkan elemen kustom interface untuk aplikasi Anda adalah cara yang bagus untuk berdiri keluar di pasar App. Tutorial ini akan menyelam ke dalam pembuatan komponen kustom interface dengan mengajar Anda bagaimana membangun dialer rotary ramping.

Tutorial ini mengasumsikan beberapa pengetahuan dasar Java dan Android. Selain itu, saya tidak akan memperkenalkan sebuah API yang lengkap. Sebaliknya, kelas-kelas tertentu akan digunakan dan dijelaskan. Saya juga akan menjelaskan, langkah demi langkah, mengapa saya telah memilih sebuah implementasi tertentu untuk komponen interface ini.


Langkah 1: Konsep

Kami memiliki lingkaran dan ingin memutar di sekitar pusatnya. Pendekatan paling sederhana adalah untuk mengambil sebuah sistem koordinat Kartesius dua dimensi sebagai template.

coordinate systemcoordinate systemcoordinate system

Anda menyentuh lingkaran, memutar itu, dan kemudian membiarkannya pergi. Selain itu, lingkaran harus mendaftar "fling" ketika hal ini terjadi.

Android menyediakan interface yang sangat sederhana untuk mengubah gambar dengan bantuan Bitmap kelas dan kelas Matrix. Lingkaran akan ditampilkan dalam ImageView. Dasar matematika unit lingkaran dapat dilaksanakan dengan menggunakan Math kelas. Android juga menawarkan API yang baik untuk mengenali touch event dan gesture. Seperti yang Anda lihat, sebagian besar pekerjaan sudah tersedia bagi kita dengan SDK!


Langkah 2: Setup proyek

Membuat proyek Android baru dan tambahkan Activity. Kemudian tambahkan grafis dialer ke folder "drawable". Kita tidak perlu versi yang berbeda untuk density tampilan yang berbeda, karena nanti kita akan scale gambar secara programmatically. Satu gambar dengan resolusi tinggi, yang mencakup semua ukuran layar, harus cukup dan akan menghemat ruang penyimpanan pada pengguna telepon.

project setup

Langkah 3: Layout

Untuk tutorial ini, kami akan membuat user interface sangat sederhana. Kami hanya menambah satu ImageView tata letak. Untuk konten ImageView, kami memilih kami grafis dialer. Hal ini tidak ada masalah untuk menambahkan View lebih  kemudian karena melakukan sehingga tidak mempengaruhi dialer kami berputar.


Langkah 4: Activity

Seperti dijelaskan dalam langkah-langkah di atas, kita perlu memuat gambar sebagai Bitmap sekaligus membuat activity. Selain itu, kami membutuhkan matriks untuk transformasi, seperti rotasi. Kami melakukan semua ini dalam metode onCreate.

Kita juga perlu scale copy image secara benar. Karena kita hanya tahu setelah measuring tata letak berapa banyak ruang kami mengisi ImageView, kami menambahkan OnGlobalLayoutListener. Dalam metode onGlobalLayout, kita bisa intercept event bahwa tata telah di drawn dan query ukuran view kami.

OnTouchListener ini tetap sangat sederhana. Dalam event ACTION_DOWN kami menginisialisasi sudut (yaitu unit circle). Dengan setiap gerakan, perbedaan antara sudut lama dan baru mendapat additively bertambah dengan dialer.

Kami menambahkan OnTouchListener sebagai private inner kelas. Melakukannya akan menyelamatkan kita dari tidak perlu melewati parameter yang dibutuhkan (misalnya ukuran view).

Perhitungan sudut dapat diselesaikan dengan cepat dengan bantuan dari unit circle. Namun, touch event koordinat perlu dikonversi ke koordinat sistem koordinat Kartesius dua dimensi pertama. Mungkin akan membantu Anda untuk mengatur formula ini sendiri sekali lagi untuk memahami mereka sepenuhnya.

Metode untuk berputar dialer sangat sederhana. Kami mengganti ImageView yang lama konten setiap kali dengan yang Bitmap baru yang dirotasi.

Perhatikan bahwa, terlepas dari beberapa masalah kecil, rotasi dialer sudah bekerja. Perhatikan juga bahwa jika bitmap diputar tidak cocok ke tampilan, bitmap mendapat diperkecil secara otomatis (Lihat jenis skala ImageView). Hal ini menyebabkan berbagai ukuran.


Langkah 5: Algoritma koreksi

Beberapa bug telah diperkenalkan di langkah di atas, misalnya dengan skala yang berbeda-beda, tetapi mereka dapat dengan mudah diperbaiki. Apakah Anda melihat mana masalahnya adalah dengan metode yang diterapkan di atas?

Jika Anda melihat lebih dalam ke dalam implementasi perhitungan rotasi gambar, Anda akan segera menemukan bahwa sebuah instance Bitmap yang baru dibuat setiap kali. Ini membuang-buang banyak RAM dan hasil dalam sering menjalankan garbage collector di background (Anda melihat masalah ini dalam output LogCat). Hal ini menyebabkan animasi untuk melihat berombak.

Masalahnya hanya dapat dihindari dengan mengubah pendekatan. Daripada berputar bitmap dan menerapkannya pada ImageView, kita harus langsung memutar konten ImageView. Untuk itu, kita dapat mengubah jenis skala ImageView untuk "Matrix" dan menerapkan matriks untuk ImageView setiap kali. Ini juga menambah perubahan kecil lain: sekarang kita perlu menambahkan bitmap skala ImageView langsung setelah inisialisasi.

Sekarang bug lain terjadi. Perhitungan sudut bekerja dengan baik dengan ImageView pusat. Namun, gambar yang berputar di sekitar koordinat [0, 0]. Oleh karena itu, kita perlu untuk memindahkan gambar di inisialisasi ke posisi yang benar. Sama berlaku untuk rotasi. Pertama bitmap harus bergeser, sehingga pusat terletak di original ImageView, maka bitmap dapat diputar dan kembali lagi.

Sekarang animasi kami bekerja jauh lebih baik dan sangat halus.


Langkah 6: Fling

Android menyediakan easy-to-use API untuk mengenali gesture. Misalnya sebuah scroll, long press dan fling dapat dideteksi. Untuk tujuan kita, kita extend kelas SimpleOnGestureListener dan menimpa onFling metode. Kelas ini direkomendasikan oleh dokumentasi.

Selain itu, kita perlu menghidupkan rotasi dan dengan demikian mengurangi kecepatan. Karena ini adalah hanya kecil perhitungan, hal ini tidak diperlukan untuk melakukan outsourcing fungsi ekstra thread. Sebaliknya, Anda dapat mentransfer action ke Handler yang dapat memanipulasi GUI di thread utama. Kita bahkan dapat menghindari contoh handler dengan passing action untuk ImageView yang menggunakan Handler sendiri untuk itu.


Langkah 7: Memperbaiki rotasi Inversed

Jika Anda secara ekstensif menguji melemparkan, dengan cepat menjadi jelas bahwa posisi dialer berputar dalam arah yang salah. Sebagai contoh, ini adalah kasus ketika mulai dan titik akhir hanya dalam kuadran yang ketiga. Namun ada juga kasus-kasus kesalahan yang lebih sulit (misalnya ketika menyeka dari kuadran dua sampai empat atas kuadran tiga).

Solusi yang paling sederhana adalah untuk mengingat kuadran yang disentuh. Kasus kesalahan tertangkap dalam metode onFling dan kecepatan mendapat terbalik sesuai.


Langkah 8: Stop Fling

Tentu saja fling animasi telah berhenti jika Anda menyentuh dialer sementara animasi berjalan. Ini hal ini hanya diperlukan untuk menambahkan nilai boolean untuk memeriksa apakah Animasi diperbolehkan untuk dimainkan atau tidak.

Dalam acara ACTION_DOWN Anda ingin menghentikannya. Setelah Anda membiarkan dialer pergi (ACTION_UP), animasi harus dimainkan.


Langkah 9: Apakah berikutnya

Semua fitur yang diinginkan termasuk dalam dialer. Namun, ini hanya contoh dan dapat di extend indefinitively.

Beberapa perangkat tambahan tambahan yang datang ke pikiran termasuk: Anda bisa melacak sudut dan membalikkan atau mengurangi nilai-nilai tertentu (Lihat app Shutdown Remote saya untuk contoh ini). Juga, setelah merilis dialer Anda bisa meng-animasikan kembali ke posisi semula untuk meniru fungsi mekanis nyata, rotary antik cepat. Lebih lanjut, dialer dapat diekstraksi ke kelas lihat kustom, yang akan meningkatkan usabilitas komponen. Kemungkinan untuk peningkatan sangat bisa!


Kesimpulan

Dalam tutorial ini, saya telah menunjukkan kepada Anda bagaimana menerapkan dialer rotary sederhana. Tentu saja, fungsi dapat di extend dan ditingkatkan seperti yang dibahas diatas. Android SDK menawarkan API yang luar biasa dan sangat berguna dengan banyak kelas. Ada tidak perlu reinvent banyak, Anda biasanya hanya perlu untuk menerapkan apa yang sudah ada. Jangan ragu untuk memberi komentar atau meninggalkan saran!


Sumber

http://en.wikipedia.org/wiki/file:Cartesian_coordinates_2D.SVG

Advertisement
Did you find this post useful?
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.