Xamarin Forms Radial Progress Kullanımı

Bu yazımda Manisa’da düzenlenen #HackWithMVP hackathonunda geliştirdiğimiz uygulamada kullandığımız bir Component’in Xamarin.Forms ile nasıl kullanacağınızdan bahsedeceğim. Uygulamanızda bir Progress göstermek istediğinizde güzel bir UI ile gösterebileceğiniz bir kontrolü XAML içerisinde kullanabileceğiniz hale getirmeniz için ne yapabilirsiniz hemen ona bakalım.

Öncelikle Radial Progress componentini edinelim. İsterseniz siteden indirip referans edebilirsiniz fakat tavsiyem Visual Studio üzerinden indirip eklemenizdir. Bunun için ne yapmanız gerektiğini resimlerle anlatacağım.

Android projesinde Components e sağ tıklayıp Get More Components e tıklıyoruz. Eğer Xamarin Account unuz ile giriş yapmadıysanız size bir hesap giriş sayfası gelecektir. Xamarin hesabınız ile giriş yaparak devam edelim ve Ardından Components sayfası gelecektir. Bu sayfada arama bölümüne Radial Progress yazalım. Ardından listede Radial Progress ı seçelim.

Seçtikten sonra karşımıza gelecek Radial Progress sayfasının detaylarında Add to App i seçelim ve Android projemize ekleyelim. Eğer bu component i iOS üzerinde de kullanacaksanız aynı işlemleri iOS projesine de yapalım. Bu işlemleri tamamladıktan sonra artık kod yazma zamanı :)

Portable Class Library projesine bir Controls klasörü oluşturup içerisine RadialProgressControl class ı oluşturalım. İçerisine kullanacağımız bindableproperty leri tanımlayalım. Böylelikle XAML tarafında data bind edebiliriz.

Class ımızı oluşturduktan sonra sıra geldi Custom Renderer yazmaya. iOS ve Android için Custom Renderer yazarak Radial Progress ı bağlayabiliriz. Android projemizin içerisine Renderers açalım ve içerisine RadialProgressControlRenderer class ı oluşturalım. Custom Renderer ı tanıması için assembly ile bu class ın Renderer olduğunu ve hangi control çağrıldığında hangi renderer çalışması gerektiğini belirtmemiz gerekir. Eğer bu işlemi yapmazsak control ü derlerken Android veya iOS Custom Renderer a girmeyecektir ve control derlenemeyecektir.

Namespace in üzerine ExportRenderer ile tanımlama yapıyorsunuz. İlk parametrede sizin hangi render edilecek kontrolünüze odaklanmanızı istiyor. İkinci parametrede ise hangi Renderer ın çalışması gerektiğini istiyor. Bu class ların namespace leri farklı olduğu için using bölümüne referans olarak ekleyebilir veya direk namespace altından çağırabilirsiniz. Şimdi Renderer class ımızı yazalım.

Öncelikle controlümüzü tanımlıyoruz. Constructor içerisinde controlümüzü tanımlayıp controlü sahiplenecek Context i tanımlıyoruz. Ardından OnElementChanged içerisinde Render edilen control e bizim tanımladığımız property değerlerini Native control e set ediyoruz. Aynı zamanda property değerleri değiştiğinde bu propertylerin değişmesi içinde Element_PropertyChanged event i içerisinde değişen property değerlerini set ediyoruz. Böylelikle Android tarafındaki Custom Renderer ı tamamlamış oluyoruz. Sıra geldi iOS için.

Yine aynı işlemleri iOS tarafına da yapıyoruz. Ufak değişikliklerle iOS Custom Renderer ı tamamlayalım.

Android Custom Renderer ile arasında iki tane fark var. Bunardan bir tanesi Constructor da control ü tanımlarken herhangi bir Context veya iOS için ViewController istemedi. Bir diğeri ise ProgressColor u convert ederken Android için .ToAndroid derken iOS için .ToUIColor olarak değişiklik yaptık.

Artık controlümüzü XAML sayfamıza ekleyebiliriz. Öncelikle XAML sayfamızda ContentPage e bir namespace alanı tanımlamamız gerekir. Namespace i tanımlayarak ilgili control ü tanımlayabileceğiz.

Yıldızlar içerisine aldığım satır bizim tanımladığımız namespace satırı. Şimdi biz controls altından RadialProgressControl ü alabiliriz.

Controlümüzü sayfaya tanımladık. Bu controlümüzü bir StackLayout içerisine koyalım. İçerisine de bir Start butonu ekleyelim ve güzel bir loading yapalım. Button ve RadialProgressControl e isim verelim.

XAML sayfamızı bu şekilde hazırladık. Şimdi XAML Codebehind a yani cs dosyasına giderek butonun click event ine bir Timer ekleyelim ve loading yapalım.

Evet butona ilk tıklandığında buttonu devre dışı bırakıyoruz. Ardından Timer ımız başlıyor. Eğer Value değeri Maximum a eşit olursa butonumuzu aktif ediyoruz ve Timer ı durduruyoruz. Eğer tam tersi ise RadialProgress ın Value sunu arttırıyoruz ve Timer devam ediyor. Böylelikle güzel bir Loading oluşturmuş olduk.

Kodları Gtihub üzerinden bulabilirsiniz arkadaşalr. Xamarin ile ilgili yaptığım tüm örnek projeler aşağıdaki XamarinSamples repomda bulabilirsiniz

https://github.com/peacecwz/XamarinSamples

Bu yazımda da benden bu kadar. Umarım yararlı bir yazı olmuştur. Bir sonraki yazı ile görüşmek üzere :)

Jedi Software Engineer @Trendyol, Microsoft Student Partner, Yildiz Technical University, My kid @Scodeapp

Jedi Software Engineer @Trendyol, Microsoft Student Partner, Yildiz Technical University, My kid @Scodeapp