Cześć,

Zgodnie z obietnicą w poprzednim poście, dziś chciałbym się z Wami podzielić kolejną ciekawą funkcjonalnością, którą jakiś czas temu udało mi się wdrożyć. Dotyczy ona wykorzystania kontrolki SearchBar w Toolbarze.

 

 

Niestety, wymaga to nieco większej roboty, ponieważ sam framework Xamarin.Forms nie dysponuje takim zasobem.

Na szczęście twórcy frameworka zadbali o to i dali możliwość tworzenia własnych kontrolek, dzięki mechanizmowi Custom Renderers.

Dziś stworzymy sami pod podstaw nową stronę (analogiczną do ContentPage, NavigationPage, itp.) z wbudowaną kontrolką SearchBar w Toolbarze.

 

Do dzieła!!!

Najpierw zajmiemy się platformą Android.

  1. W folderze layout tworzymy plik z rozszerzeniem axml.

1

2. Następnie tworzymy analogicznie plik w folderze menu.

2

Dzięki temu w toolbarze pojawi się ikonka „lupy”, za pomocą której ukaże się EditText umożliwiający wyszukiwanie elementu.

3. Tworzymy folder Renderers, a w nim klasę dziedziczącą po PageRenderer. Następnie implementujemy funkcjonalność kontrolki.

 

534

4. W klasie MainActivity tworzymy statyczny obiekt klasy Toolbar, a następnie przesłaniamy metodę OnCreateOptionsMenu(IMenu menu).

6

5. Wracamy do projektu części wspólnej i tu implementujemy właściwości kontrolki, z jakich chcemy korzystać, np. Text czy też Command. Co ciekawe nazwy właściwości mogą być dowolne. Ja zastosowałem takie jak poniżej.

7Screenshot_3

I to wszystko. Teraz możemy korzystać z kontrolki w code behind lub pliku XAML (co ja przeważnie stosuję).

Ja zaimplementowałem stronę wyświetlającą zwykły tekst.

9.png

Ostateczny efekt wygląda tak:

 

Skoro mamy już możliwość tworzenia strony „SearchPage” na platformę Android wypadałoby dać ten sam efekt dla iOS.

 

Co należy zrobić?

Wystarczy analogicznie zastosować punkt 3, z tym że robimy to po części projektu iOS. Ponieważ na platformie iOS nie możemy implementować widoków w pliku XML, w związku z tym robimy to w klasie SearchPageRenderer.

Teraz możemy zobaczyć jak wygląda to na systemie iOS.

 

Mam ogromną nadzieję, że dzisiejszy wpis bardzo się wszystkim spodoba, a zwłaszcza tym którzy chcieli wykorzystać takie rozwiązanie w swoich projektach mobilnych 😉

 

Ja tymczasem kończę i zapraszam za tydzień na kolejny post 😉

Trzymajcie się! 🙂

Cześć 🙂