PSD’den XAML’a Login Page Tasarımı (Xamarin Forms)

En son iOS tarafını bitirmiştik. Şimdi sıra geldi Android tarafına. Android tarafında işler biraz daha farklı. Mesela iOS tarafında Entry’imizin içine kolay bir şekilde resim koyduk fakat böyle bir özellik Android EditTextView’de yok o yüzden izleyeceğimiz yol biraz farklı olacak.

Bu yazimda Android Emulator olarak API 22 Level XXHDPI cihazi kullandım. Bu yazıya baslamadan once part-1 kısmından uygulamamızı indirelim.

Şimdi indirdiğimiz uygulamayı açalım ve Droid projesini StartUp olarak ayarlayalım ve test edelim.

Üzerinde calışmamız gereken yerleri özetleyecek olursak:

1. Status bar(Rengi istediğimiz gibi değil)
2. Title(Olması gerekenden küçük görünüyor)
3. Logo(Olması gerekenden küçük görünüyor)
4. Entry(İçinde resim görünmüyor ve style olarak beklenen dizayn değil)
5. Button(Hepsi büyük harf, CornerRadius sorunu var, ve biraz elavated)
6. Label(Alt çizgili değil ve olduğundan küçük görünüyor)
7. Genel Layout Ayarları(Elemenler arasındaki mesafe)

Göründüğü gibi epey bir işimiz var. Şimdi Hepsine sırasıyla bakalım.

1. Status Bar

Status barın rengi mavi ve bunu değiştirmemiz gerekiyor. Bunun için Droid projesinin Resources\values\styles.xml dosyasını açıyoruz. Yapmamız gereken colorPrimaryDark attribute’unu #323542 değerine ayarlamak. Daha fazla bilgi için Material Design.

Yukaridaki resim MainActivity.cs’tendir. Bizim işimiz styles.xml dosyasının içinde MainTheme isimli style objesini bulup istediğimiz değişikliği yapmak. Asağıda değişiklik olmadan önceki halini görüyorsunuz.

<item name=”colorPrimaryDark”>#323542</item> item tagini ekleyerek MainTheme.Base colorPrimaryDark attribute’unu override ediyorum.

Simdi test edelim.

Bu durumu çözdük şimdi gelelim sıradakine.

2. Title

Part-1’de bahsettiğim gibi bunu değisik yollardan çözebiliriz. Device.OnPlatform kullanıp çözebiliriz, Custom Renderer yazabiliriz, hatta Custom Effect bile kullanabiliriz. Ben burada Device.OnPlatform’dan faydalanacağım.

PCL projesinden LoginPage.xaml dosyasını açalım. Label’ımız iOS projesinde iyi görünüyordu o yüzden iOS için herhangi bir ayar düşünmüyorum(Acaba!).  Font Size olarak 20 dedim Android tarafında. Gercekte text size şu anda en büyük sorunlardan biri ve daha bunun için geçerli bir çözüm bulunmamakta yada ben bilmiyorum. Asağıdaki ayarı yapıp uygulamamızı test edelim.

Title işini şimdilik çözdük.

 3. Logo

Kullanmış olduğumuz Android cihazımızın density’si yaklaşık 2.75’tir bundan dolayıdır ki 400px(400/2.75~=145) resmimiz 145px gibi görünür. Bunun için aslında Platform specific çözüm en güzeliydi ama şu ana kadar resimleri PCL’den okuduğumuz için bunu değiştirmek istemiyorum. Sizler bunu test edebilirsiniz. Android tarafinda Image objemin HeightRequest degerini 300 ve WidthRequest degerini 250 degistiriyorum. Bu işlemi yaptıktan sonra test ediyorum.

Logomuz da istediğimiz gibi görünüyor.

4. Entry

Bunu yapmanın tek yolu tabiki Custom Renderer yazmak. iOS tarafında yazdığımız Custom Renderer’i hatırlayacak olursanız orada EntryRenderer Class’ından subclass almıştık çünkü UITextField tek başına işimizi görüyordu. Android tarafında böyle bir lüksümüz yok. Compound control denilen birden fazla view tipi kullanılarak hazırlanan control hazırlayacağız. Asağıdaki resim kısaca ne yapacağımızı anlatıyor.

Bu Layout’u Android projemizin içinde hazırlamamız gerekiyor. Resources/layout klasörünün içinde LoginPageEntryLayout.axml oluşturuyoruz.

Bu dosyayı oluşturduktan sonra açalım ve resimdeki gibi gerekli değişiklikleri yapalım.

Isaretlediğim width ve hight değerleri aslında runtime değişecek fakat bizim yinede bu değerleri koymamız gerekiyor. Bu sadece layout kısmıydı şimdi Android projeminizin içinde CompoundControls diye bir klasör oluşturup içine AndroidLoginPageEntry.cs adında bir class oluşturalım.

Şimdi gelelim ne yazacaz bu class’in içine. Bu class’imizi LinearLayout’tan subclass aliyorum.

Frame, Image, birde EditText’si public property olarak koyalım. Bunlar bir kere set edildikten sonra birdaha değişmeyeceği için readonly yapıyorum. Sonra bunlari constructor içinde initialize edelim. Sonuç olarak class’ımızı aşağıdaki gibi hazırlayalım.

