Tło i krótka historia na ten temat

Jako początkujący w nauce tworzenia aplikacji na iOS musieliśmy wiedzieć lub uczyć się o tworzeniu widoków za pomocą scenorysów i automatycznych układów. Kiedy po raz pierwszy dowiedziałem się, jak stworzyć aplikację na iOS, nauczyłem się korzystać ze scenorysów, w tym ustawiać układy komponentów w widoku. Musisz jednak wiedzieć, że stosowanie storyboardów jest bardzo nieefektywne do wdrożenia w dość dużych projektach, zwłaszcza jeśli praca jest wykonywana w zespole. Używając scenorysu, będzie nam trudno łączyć i rozwiązywać konflikty podczas współpracy, trudne w nawigacji, trudne do refaktoryzacji kodu i wiele innych.

W końcu zdecydowałem się nauczyć, jak programowo tworzyć UI za pomocą UIKit podczas pracy nad moim projektem i okazało się to znacznie łatwiejsze pod względem współpracy. Z tego powodu zbadałem kilka rzeczy, w tym naukę deklarowania komponentu, dostosowywania komponentu, umieszczania go w widoku zgodnie z potrzebami, a także dostosowywania układu różnych komponentów w widoku.

Z tego, co zbadałem, wyciągnąłem różne wnioski, ale są 2 rzeczy, które wydają się proste, ale bardzo przydatne, w tym te związane z ustawieniami, które faktycznie były potrzebne do utworzenia etykiety, która może automatycznie wyświetlać znaki nowej linii zgodnie z treścią a także o tym, że istnieje wiele sposobów ustawiania układu dla komponentu w widoku, ale jak dotąd dla mnie najłatwiejszym sposobem, jaki kiedykolwiek próbowałem zaimplementować, jest użycie biblioteki SnapKit.

W tym celu chcę podzielić się tym, jak to zrobić, wyjaśniając to poprzez implementację, którą wykonałem w projekcie mojego zespołu.

O projekcie mojego zespołu

Oto aplikacja, którą stworzyłem ja i mój zespół, o nazwie „Healo”.
Healo to anonimowa aplikacja na iOS do czatowania, która łączy ludzi, którzy próbują wyleczyć się z ran rodzicielskich (nazywanych Poszukiwaczami), z kimś, kto może słuchać ich historii i przypominać im, aby nie tracili motywacji do samoregeneracji (nazywani jako Słuchacz ).

Kiedy chcemy być słuchaczem, dostępne są strony z ocenami, które zawierają wyjaśnienia dotyczące niektórych tematów, a także pytania, na które muszą odpowiedzieć i muszą zdać test, aby upewnić się, że mogą korzystać z aplikacji.

W rzeczywistości musimy utworzyć tylko jedną stronę oceny, ale treść etykiety na tej stronie będzie zawierała różne teksty, a także będzie różna w zależności od numeru pytania. Ten opis i samo pytanie są pobierane z bazy danych i nie są bezpośrednio zapisywane i przechowywane w projekcie Xcode. Dlatego oczywiście zawartość tekstu i liczba słów również będą się różnić.

Właściwie możemy sprawić, by nasz wygląd był schludny bez konieczności wprowadzania pewnych ustawień w widoku. Możemy to zrobić, ustawiając go na danych tekstowych, które pobieramy z bazy danych, dodając \n dla określonego tekstu, który musi znajdować się w nowej linii, na przykład „Cześć, \nUwielbiam programować”. Ale jest to bardzo niewygodne, jeśli jest dużo tekstu, który wymaga tych uzupełnień i zawsze musimy to robić ręcznie.

W tym celu pokażę Ci, jak dokonuję ustawień na etykiecie opisu, aby bez względu na długość treści, którą pobierzemy z bazy danych, nowa linia została dodana automatycznie, jeśli długość tekstu przekroczy ograniczenia widoku etykiety, który został ustawiony za pomocą SnapKit.

Wdrożenie w projekcie

Aby skorzystać z biblioteki SnapKit, zanim przystąpimy do pracy nad projektem, upewnij się, że mamy zainstalowane CocoaPods. ( Oto przewodnik instalacji CocoaPods. )

Po zainstalowaniu CocoaPod, oto krok po kroku, jak zainstalować SnapKit:
1. Musimy przejść do naszego folderu projektu Xcode i stamtąd otworzyć terminal (kliknij prawym przyciskiem myszy + wybierz „Nowy terminal w folderze”).
2. Po otwarciu terminala wpisujemy „pod init” i utworzy nowy plik pod w naszym folderze.

3. Otwórz ten plik Podfile i wpisz to:

Następnie zapisz plik Podfile

4. Wróć do terminala i wpisz „pod install”. Jeśli nie ma błędów, oznacza to, że SnapKit został pomyślnie zainstalowany.

5. Otwórz plik Xcworkspace i zacznij tam kodować.

