Android, Yazılım

9-patch Çizim Editörünün Kullanımı (WYSIWYG Editor)

Android_tugrul_9patch_intrologoAndroid uygulama geliştirmeye başladıktan çok sonra öğrendiğim bir yöntem *.9.png uzantılı dosyalar ve bunları oluşturmak için kullanılan araç “Draw 9-patch” (WYSIWYG Editor).  Standart UI ögelerini  kullanırken pek ihtiyaç duymadım belkide. Ama  bazı günlerim oldu, “ya şu butonun şurası sabit kalsa da gerisi uzayabilse genişleyebilse, şu icon şöyle bozulmadan bir büyüse”  dediğim çok oldu.

Kendimce yöntemler buldum bir şekilde. Farklı boyutlarda ögeler oluşturdum, xml bileşenler oluşturdum işimi gördüm. Geriye dönüp baktığımda ise aslında yaptıklarımın büyük bir bölümü daha kısa sürede ve az çaba harcanarak 9-patch vb.  araçlarla yapılabilecek işlermiş.

İlk bakışta işe yarıyormuş izlenimi yaratmayan; ihtiyaç duyulduğunda ise önemi anlaşılan *.9.png uzantılı dosyalar ve bunları oluşturmak için kullanılan editörün detayları hemen aşağıda. 😉

Uygulamayı Android SDK>Tools>draw9patch yolunu izleyerek açalım. Açılışta gelen ekrana kullanmak istediğiniz bir imajı sürükleyip bıraktığımızda aşağıdaki gibi bir çıktı elde edeceğiz.

Editörde imaj kenarında bulunan 1 piksellik çerçevede; Sağ&Alt Kısım padding alanlarını, Sol&Üst Kısım ise ölçekleme alanlarını temsil eder.  Show bad patches diyerek ölçeklendirme alanlarınızı daha iyi görebilirsiniz. Ayrıca ölçeklemek için yapmış olduğunuz çizimleri Shift tuşunu kullanarak geri alabilirsiniz.

Henüz bir düzenleme yapmadığımız bu çıktıda;  imajı direk olarak kullandığımızda genişleme ve uzamalarda nasıl bozulduğunu sağ bölümdeki önizleme detayından görebiliriz.

 

Android_tugrul_9patch_firstview_s

 

Imajımızı ortadaki nota sembolü sabit kalacak şekilde düzenleyelim. Düzenlemelerde dikkat etmeniz gereken; eğer bir nesneyi ortalamak istiyorsanız sağ-sol ve alt-üst ikililerinden aynı pikselde ölçeklendirme alanı oluşturmanızdır. Bu değerler aynı olmadığı durumlarda sağa-sola-aşağı ve yukarı kaymalar söz konusu olacaktır. Ayrıca ölçeklendirilebilir alanı -tek renkler hariç- ne kadar uzun tutarsanız ölçeklendirme işleminden sonra imaj homojenliği daha iyi korunmuş olur. Düzenlenmiş örnek ekran çıktısını aşağıda görebilirsiniz.

Android_tugrul_9patch_afteredit_s

Daha önce denemiş olduğum ;Paylaş Butonu, Özelleştirilmiş Spinner ve Sağ Logolu Buton çalışmalarını örnek olması açısından aşağıdaki ekran çıktılarından inceleyebilirsiniz.

 

Paylaş Butonu

 Orta kısımda yer alan SHARE yazısının ölçeklendirmeden sonra da ortalanması için sağ ve sol kısmında eşit miktarda alan seçildiğine dikkat ediniz.

Android_tugrul_9patch_customshare_s

 

 Özelleştirilmiş Spinner

Standartlarda bulunan ögelerin benzerleri için, minimum en boy ölçüsü çok önemli. Büyük imaj yaptığınızda düşük çözünürlüklü cihazlarda sıkıntılar yaşayabilirsiniz.

Android_tugrul_9patch_customspinner_s

 

Sağa Dayalı Logo İçeren Buton

Daha çok enine uzaması muhtemel görsel ögeler için tercih edilebilir.

Android_tugrul_9patch_custombutton_rightlogo_s

 

Tüm bu işlemlerden sonra çalışmalarınızı kaydetmeyi unutmayınız ;). 

Okuduğunuz için teşekkürler 😉 İyi geceler, hayırlı ramazanlar, keyifli geliştirmeler.

 

Kaynakça: [1] [2] [3] [4]

2 Comments

  1. Blog çok güzel olmuş öncelikle ellerine sağlık, Stackoverflow’da gezinirken denk geldim bakayım bi dedim 🙂

    Ufak bir not ekleyeceğim bu konuyla ilgili, 9patch kullanımlarında mümkün olduğunca gradient’li image kullanmayın aksi takdirde gradient’i olması gerektiği gibi sağlamanız mümkün olmayacaktır çoğu cihazda. Ama illa kullanılması gerekiyorsa -tasarımcınıza laf dinletemediyseniz :p- sol tarafın tamamen çizili olmasını öneririm, gradient etkisini çok daha az bozacaktır. Çünkü 9patch sistemi seçmiş olduğunuz alanı tekrar ettirerek görseli büyütmeye dayanır, bu durumda da gradient’li bir görselin yalnızca bir kaç pikselini tekrar ettirmeniz durumunda görsel bozulacaktır. Müzik ikonu üzerinden örnek vereyim, sol tarafı tamamen çizip gradient’li yapıyı background olarak kullanıp nota ikonunu ayrı bir image olarak ortalı bir biçimde koymak daha doğru bir yöntem olacaktır.

    Saygılar 🙂 ve kolay gelsin…

    1. Selam Yahya,

      Bloğumla ilgili düşüncelerin ve ilgili konuya yapmış olduğun katkıdan dolayı çok teşekkürler 😉 .

      Saygılarımla, iyi çalışmalar 🙂

Comments are closed.