Bunu bitirdikten sonra CustomRenderers klasörünü Android projesi içinde oluşturalım. Bu klasörün içine LoginPageEntryRenderer class’ını oluşturalım. Buradaki en büyük farklılık ViewRenderer class’ından subclass almamız. OnElementChanged methodu artık Control property’sini initialize etmeden cağıracak bu yüzden Control objesi(AndroidLoginPageEntry objesi oluyor) null olarak bize gelecek.

Bunu yapıp test edelim.

Dikkat ederseniz password olarak gosterme işide calışıyor. EditText’imizin içinde resim yok şimdi bunu koyalım ve test edelim.

Resimlerde geldi biraz alignment problemi var ama onuda ilave ayarlarla düzelteceğiz. EditText’lerimizin köşelerden oval olmasını istiyoruz. Fakat bu ozellik EditTextView’de default olarak bulunmuyor. Çözüme gelince iki yolumuz var ya kodla yapacaz yada xml drawable oluşturacağız. Burada xml’i tercih etmedim, kodla yapmak kolayıma geldi ama sizler onuda deneyebilirsiniz sonuc degismeyecektir.

Şimdi test edip sonuca bakalım.

Köşelerdeki ovallik işini hallettikten sonra gelelim resimlerin konumlarının düzeltilmesine. iOS tarafında hatırlayacağınız gibi Width ve Height değerlerinin kesin olarak belirlendiği zamanda resimlerin yerlerini ayarlamamız gerekiyor. Bunun için OnElementPropertyChanged(…) metodunu override ediyoruz.

Bu ayarlarıda yaptıktan sonra test edelim.

5. Button

Tasarımımız güzel görünmeye başladı. Sırada Butonumuz var. iOS tarafında hiç uğraşmamıstık bu butonla ama Adroid tarafında uğraşmamız gerekiyor. Dikkat ederseniz boyutu biraz küçük, içindeki text büyük harfler ile, ve butonumuzun altında elevation var. Bunlari cozmek icin Cutsom Renderer hazırlayacağız. Öncelikle PCL projemizin içindeki CustomRenderers klasörünün içinde SigninButton oluşturalım ve bunu Button class’ından subclass alalım.

Şimdi LoginPage.xaml içideki sign in için kullanğımız butonu yeni yaptığımız buttonla değiştirmek.

Şimdi Android projemize gidip CustomRenderers klasörğ içinde LoginPageSigninButtonRenderer adında bir class oluşturuyorum ve bu class’ı ButtonRenderer class’ından sub class alıyorum ve gerekli değişiklikleri yaptıktan sonra test ediyorum.

Sign in button’da istediğimiz gibi. Label’lar ile devam edelim.

6. Label

Font size biraz küçük geldi bu tarafta. Bu olayı Custom Renderers ile çözebiliriz, Effect yazabiliriz. Ben en kolayını seçip OnPlatform tag’ını kullanacağım PCL projesi içinde.

Şimdi sağ alt koşedeki label’ın underline effect’ini hazırlamak. Routing Effect class’ı PCL projesinde hazır ve Platform specific Effect’imizi işaret ediyor. Bu sebepten dolayı PCL’de her hangi bir değişiklik yok. Şimdi Android projesi icerisinde CustomEffects klasörü oluşturup içerisine UnderlineEffect.cs adında class oluşturup PlatformEffect class’ından subclass alıyoruz. Gerekli değişiklikleri yaptıktan sonra uygulamamızı test edelim.

Label’ımızı alt çizgili yaptıktan sonra genel değişiklikleri yaparak devam edelim. Elementler arasındaki boşluklar tam dizaynımızdaki gibi değil.

7. Genel layout ayarlari

Oncelikle title ile logo arası çok açık bunu düşürelim biraz. Bunun icin logonun HeightRequest degerini 300’den 200’e düşürüyoruz.

Label’lar ile button arasindaki boşluk biraz az bunun değerini 60 yapalım ve uygulamamızı test edelim.

Herhalde buraya kadar iyi geldik. Sonunda istediğimiz sonuca ulastık. Windows Phone tarafına girmeyi düşünmüyorum. Sonuçta en populer olan 2 platformu inceledik. Adroid tarafında EditText’imizin Text property’sini PCL tarafından code ile degiştirmeye calişirsak Android tarafında bunun değişmediğini göreceksiniz, veya tam tersi Android tarafında değistirseniz PCL tarafında bu değisikliği göremeyeceksiniz. Bunun sebebi Android tarafında yazmış olduğumuz LoginPageEntryRenderer  class’inda bu bağlantıları yapmadığımızdan kaynaklanıyor. En baştada dediğim gibi sizlere sadece dizayn tarafını göstermek istediğim için bu islemi sizlere bırakıyorum.

Şimdi son olarak iOS tarafına bakalım. Hala istediğimiz gibi görünüyor mu?

Title ve logo kayboldu. Bunun sebebi bu ayarları OnPlatform tag’ı kullanarak yaptık fakat iOS için herhangi bir değer atamadık. Şimdi title ve logo için gerekli değerleri verip tekrar test edelim.

Bu düzenlemeyi de yaptıktan sonra bu yazıma son verebilirim.

Tekrar gorusmek üzere:)

Not: Sorularinizi mail atabilirsiniz