Android Wear Watch Face Programlama


Android Wear Nedir ?

Android Wear’a uygulama yazmadan önce yazımızın başında Android Wear teknolojisini tanıtmakta fayda var. Nedir bu Android Wear? Android Wear, Google’ın giyilebilir cihazlar için sunduğu bir platformdur. Google, ihtiyacımız olan bilgiyi önümüze getiriyor diyebiliriz.

Akıllı mobil cihazlarımız hayatımızı kolaylaştırıyor. Evet. Fakat Android Wear ile Google bunu bir adım öne taşıyor. Akıllı saatinizi akıllı telefonunuzla senkronize etmeniz halinde, telefonunuza gelen tüm mesajları, mailleri, aramaları, kısacası tüm bildirimlerinizi akıllı saatinizde görüntüleyebilirsiniz. Akıllı saat üzerinden Speech-to-Text ile rehberinizdeki insanlara mesaj gönderebilirsiniz. Android Wear uygulamaları ile hayatınızı kolaylaştırabilirsiniz (Harita, Hava durumu, Mailler, Toplantı saatleri vs.) Bir Android Wear kullanıcısı olarak (LG Watch Urbane) gerçekten hayatımı kolaylaştırdığını söyleyebilirim.

Diğer bir özgürlüğümüz ise Watchface’ler. Android Wear bir çok farklı Watchface seçeneği ile geliyor.

İstediğiniz tasarımı giyiminize göre ya da zevkinize göre değiştirebilirsiniz. Açıklama yazısını fazla da uzun tutmadan kendi watchface’imizi yazmaya başlayalım.

Water Watchface

Google I/O 2015 etkinliğinden sonra sahip olduğum Android Wear ile ilgilenmeye başladım. Açıkcası bayağı ilgimi çekti. Ve hemen buna bir uygulama yazmalıyım dedim. Yapılabilecek en temel uygulama tabiki de bir watchface idi. İnternette araştırırken çok beğendiğim bir tasarım buldum ve bunu gerçek bir uygulama haline getirmek istedim.

Uygulamanın kaynak kodlarına buradan ulaşabilirsiniz. Kendi saatinizde denemek için de marketteki uygulamayı buradan indirebilirsiniz.

Android Studio > Start a new Android Studio project seçerek Wear seçeneğini seçtiğimizde Watch Face seçeneğini seçip projemizi oluturabiliriz.

Projemizi oluşturduğumuzda project yapımız aşağıdaki gibi sadece bir MyWatchFace.java sınıfımız var.

Küçükken her sayfaya bir resim çizer daha sonradan da hızlı hızlı çevirirdik. Tıpkı hareket ediyor gibi olurdu. Bir watchface de tıpkı bunun gibi çalışıyor. Sürekli değişen bir görüntüyü gözün dinamik görmesi.

MyWatchFace.java sınıfındaki key componentlerimiz;

MyWatchFace — Oluşturduğumuz Watchface sınıfı. Bu sınıfın görevi, asıl görevi üstlenecek sınıf olan MyWatchFace.Engine sınıfını oluşturmak.

MyWatchFace.Engine — Bu sınıf içersinde temel olarak 3 method üzerinden sürekli çalışacağız.

onCreate — Engine sınıfımız oluşturulduğunda bu methodumuz bir kere çağrılır. Yani tekrar tekrar çağrılmaz. Bu sebeple bu method içersinde nesnelerimizi oluşturacağız. Örneğin arka plan için Bitmap’ı burada oluştururuz. Veya Paint nesnelerimizi burada oluştururuz.

onSurfaceChanged — Farklı saat boyutları olduğu için saatin width ve height değerleri cihazdan cihaza değişkenlik gösterebilir. Bu yüzden bu method içersinde saatin width ve height değerlerini almamız ve tutmamız gerekir. Bu method da onCreate methodu gibi başlangıçta bir kere çağrılır.