Możesz także przeczytać więcej wyjaśnień na temat instalacji SnapKit tutaj .

Zakładam, że wiesz już o konfiguracji, która wymagała programowego stworzenia całego interfejsu użytkownika. Jeśli tak, zacznijmy od razu.

Po pierwsze , aby mieć pewność, że będziesz mógł później użyć SnapKit do układu, musisz zaimportować tę bibliotekę do pliku, którego chcesz użyć.

Po drugie , musimy tylko zadeklarować naszą etykietę w klasie naszego kontrolera widoku (w tym projekcie nadal tworzę widoki wewnątrz kontrolerów widoku, a nie w osobnych plikach specjalnie dedykowanych każdemu widokowi). Podczas deklaracji etykiety najważniejszą rzeczą, o której nie należy zapominać jest dodanie label.numberOfLines = 0 oraz label.lineBreakMode = .byWordWrapping.

Po co właściwie są te rzeczy?

Na podstawie tego, co przeczytałem w dokumentacji Apple, mogę udostępnić:

Liczba wierszy jest w rzeczywistości używana do kontrolowania maksymalnej liczby wierszy do dopasowania tekstu etykiety do prostokąta ograniczającego. Jeśli ustawimy wartość na 0, oznacza to, że nie ma limitu wierszy i możemy go użyć tyle wierszy, ile potrzeba, w zależności od zawartości tekstu.

Tryb podziału wiersza jest faktycznie używany do zawijania i obcinania tekstu etykiety. Dostępnych jest kilka trybów, ale najczęściej używanym trybem jest NSLineBreakMode.byWordWrapping. Jeśli użyjemy tego trybu, spowoduje to, że następne słowo zostanie wycięte / przeniesione do nowej linii, jeśli słowo nie zmieści się w 1 linii.

Więcej informacji na ten temat można znaleźć w dokumentacji Apple Developer: Number of Lines Explanation & Line Break Mode Explanation .

Następnie możemy utworzyć 3 funkcje, takie jak setupData, setupView i setupLayout. Oto, co znajduje się w każdej funkcji (nie pokazuję dokładnie, pokazuję tylko to, co jest istotne):

1. funkcja setupData:

2. konfiguracja funkcji przeglądania:

W ramach tej funkcji możemy ustawić kolor tła widoku, a także dodać naszą etykietę opisu do widoku, aby upewnić się, że pojawi się on w naszym widoku.

3. funkcja setupLayout:

Wewnątrz tej funkcji możemy ustawić układ etykiety tak, aby etykieta znajdowała się we właściwej pozycji (tak jak chcemy).

Oto jak ustawić układ za pomocą SnapKit:
1. Wpisz nazwę komponentu, dla którego chcemy ustawić układ. W tym przypadku chcę nadać układ mojej etykiecie topicDesc. Oto kod:

}

2. Wypisz wszystkie ograniczenia, które chcemy. W tym przypadku chcę, aby pozycja etykiety topicDesc znajdowała się poniżej topicTitle (w odległości 21 pikseli od dolnego tytułu tematu). Oto kod:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Chcę również, aby pozycja etykiety topicDesc miała odległość 27 pikseli od lewej i prawej strony superview. Oto kod:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Kilka dodatkowych wskazówek dotyczących korzystania z SnapKit:

Wartość przesunięcia musi być > 0 dla dopełnienia górnego i lewego/wiodącego.
Wartość przesunięcia musi być < 0 dla wypełnienia dolnego i prawego/końcowego.

Możemy użyć wstawki dla kodu w jednym wierszu, jeśli odległość jest równa, na przykład:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

Na koniec musimy wywołać wszystkie funkcje, które już utworzyliśmy, aby widok załadował i uruchomił projekt, aby sprawdzić, czy wszystko działa dobrze i zgodnie z oczekiwaniami.

Wspaniały! W końcu dowiedzieliśmy się, jak automatycznie wstawiać nowe wiersze etykiety zgodnie z treścią tekstu i ustawiać układ za pomocą SnapKit w aplikacjach na iOS. Korzystanie z samego SnapKit naprawdę pomogło mi w układaniu układu podczas pracy nad moim projektem i ty też możesz go wypróbować. Jeśli jesteś ciekawy i chcesz dowiedzieć się więcej o SnapKit, możesz przeczytać więcej na ten temat tutaj ).

Ponadto, jeśli jesteś ciekawy i chcesz dowiedzieć się więcej o projekcie mojego zespołu (Healo), możesz przetestować naszą aplikację na Testflight ( Kliknij tutaj, aby przetestować naszą aplikację ).

Mam nadzieję, że ten artykuł może być dla Ciebie przydatny, a jeśli tak, pomóż udostępnić ten post swoim znajomym lub współpracownikom, którzy mogą również uznać go za przydatny dla nich, a także podziel się swoją opinią lub komentarzem. Dziękuję.

© 2022 Elvina Jacia. Wszelkie prawa zastrzeżone.