Przy porządkowaniu starych materiałów znalazłem korespondencję z 2019 roku. Opisywałem w niej pracę nad aplikacją mobilną w Xamarinie. Wróciły też wspomnienia o przycisku, który na makiecie wyglądał zupełnie niewinnie.
Pracowaliśmy w trzy osoby: grafik, kolega odpowiedzialny za backend i ja od interfejsu. Około czterdziestu ekranów, powtarzalne listy, wspólne style, ograniczone zagnieżdżanie elementów. Swoją część oszacowałem na tydzień, z marginesem do dwóch.
Potem zmieniła się oprawa graficzna. Aplikacja miała wyglądać spójnie z istniejącą stroną internetową. Liczba ekranów pozostała podobna, ale pojawiły się bardziej złożone układy, cienie i gradienty.
Gradient trafił nawet na obramowanie przycisku.
I właśnie przy takim drobiazgu zaczęła wychodzić rzeczywista skala zmiany.
Na przełomie 2018 i 2019 roku Xamarin.Forms nie miał jeszcze wbudowanych pędzli gradientowych, które pojawiły się w rozwoju wersji 4.8 w 2020 roku. Rozbudowany wygląd kontrolek wymagał własnych rozwiązań, dodatkowych bibliotek albo kodu renderującego dla konkretnej platformy. To było również ograniczenie ówczesnego narzędzia.
Dla mnie zrobienie tego przycisku było naprawdę dużym wyzwaniem. Trzeba było myśleć warstwami: osobno potraktować obrys, wnętrze, ikonę i napis, a następnie złożyć je w jeden działający element. Przy gradientowej obwódce samo narysowanie kolorowego tła jeszcze nie wystarcza. Środek ma zachować własne wypełnienie, brzeg odpowiednią grubość, a całość właściwy kształt.
W zachowanej korespondencji mam taki fragment konstrukcji przycisku. Definicje stylów i własnych kontrolek znajdowały się w innych częściach projektu:
<Frame Style="{StaticResource WhiteButtonFrame}">
<Frame.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TakeVideoCommand}" />
</Frame.GestureRecognizers>
<Frame.Behaviors>
<behaviors:ViewTappedButtonBehavior />
</Frame.Behaviors>
<Grid Style="{StaticResource GridButton}">
<controls:CurvedCornersLabel
Style="{StaticResource CircleIcoGreenLabel}">

</controls:CurvedCornersLabel>
<Label
Text="TAKE VIDEO"
Style="{StaticResource WhiteButtonLab}" />
</Grid>
</Frame>Ten fragment nie pokazuje samego rysowania gradientu. Pokazuje za to, ile elementów składało się na pozornie prosty przycisk: ramka, układ zawartości, własna kontrolka z ikoną, napis, obsługa dotknięcia i dodatkowe zachowanie.
A potem okazało się, że na iOS ikona nie działa.
Dopisaliśmy osobną klasę, która ją renderowała. Dopiero wtedy rozwiązanie działało na Androidzie i iOS. Na makiecie przez cały ten czas był po prostu przycisk z ikoną.
W mailu z lutego 2019 roku zapisałem, że prace frontendowe zajęły prawie cztery tygodnie. Cała historia była jednak dłuższa. Nową grafikę uzgadnialiśmy już w listopadzie 2018, w styczniu nadal dopracowywaliśmy materiały, a w lutym wracały uwagi z testów na telefonie z Androidem 7: niewidoczna stopka czy białe ikony wychodzące na białe tło.
To był komercyjny projekt realizowany dla klienta. Równolegle studiowałem informatykę, inżyniera obroniłem w 2020 roku. Wcześniejsze zajęcia z programowania aplikacji mobilnych były na naprawdę solidnym poziomie i zachęciły nas do pracy w Xamarinie.
Dlatego po realizacji projektu zwróciłem się do prowadzącego te zajęcia. Miałem już konkretne doświadczenia i problemy do omówienia. Chciałem zweryfikować własne założenia i dowiedzieć się, jak pisać lepszy kod.
W kolejnych wiadomościach opisywałem już wydzielanie wspólnych komponentów, składanie ich w większe fragmenty i porządkowanie kodu.
Później rozwijałem te umiejętności w kolejnych aplikacjach w Xamarinie, a następnie w .NET MAUI.
Z tej historii dobrze pamiętam, jak wiele pracy potrafi kryć się w cienkiej, kolorowej obwódce. I jak daleko można dojść, kiedy po uruchomieniu rozwiązania nadal chce się zrozumieć, jak zrobić je lepiej.