onDraw — Sürekli çalışacağımız method ve asıl işi yapan method burası. Bu methodda çizme işlemleri gerçekleştirilir ve bir çok kez çağrılır. Bir çok kez çağrıldığı için de yukarıda bahsettiğim art arda gelen resimlerin hareket eden dinamik bir hal alması olayı gerçekleşir.

onDraw methodu sürekli çağrılan bir method olduğu için bu methodu olabildiğince hızlı tutabilmek için burada resim boyutlandırması ya da nesne oluşturma işlemleri kesinlikle yapılmamalıdır. Böylece daha akıcı animasyonları elde edilir. Nesne oluşturma ve resim boyutlandırma ve bu gibi işler onCreate ve onSurfaceChanged gibi bir kez çağrılan methodlarda yapılmalıdır.

res/drawable-nodpi/ — Kullanılacak kaynak resimler buraya taşınmalıdır.

Önemli componentleri açıkladık. Şimdi Water Watchface uygulamasını nasıl geliştireceğimize ve mantığına bakalım.

Saatteki bu koordinat sistemini eğer iyi anlarsak istediğimiz tasarımı o kadar kolay kodlayabiliriz. Çünkü yazılımda herşey mantığı doğru oturtmakla alakalıdır. Bu tasarımda şöyle bir beyin fırtınası yapalım. Dakikaya göre yükselen bir mavi alanımız var. Mavi alan yükseltikçe gri alanımız da azalıyor. Bu artma ve azalma işlemleri Y doğrultusunda gerçekleşiyor.

O zaman bu tasarımın en başına dönersek şu şekilde bir tasarım oluşturursak daha iyi anlayabiliriz.

Bu resmi çizmek için 2 dikdörtgen yeterlidir. Birincisi gri dikdörtgen , diğeri ise mavi dikdörtgen. Uygulamamızın genel mantığını oluşturduk. Şimdi kodlamasına geçebiliriz.

Paint Nesnelerinin Hazırlanması

Çizeceğimiz şekiller; Mavi dikdörtgen, gri dikdörtgen, dakika ve saat yazıları. Saatimizi ve dakikamızı çizerken farklı bir yazı fontu kullanacağız. O yüzden Typeface’lerimizi de tanımlamamız gerekiyor.

onCreate methodunda Paint ve Typeface nesnelerimizi oluşturalım ve kullanıma hazır hale getirelim.

Hesaplama ve Çizme

Çalışacak saatimizin width(genişlik) ve height(yükseklik) değerlerini alalım. Daha önce de bahsettiğimiz gibi bu işlemi onSurfaceChanged methodunda yapılıyor.

Artık onDraw methodumuzda çizim işlemlerini gerçekleştirebiliriz. Saat ve dakika değerlerini alalım. Bu değerleri saati ve dakikayı yazmak için kullanacağız. Ek olarak dakika değerini de saatin yüksekliği ile oranlayıp mavi ve gri dikdörtgenin oranını belirleyeceğiz. Böylece dakika değiştikçe mavi dikdörtgenin ve gri dikdörtgenin koordinatları değişecek.

Dikdörtgen çizmek için drawRect(int x, int y, int width, int height) methodunu kullanıyoruz. Bu methodun parametrelerinin hangi koordinatları temsil ettiğini iyi kavramak gerekiyor. Şu örnek gayet iyi açıklıyor.

Dakika ve Saat değerlerini aldıktan sonra çizim işlemlerimizi gerçekleştiriyoruz.

Mavi ve Gri dikdörtgenlerimizi çizdirdik. Şu anda uygulamamızı çalıştırdığımızda dakikaya göre artan bir mavi bir alanımız olacaktır.

Saat ve Dakika değerlerini saatimize yazdıralım.

Water Watch Face saatimizi oluşturduk. Uygulamanın kaynak kodlarına buradan ve market linkine buradan ulaşabilirsiniz.