Draw-9patch Nedir?

 

Bu problemi nasıl çözeriz derken karşılaştığımız bir araç oldu, 9-patch. Bu araç ile imajlara küçük noktalar koyarak anlaşılması çok da basit olmayan şekilde, imajların şekilden şekle döndüğünü gördük. Bu yazımda asıl bahsetmek istediğim konu da bu.

9-patch uygulamasının kullanımı hususunda çok sayıda İngilizce kaynak bulabilirsiniz. Hatta resmi sayfasından inceleyebilirsiniz.

Resmi sayfada basit bir anlatım mevcut ancak benim burada gördüğüm bazı eksiklikler var. Mesela örnek imajlarla yapılabilecekler çok da belirtilmemiş. Bu eksiklikleri kendimce gidermeye çalışacağım.

Peki, nerede bu Draw 9-patch?

9-patch aracı <android-sdk-dosya-yolu>/tools altında draw9patch.bat çalıştırılarak açılabilir. Karşınıza çıkan bu ekranda benim de kullandığım ve faydalı bulduğum özellikleri bir düğme örneğiyle anlatalım. Farz edelim elimize gelen bir tasarımda, aşağıdaki gibi bir düğme bulunuyor:
 

Peki, ya bu düğme daha geniş ekranlı cihazlara yüklenecek uygulamalarda genişlerse ya da içerisindeki yazı birden fazla satır olursa, köşelerindeki yuvarlıklar bozulacak mı? Ne yapmamız gerekir?
 

Öncelikle tasarımcıdan yardım isteyerek ya da kendimiz bazı araçlar kullanarak bu düğmenin genişleyebilecek en küçük halini hazırlıyoruz. Örnek için olması gereken en küçük hali aşağıda görebilirsiniz;

Ardından draw9patch uygulamasını bu küçük imaj için açıyoruz:

Başlangıç olarak renklerle işaretlediğim araçları kullanarak imajı genişleyen ekranlarda da bozulmamasını sağlayabiliriz.

İşaretli araçlarda siyah kısımda imajın kendisini görüyoruz. Aynı siyah kısımda, genişleme durumunda hangi alanın genişlemesi, buton üzerine yazı yazılması veya içerik eklenmesi durumunda içeriğin kenara olan uzaklığını belirteceğimiz bir piksellik boş alan bulunuyor.

Kırmızı kısımda ise imajın yatay, dikey ve her iki yöne genişlemesinin önizlemesini veren, genişleme durumunda nasıl görüneceğini gösteren alan mevcut. Bu alanı belirleyici noktaları koyarken sürekli izlememiz gerekecek.

Yeşil kısımda ise kırmızı kısımda ilk açılışta iki kat büyüme olan durumu 6 kat büyümeye kadar çekebiliyoruz. Ben bu ayar düğmesini sürekli sağa sola kaydırarak genişlemenin mantığının nasıl olduğunu daha iyi anlıyorum. Sizlere tavsiyem, bu ayar düğmesini kaydırarak ve noktaları koyarak ilerlemeniz olarak.

Turuncu kısım ise yine önizleme kısmı olan kırmızı kısımda, içeriğin sınırlarını gösteren şeffaf mavi bir tabaka oluşmasını sağlayacak. Bu mavi tabakayı şöyle düşünebiliriz. Mesela bu imajı bir layout arka planı olarak tanımlarsak, layout içerisindeki elemanlar bu mavi alan kısmının dışına çıkamayacak. Ya da yine örnekteki gibi bir düğme arka planı olarak tanımlarsak, düğme üzerine yazılacak yazı turuncu kısmın işaretlenmesiyle çıkan mavi şeffaf alanın dışına çıkamayacak.

Gelelim nokta koyma ile genişleyebilir düğmemizi oluşturmaya:


Yukarıda da açıklandığı gibi koyacağımız noktalar düğme (buton) imajının etrafındaki bir piksellik boşluklardır ve bu boşlukların hangi kıyı olduğu görevini de belirler.

Burada bizim yapmak istediğimiz düğmenin köşeleri yuvarlak olduğundan ve genişleme durumunda bozuluyor olmasından, Android işletim sisteminin anladığı dilden belirli noktaları koyarak, adeta ”kardeşim genişle ama köşelere dokunma” demek.

Bunu yapmak için ilk olarak genişleyecek satırı seçiyoruz. Genişleyecek satır sekmesinde ortada bir nokta belirlediğimizde zaten önizleme bölümünde oluşan değişikliği fark edeceksiniz.

Mesela benim seçtiğim nokta biraz yukarıda olduğundan genişleme resimde kırmızı ile işaretlediğim yatay bir piksellik kısımda olacak ve köşeler aynı kalacağından önizleme alanından da gördüğümüz gibi düğme imajında genişleme durumunda köşeler bozulmayacak.
 

Yatayda yapılan işlemin aynısını dikey için de uyguluyoruz.
 

Burada da resimde işaretlediğim kısım yatayda genişliyor ve sonuç aşağıdaki gibi oluyor.
 

           

Aslında amacımıza ulaştık ve düğme imajının yatayda, dikeyde ve her iki yönde genişlemesi durumunda aldığı halleri önizleme penceresinden bozulmadığını gördük. Burada tavsiyem iki kat ile altı kat arası ayar düğmesini gezdirin ve genişlemenin nasıl gerçekleştiğini görün.

