Xamarin AutoComplete Input

Merhaba,

Genelde Xamarin kullanarak mobil uygulama geliştirmeye başladığımızda bazı durumlarda platform spesifik kod geliştirmemiz gerekebiliyor. Forms katmanının desteklemediği bir özellik veya bluetooth bağlantısı gibi.. Bu gibi durumlarda Android ve iOS spesifik (CustomRenderer, DependencyService) geliştirme yapmak yerine Forms katmanında veya 3th party paketler kullanarak hızlı bir şekilde çözmeye çalışıyoruz. Forms katmanında çözmek en son tercihiniz olsun 🙂

3th party paketlerde de karşımıza belli başlı firmalar ve o firmaların geliştirdiği kontroller çıkıyor. Fakat en ufak bir bug’ı 3 ay beklediğimiz zamanlar da oldu (Tamamen kendi tecrübem) Çok uzun bir zamandır 3th party kullanmayı bıraktım ve kendi ihtiyaçlarımı tamamen Android ve iOS katmanlarında yazıyorum .(Belirli bir süre sonra elinizde çok fazla custom tool olacaktır) Xamarin %100 API desteği verdiği için Android ve iOS projelerinin tüm hakimiyeti de bende oluyor!

Bu örneğimizde Xamarin.Forms projelerimiz için AutoCompleteEntry yapacağız. Android tarafında AutoCompleteTextView olduğu için işlerimiz daha kolay olacak.

Yeni bir Xamarin.Forms projesi açıp, Forms projesinde CustomControls adında bir klasör oluşturdum. İçerisine de AutoCompleteEntry classını oluşturdum.


namespace AutoCompleteSample.CustomControls
{
    public class AutoCompleteEntry : View
    {

    }
}

Şimdi sadece Android spesifik CustomRenderer yazacağız.


[assembly: ExportRenderer(typeof(AutoCompleteEntry), typeof(AutoCompleteEntryRenderer))]
namespace AutoCompleteSample.Droid.CustomRenderers
{
    class AutoCompleteEntryRenderer : ViewRenderer<AutoCompleteEntry, AutoCompleteTextView>
    {
        string[] Names = new string[] { "Yiğit", "Xamarin", "Microsoft", ".NET" };
        private readonly Context _context;
        public AutoCompleteEntryRenderer(Context context) : base(context)
        {
            _context = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<AutoCompleteEntry> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || this.Element == null)
                return;

            var autoComplete = new AutoCompleteTextView(_context);
            var adapter = new ArrayAdapter<String>(_context, Resource.Layout.ListItem, Names);
            autoComplete.Adapter = adapter;
            SetNativeControl(autoComplete);
        }
    }
}

Android Renderer üzerine biraz konuşmamız gerekecektir. Bildiğiniz gibi Xamarin bize CustomRendere adında harika bir yardımcı arkadaş veriyor.
Bu arkadaş istediğimiz Forms kontrolünü istediğimiz platform’un kontrolüne çevirebiliyor. Xamarin’in büyüsü de buradan geliyor 🙂

[assembly: ExportRenderer(typeof(AutoCompleteEntry), typeof(AutoCompleteEntryRenderer))]

AutoCompleteEntry kullandığım her yerde AutoCompleteEntryRenderer classı render olacaktır.

Dikkat ettiyseniz Forms tarafında oluşturduğum kontrolü View classından türerttim. Çünkü Android katmanında ViewRenderer kullanacağım. Yani bir View’i ViewRenderer yardımıyla AutoCompleteTextView’e çevirmek istiyorum. SetNativeControl, buradaki büyüyü kazandıran method diyebiliriz.

ViewRenderer<AutoCompleteEntry, AutoCompleteTextView>

AutoCompleteEntry View’i bir AutoCompleteTextView Native View elementidir.

Çok ufak dokunuşlar kaldı..

Arama yapmaya başladığımız zaman sonuçların listeleneceği bir View listesine ihtiyaç duyacağız. Bunun için Android layout klasörünün altına LıstItem adında bir xml dosyası oluşturdum.


<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textColor="#000">
</TextView> 

var adapter = new ArrayAdapter<String>(_context, Resource.Layout.ListItem, Names);

Names: Arama yapılacak verileri tutan String array

Resource.Layout.ListItem: (TextViewResourceId) Arama yapıldıktan sonra sonuçları rendere edecek TextView layout Id

Kullanalım..

ContentPage xmlns eklemem gerekiyor. xmlns:controls=”clr-namespace:AutoCompleteSample.CustomControls;assemby=AutoComplateSample”

    <StackLayout>
        <controls:AutoCompleteEntry />
    </StackLayout>

Devamında Forms tarafında Bindable Property yazarak Android tarafına data göndermeyi inceleyeceğiz.

Yiğit ÖZAKSÜT

MVP, MCT, Xamarin Developer, Consultant & Architect

Yorum Gönder