Xamarin Custom Renderer

Bazen uygulamalarınızda her platformda farklı görünmesini isteyebilirsiniz veya platformlara özel görünümleri kullanmak isteyebilirsiniz. Bu özellikleri kullanabilmemiz  için Xamarin bize Custom Renderer ile sağlıyor. Çok kolay bir yöntem ile hem de. Eğer zaten bir java geçmişiniz varsa bu işlemlere hiç yabancılık çekmeyeceksiniz.

Platformlara özel olarak Custom Renderer yazmak için öncelikle o platformda bir klasör açıyorum. Bunu yapmamın sebebi kodları nereye yazacağımızı daha kolay tespit etmek ve düzeni sağlamak. Android için bir örnek göstereceğim için Android platformunun altından Custom Renderers adında bir klasör açıyorum. Bugün ki örneğimde entrylerin iOS ortamında farklı, Android ortamında farklı göstermesini sağlayacağım. Android ortamında açtığımız Custom Renderers klasörünün altında CustomEntryRenderer adında bir sınıf oluşturuyorum. Bu sınıfı entrylerimin nasıl gözükeceğini belirlemek için kullanacağım. Bu sınıfı açtıktan sonra entryleri değiştireceğimiz için yani platformlara özel bir görünüm kazandırmak isteğimiz için EntryRenderer dan kalıtım almamız gerekiyor. Sonrasında ise override yazdıktan sonra karşımıza, yazının başında da bahsettiğim gibi tamamıyla javada ki fonksiyonlar ve özellikler geliyor. Biz burada OnElementChanged metodunu seçiyoruz. Bu metodda yapacağımız ilk şey görünümünü değiştireceğimiz kontrolün olup olmadığına bakıyoruz. Yani biz entryleri değiştireceğiz ama ilk önce bir kontrol edelim entry  var mı ? yok mu ? Sonrasında ise klasik işlemler başlıyor. Değiştireceğimiz kontrolün nasıl görüneceğini ayarlıyoruz. Ben arka planına kırmızı renk verdim ve yazdığımız yazınında siyah olmasını istedim. Sizin kafanızda nasıl bir şey varsa ona göre uyarlayabilirsiniz. Tabi yapacaklarımız bununla da sınırlı kalmıyor çünkü bu sınıfın bir Custom Renderer olduğunu belirtmemiz gerekiyor.  Nasıl Dependency Services yazarken sınıfın başına bir tanımlama yaptık benzer bir şekilde Custom Renderer sınıflarına da yapmamız gerekiyor. Bunun için aşağıda ki kod parçasının ilk satırında bulunan kodu yazıyoruz. Burada verdiğimiz ilk tip hangi tür kontrolü değiştireceğimizi ikince tip ise ilk tip yerine hangi tipi kullanacağımızı belirtiyor. iOS için yine aynı işlemleri yapıp orada da nasıl bir görünüm elde etmek istiyorsak ona göre değişiklikler uyguluyoruz.

[assembly : Xamarin.Forms.ExportRenderer(typeof(Entry),typeof(CustomEntryRenderer))]
namespace XamarinCustomRenderers.Droid.CustomRenderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control!=null)
            {
                Control.SetBackgroundColor(Android.Graphics.Color.Red);
                Control.SetTextColor(Android.Graphics.Color.Black);
            }
        }
    }
}

Tabi bazen bütün entryleri değiştirmek istemezsiniz. Bunun için yine pratik bir çözüm var. Projemizin portable katmanında bir klasör açarız. Bu klasörleri projemiz daha derli toplu dursun diye açıyoruz. Yoksa ortaya da koyabilirsiniz kodları. Bu klasörün içine bir CustomEntryRenderer adında bir sınıf ekleyip entryden kalıtım alırız. Bu şekilde aslında bir entry sınıfı yaratmış oluruz. Ama bizim amacımız bir entry bütün platformlarda aynı olurken diğer bir entry ise bizim platformlara özel olarak görünmesini istediğimiz şekilde ekrana çıkmasını sağlamaktır. Bunun için bir sınıf oluşturup bu sınıfı entryden kalıtım alacak şekilde ayarladıktan sonra farklı platformlarda yazığımız rendererların başında tanımladığımız tiplerin ilkine bu sınıfı veririz. Bu şekilde amacımıza ulaşırız.

namespace XamarinCustomRenderers.CustomControls
{
    public class CustomEntry :  Entry
    {

    }
}

[assembly : Xamarin.Forms.ExportRenderer(typeof(CustomEntry),typeof(CustomEntryRenderer))]
namespace XamarinCustomRenderers.Droid.CustomRenderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control!=null)
            {
                Control.SetBackgroundColor(Android.Graphics.Color.AntiqueWhite);
                Control.SetTextColor(Android.Graphics.Color.Black);
            }
        }
    }
}

Yapmış olduğumuz projeye buradan ulaşabilirsiniz.