Peki, nasıl oldu da imajın alt kısmı daha koyu renk kaldı diyebilirsiniz. Bunu gerçekleştirmek için noktayı koyduğumuz yerin önemli olduğunu görmek için noktanın yerini değiştirerek neler olduğunu görüyoruz. Mesela noktayı aşağı kısma koyduğumuzda;
 

 

Önizleme penceresinden baktığımızda, artık yukarıdaki resimde de işaretlediğim gibi, koyu kısmın genişlemeye başladığını görüyoruz.
 

           
 

Genişleme kısmını hallettikten sonra bu nokta koyulmamış kenarları kullanarak içeriğin kenarlara olacak uzaklığı ayarlayacağız. Yazının önceki kısımda bahsettiğim gibi böyle bir düğme tasarladıktan sonra, düğmenin üzerine verilecek yazının köşeleri kapsamaması ve kenarlara dayanmaması gerekmekte. Aksi takdirde aşağıdaki gibi kötü bir görüntü oluşacaktır.
 

Artık küçük bir imaja nasıl genişleyeceği bilgisini 9-patch aracılığıyla verip büyük geniş düğmeler yapabiliyoruz ancak üstte görüldüğü gibi yazılar kenara çok yakın ve uygun yükseklikte bir yazı olmaması durumunda yazıların köşeye gelme ihtimali var. İşte bunu engellemek için içerik alanlarını dikeyde ve yatayda seçeceğiz. Bunun için “Show content” seçeneğini işaretliyoruz ve önizleme bölümünde mavi şeffaf bir alan çıktığını görüyoruz.
 

Bu önizlemeden anladığımız şu olmalıdır; “bu imajı düğme arka planı yaparsam, üzerine yazacağım yazı bu alanı dolduracaktır”. İşte bu yüzden bizim yazıların köşeye gelme ihtimali var. Bundan sonra yapmamız gereken bu alanı küçültmek ve köşelerin bu alana gelmesini engellemek olacak. Bunun için önce dikey içerik alanı işaretlediğimiz yere noktalar koyarak içerik alanını, dolayısıyla şeffaf mavi alanı küçülteceğiz.
 

Yukarıdaki gibi seçimimizi yaptığımızda, önizleme alanında mavi kısmın artık köşeleri kapsamadığını, sadece işaretlediğim kısmı kapladığını göreceksiniz.
 

     
 

Bunun anlamı, bu imaj arka plan olarak kullanıldığı elementin içeriği doldurulursa ve genişlerse, ne kadar genişlerse genişlesin içerik bu alanda kalacaktır.

Aynı işlemi yatay içerik belirleme alanında noktalar seçerek, içeriğin en kenara yaslanmasını önleyeceğiz.
 

Yine önizleme bölümünden mavi şeffaf alanın daha da küçüldüğünü göreceğiz. Eklediğimiz noktaları kenara kadar eklemeyerek içeriğin köşe ve kenarlara eklenmesini engellemiş olduk.

           
 

Bu şekilde nasıl genişleyeceği ve içeriğinin kenarlara olan uzaklığı noktalar koyarak ne kadar olacağını imaja ve dolayısıyla Android işletim sistemine bildirmiş olduk.

İşaretlediğimiz imajı kaydettiğimizde uzantısına “.9” ifadesinin eklenmiş olduğunu göreceğiz. Bu isimlendirme işletim sisteminin bu imajın 9-patch imajı olduğunu anlamasını sağlıyor. Değiştirilmesi vaye silinmesi durumu hatalara sebep olacaktır. Bundan sonra bu imajı drawable dosyalarından uygun olana koyup bir düğme arka planı olarak ayarladığımızda, ekran boyutu düşünmeksizin, tasarımımızın köşelerinin bozulmayacağını, yazının hiçbir zaman kenarlara değmeyeceğini biliyoruz ve farklı ekran boyutlarındaki bozulmalardan oluşacak kötü geri bildirimlerden kurtuluyoruz.
 

 

Biz bu işlemleri yaparak ne kazandık, neden bir düğme için bu kadar uğraştık sorusunu duyar gibiyim.

Kazanımlarımız şunlar;

Bunun gibi onlarca imaj bir projede olabilir ve biz küçük bir imajla, istediğimiz genişlikte ve uzunlukta düğmeler yapabiliyoruz. APK boyutu çok daha düşük oluyor. Tasarım bozulmalarını engelliyoruz.

Bir de karmaşık bazı tasarımları birden fazla element kullanmadan sadece birkaç nokta koyarak yapabiliyor ve performanstan kazanıyoruz. Bundan sonraki blog yazımda 9-patch aracını bildiğinizi varsayarak, 9-patch gibi düşünerek karmaşık tasarımları nasıl basitleştireceğimize örnekler vereceğim.

Bu yazıyı okuduktan sonra noktaları değişik yerlere, değişik sayılarda ve konumlarda koyarak, 9-patch aracının önizleme kısmındaki değişiklikleri takip etmeniz ve özellikle imajın 2 ila 6 kat arası değişimini izleyerek noktaların ne işe yaradığını anlamanız çok faydalı olacaktır.