Android 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.
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.
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.
Ö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.
Sağa Dayalı Logo İçeren Buton
Daha çok enine uzaması muhtemel görsel ögeler için tercih edilebilir.
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.
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…
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 🙂