{"id":16047,"date":"2022-09-14T08:04:24","date_gmt":"2022-09-14T06:04:24","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=16047"},"modified":"2025-05-07T11:48:21","modified_gmt":"2025-05-07T09:48:21","slug":"widzety-w-systemie-ios-16-2","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/widzety-w-systemie-ios-16-2\/","title":{"rendered":"Wid\u017cety w systemie iOS 16"},"content":{"rendered":"\n<p>Apple po raz pierwszy wprowadzi\u0142 wid\u017cety do systemu iOS 14, a teraz, wraz z wydaniem iOS 16, wid\u017cety zosta\u0142y wzbogacone o funkcj\u0119 wy\u015bwietlenia na zablokowanym ekranie iPhone\u2019a, aby poprawi\u0107 u\u017cyteczno\u015b\u0107 i dost\u0119p do informacji. Wid\u017cet pokazuje g\u0142\u00f3wne informacje o aplikacji bez konieczno\u015bci jej otwierania.<\/p>\n\n\n\n<p>W tym artykule om\u00f3wimy g\u0142\u00f3wane aspekty korzystania z wid\u017cet\u00f3w (w szczeg\u00f3lno\u015bci na zablokowanym ekranie), a tak\u017ce zaprezentujemy samouczek z prost\u0105 aplikacj\u0105 demonstracyjn\u0105 dla systemu iOS 16, kt\u00f3ra korzysta nowego typu wid\u017cetu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rodziny wid\u017cet\u00f3w<\/strong><\/h2>\n\n\n\n<p>Istniej\u0105 cztery rodziny wid\u017cet\u00f3w, kt\u00f3re mog\u0105 by\u0107 wy\u015bwietlone na odblokowanym ekranie:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>systemSmall,<\/li><li>systemMedium,<\/li><li>systemLarge,<\/li><li>SystemExtraLarge.<\/li><\/ul>\n\n\n\n<p>Dodatkowo, wyst\u0119puj\u0105 cztery rodziny akcesori\u00f3w, kt\u00f3re mog\u0105 by\u0107 u\u017cyte na Apple Watch lub na zablokowanym ekranie urz\u0105dzenia w przypadku iOS:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>accessoryCircle,<\/li><li>accessoryRectangular,<\/li><li>accessoryInline (zawiera pojedynczy wiersz tekstu i opcjonalny obraz),<\/li><li>accessoryCorner (tylko WatchOS) .<\/li><\/ul>\n\n\n\n<p>Poni\u017csze zrzuty ekranu przedstawiaj\u0105 inny wygl\u0105d akcesori\u00f3w na iOS i WatchOS:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5.png\"><img decoding=\"async\" width=\"1000\" height=\"562\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5.png\" alt=\"Wygl\u0105d akcesori\u00f3w na iOS i WatchOS\" class=\"wp-image-15713\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5.png 1000w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5-300x169.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5-768x432.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-1-5-555x312.png 555w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Wid\u017cety na zablokowanym ekranie obs\u0142uguj\u0105 nast\u0119puj\u0105ce tryby wy\u015bwietlania:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>vibrant,<\/li><li>fullColor,<\/li><li>accented.<\/li><\/ul>\n\n\n\n<p>Dla iOS dost\u0119pny jest tylko vibrant, kt\u00f3ry zmienia kolor tekstu i obraz\u00f3w na monochromatyczny oraz odpowiednio dopasowuje je do t\u0142a na urz\u0105dzeniu. Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej, <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/creating-lock-screen-widgets-and-watch-complications\" rel=\"nofollow\" >sprawd\u017a oficjaln\u0105 dokumentacj\u0119<\/a>. &nbsp;<\/p>\n\n\n\n<p>Poni\u017csza ilustracja pokazuje, jak zmienia si\u0119 wygl\u0105d wid\u017cetu po zmianie trybu wy\u015bwietlania (z fullColor na kolor niebieski accented):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-2-4.png\"><img decoding=\"async\" width=\"642\" height=\"355\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-2-4.png\" alt=\"Zmiana wygl\u0105du wid\u017cetu po zmianie trybu wy\u015bwietlania\" class=\"wp-image-15715\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-2-4.png 642w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-2-4-300x166.png 300w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Rodzina wid\u017cet\u00f3w powinna by\u0107 odpowiednio dobrana dla aplikacji i rozmiaru zawarto\u015bci. Kolor akcentuj\u0105cy mo\u017ce by\u0107 u\u017cyty do pod\u015bwietlenia tytu\u0142u i zapewnienia estetycznego interfejsu wid\u017cetu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dostosowywanie wid\u017cet\u00f3w i ich ograniczenia na zablokowanym ekranie<\/strong><\/h2>\n\n\n\n<p>Wid\u017cety maj\u0105 swoje ograniczenia. W dokumentacji Apple mo\u017cemy si\u0119 dowiedzie\u0107, \u017ce nie powinni\u015bmy traktowa\u0107 wid\u017cet\u00f3w jako oddzielnych aplikacji, lecz jako rozszerzenie do istniej\u0105cych. Nie mo\u017cemy te\u017c zaimplementowa\u0107 funkcji takich jak przewijanie, przyciski lub innych interaktywnych. Powinien to by\u0107 prosty widok z tekstem i opcjonalnymi obrazami.<\/p>\n\n\n\n<p>Buduj\u0105c nasz ma\u0142y projekt i dodaj\u0105c do niego wid\u017cety<strong>, napotykali\u015bmy ograniczenia, kt\u00f3rymi chcieliby\u015bmy si\u0119 z Wami podzieli\u0107 w dalszej cz\u0119\u015bci tego artyku\u0142u.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ograniczenia napotkane w projekcie<\/strong><\/h3>\n\n\n\n<p>Pierwszym z napotkanych ogranicze\u0144 jest rozmiar zbioru obiekt\u00f3w entry podany w metodzie <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/intenttimelineprovider\/gettimeline(for:in:completion:)-9oqa4\" rel=\"nofollow\" >getTimeline<\/a>. Przyk\u0142adowo: aktualizacje nie b\u0119d\u0105 dzia\u0142a\u0107, je\u015bli rozmiar zbioru obiekt\u00f3w typu <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineentry\" rel=\"nofollow\" >TimelineEntry<\/a> jest zbyt du\u017cy (wi\u0119cej ni\u017c oko\u0142o 1000), ale je\u015bli jest ich oko\u0142o 100, wszystko dzia\u0142a zgodnie z oczekiwaniami.<\/p>\n\n\n\n<p>Kolejnym ograniczeniem jest cz\u0119stotliwo\u015b\u0107 aktualizacji wid\u017cetu. Istnieje limit w aktualizacji rzeczywistych informacji o wid\u017cecie \u2013 zale\u017cy ona od logiki podanej w metodzie <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/intenttimelineprovider\/gettimeline(for:in:completion:)-9oqa4\" rel=\"nofollow\" >getTimeline<\/a> i <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/keeping-a-widget-up-to-date#:~:text=Reloads%20Within%20a-,Budget,-Reloading%20widgets%20consumes\" rel=\"nofollow\" >od bud\u017cetu<\/a> wid\u017cetu obliczonego przez WidgetKit. Bud\u017cet jest unikalny dla ka\u017cdego wid\u017cetu, a system bierze pod uwag\u0119 wiele czynnik\u00f3w, aby go obliczy\u0107. <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/keeping-a-widget-up-to-date\" rel=\"nofollow\" >Szczeg\u00f3\u0142owe informacje nt. bud\u017cetu<\/a> znajdziesz na stronie Apple\u2019a.<\/p>\n\n\n\n<p>Trzeci typ ograniczenia jest zwi\u0105zany z reprezentacj\u0105 interfejsu wid\u017cetu. Deweloper musi zadba\u0107 o to, aby tre\u015b\u0107 poprawnie wpisywa\u0142a si\u0119 w ramk\u0119 wid\u017cetu, a wszystkie wa\u017cne informacje by\u0142y widoczne dla u\u017cytkownika. Dodaj\u0105c obraz do wid\u017cetu, programista musi zwr\u00f3ci\u0107 uwag\u0119, \u017ce zajmie on dodatkowe miejsce, podczas gdy rozmiar wid\u017cetu pozostanie taki sam. Istnieje r\u00f3wnie\u017c ograniczenie rozmiaru obraz\u00f3w. Empirycznie stwierdzono, \u017ce wid\u017cet nie b\u0119dzie dzia\u0142a\u0142 z obrazem 1200x1200px, podczas gdy dzia\u0142a z jego ma\u0142\u0105 wersj\u0105 120x120px.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Demonstracja, jak zbudowa\u0107 wid\u017cet i wy\u015bwietli\u0107 go na zablokowanym ekranie iPhone\u2019a<\/strong><\/h2>\n\n\n\n<p>Na potrzeby tego artyku\u0142u przygotowali\u015bmy ma\u0142\u0105 aplikacj\u0119, aby zademonstrowa\u0107, jak dzia\u0142aj\u0105 wid\u017cety i jak \u0142atwo mo\u017cna je wdro\u017cy\u0107. Skupimy si\u0119 tutaj tylko na systemie <strong>iOS, <\/strong>pozostawiaj\u0105c <strong>WatchOS<\/strong> na inn\u0105 okazj\u0119.<\/p>\n\n\n\n<p>Na pocz\u0105tek pobierz aplikacj\u0119 startow\u0105 z GitHub lub <a href=\"https:\/\/github.com\/SiiIOSAcademy\/QuotesDemoApp\" rel=\"nofollow\" >sklonuj j\u0105 z podanego linku<\/a> za pomoc\u0105 Xcode 14 beta 1 lub nowszego.<\/p>\n\n\n\n<p><strong>* Zastrze\u017cenie<\/strong> \u2013 do zbudowania tego projektu u\u017cyli\u015bmy Xcode 14 beta 1. Istnieje wi\u0119c niewielka szansa, \u017ce w przypadku p\u00f3\u017aniejszych wersji Xcode co\u015b nie b\u0119dzie dzia\u0142a\u0107 lub Apple wprowadzi pewne zmiany w kodzie.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-3-3.png\"><img decoding=\"async\" width=\"374\" height=\"696\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-3-3.png\" alt=\"Aplikacja pobieraj\u0105ca cytaty z Internetu\" class=\"wp-image-15717\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-3-3.png 374w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-3-3-161x300.png 161w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Po sklonowaniu i uruchomieniu projektu aplikacja powinna pobra\u0107 cytaty z Internetu i wy\u015bwietli\u0107 pojedynczo na ekranie urz\u0105dzenia lub symulatora. <strong>Zosta\u0142a stworzona, aby pokaza\u0107 losowy cytat z prostego interfejsu API.<\/strong> Mo\u017cesz przechodzi\u0107 mi\u0119dzy cytatami, przewijaj\u0105c ekran w d\u00f3\u0142 lub w g\u00f3r\u0119. Je\u015bli chcesz, mo\u017cesz r\u00f3wnie\u017c udost\u0119pni\u0107 cytat za pomoc\u0105 przycisku udost\u0119pniania.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Przygotowanie wst\u0119pne<\/strong><\/h3>\n\n\n\n<p>Po zabawie z aplikacj\u0105 przejd\u017amy Xcode naszego projektu, gdzie zaczniemy budowa\u0107 prosty wid\u017cet, kt\u00f3ry b\u0119dzie pobiera\u0142 losowe cytaty z API i pokazywa\u0142 je na wid\u017cecie bez udzia\u0142u aplikacji. Po wybranym okresie cytat zostanie zast\u0105piony przez nast\u0119pny. Zacznijmy.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52.png\"><img decoding=\"async\" width=\"1024\" height=\"668\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-1024x668.png\" alt=\"Quotes Demo App\" class=\"wp-image-15719\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-1024x668.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-300x196.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-768x501.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-1536x1003.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.49.52-2048x1337.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Przejd\u017a do nawigatora projektu i wybierz nazw\u0119 projektu u g\u00f3ry. Nast\u0119pnie w ustawieniach og\u00f3lnych po prawej stronie naci\u015bnij &#8222;+&#8221;, aby doda\u0107 nowy target z wid\u017cetem.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11.png\"><img decoding=\"async\" width=\"1024\" height=\"668\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-1024x668.png\" alt=\"Choose a template for your new target\" class=\"wp-image-15721\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-1024x668.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-300x196.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-768x501.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-1536x1003.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-18.50.11-2048x1337.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Wybierz &#8222;Widget Extension\u201d i &#8222;Next\u201d.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-6-2.png\"><img decoding=\"async\" width=\"775\" height=\"551\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-6-2.png\" alt=\"Choose options for your new target\" class=\"wp-image-15723\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-6-2.png 775w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-6-2-300x213.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-6-2-768x546.png 768w\" sizes=\"(max-width: 775px) 100vw, 775px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Wprowad\u017a nazw\u0119 projektu i nie zaznaczaj opcji <strong>Include Configuration Intent<\/strong>, poniewa\u017c nie u\u017cyjemy jej w tym prostym demo. U\u017cyjemy tutaj konfiguracji statycznej.<\/p>\n\n\n\n<p>Konfiguracji intencji mo\u017cna u\u017cy\u0107 w przypadku w\u0142a\u015bciwo\u015bci konfigurowalnych przez u\u017cytkownika, kt\u00f3re na przyk\u0142ad zmieni\u0105 dane, jakie b\u0119d\u0105 wy\u015bwietlane przez wid\u017cet lub umo\u017cliwi\u0105 automatyzacj\u0119 aplikacji za pomoc\u0105 Siri i skr\u00f3t\u00f3w. Naci\u015bnij przycisk &#8222;Finish\u201d aby utworzy\u0107 rozszerzenie z wid\u017cetem.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-7-2.png\"><img decoding=\"async\" width=\"372\" height=\"550\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-7-2.png\" alt=\"Activate \" class=\"wp-image-15725\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-7-2.png 372w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-7-2-203x300.png 203w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Xcode prawdopodobnie zapyta Ci\u0119, czy chcesz aktywowa\u0107 schemat dla naszego nowo utworzonego wid\u017cetu do budowania i debugowania. Zaleca si\u0119 to zrobi\u0107, je\u015bli chcemy mie\u0107 mo\u017cliwo\u015b\u0107 testowania kodu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00.png\"><img decoding=\"async\" width=\"1024\" height=\"660\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-1024x660.png\" alt=\"Quotes Demo App\" class=\"wp-image-15727\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-1024x660.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-300x193.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-768x495.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-1536x990.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Zrzut-ekranu-2022-06-24-o-19.09.00-2048x1319.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Teraz mamy nasz target wid\u017cetu dodany do projektu. Mo\u017cesz zobaczy\u0107 nowe pliki po lewej stronie. Oznaczy\u0142em je niebiesk\u0105 ramk\u0105. Za chwil\u0119 przejdziemy do pliku <strong>QuotesWidget.swift<\/strong>. Najpierw jednak wybierz trzy pliki, jak pokazano na powy\u017cszym zrzucie ekranu, i w inspektorze plik\u00f3w po prawej stronie wybierz <strong>Membership <\/strong>docelowe dla <strong>QuotesWidgetExtension<\/strong> oraz <strong>QuotesDemoApp<\/strong>. Umo\u017cliwi to korzystanie z tych plik\u00f3w, przez oba nasze targety zamiast tworzenia tych samych plik\u00f3w dla wszystkich target\u00f3w z osobna.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-9-2.png\"><img decoding=\"async\" width=\"390\" height=\"262\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-9-2.png\" alt=\"fragment kodu\" class=\"wp-image-15730\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-9-2.png 390w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-9-2-300x202.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Budowanie wid\u017cetu<\/strong><\/h3>\n\n\n\n<p>Mo\u017cemy teraz skupi\u0107 si\u0119 na budowaniu naszego widgetu. Przejd\u017a do<strong> QuotesWidget.swift<\/strong> i zacznij od zmiany&nbsp;struktury <strong>SimpleEntry<\/strong> na <strong>QuoteEntry<\/strong>. Dodamy &#8222;<strong>let quote: Quote<\/strong>&#8222;, aby umo\u017cliwi\u0107 wid\u017cetowi pobieranie naszych danych z cytatami w celu wy\u015bwietlenia ich na urz\u0105dzeniu u\u017cytkownika.<\/p>\n\n\n\n<p>Przyjrzyjmy si\u0119 bli\u017cej strukturze <strong>QuoteEntry<\/strong>. Musi by\u0107 zgodna z protoko\u0142em <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineentry\" rel=\"nofollow\" ><strong>TimelineEntry<\/strong><\/a>. Wid\u017cety na iOS mo\u017cna zmienia\u0107 podczas zdarze\u0144 czasowych lub dzia\u0142a\u0144 u\u017cytkownika. Struktury te s\u0105 tworzone w celu dostarczenia danych dla osi czasu widok\u00f3w, kt\u00f3re maj\u0105 by\u0107 wy\u015bwietlane w odpowiednim momencie.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-10-1.png\"><img decoding=\"async\" width=\"921\" height=\"381\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-10-1.png\" alt=\"fragment kodu\" class=\"wp-image-15732\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-10-1.png 921w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-10-1-300x124.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-10-1-768x318.png 768w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Struktura Provider<\/strong><\/h3>\n\n\n\n<p>Struktura <strong>Provider, <\/strong>zgodna z protoko\u0142em <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineprovider\" rel=\"nofollow\" ><strong>TimeLineProvider<\/strong><\/a><strong>,<\/strong> ma trzy wymagane metody, kt\u00f3rych b\u0119dziemy u\u017cywa\u0107, aby poinformowa\u0107 wid\u017cet, kiedy wys\u0142a\u0107 nasze dane do widoku i jak je zaktualizowa\u0107.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineprovider\/placeholder(in:)\" rel=\"nofollow\" ><strong>placeholder(in:)<\/strong><\/a> \u2013 dostarcza danych dla tymczasowego interfejsu u\u017cytkownika, kt\u00f3ry jest domy\u015bln\u0105 zawarto\u015bci\u0105 wid\u017cetu. Ta metoda jest zwykle wywo\u0142ywana, gdy na przyk\u0142ad zachodz\u0105 zmiany \u015brodowiska urz\u0105dzenia, takie jak zmiana dynamicznego ustawienia interfejsu. System mo\u017ce ponownie za\u0142adowa\u0107 wid\u017cet i u\u017cy\u0107 danych tymczasowych. W tym przypadku u\u017cywamy przyk\u0142adowego cytatu zapisanego na sta\u0142e, aby szybko otrzyma\u0107 wymagane dane.<\/li><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineprovider\/getsnapshot(in:completion:)\" rel=\"nofollow\" ><strong>getSnapshot(for:)<\/strong><\/a> \u2013 s\u0142u\u017cy do tworzenia pojedynczej migawki danych dla wid\u017cetu. Migawka to miejsce, w kt\u00f3rym system musi szybko wy\u015bwietli\u0107 pojedynczy wpis. Dane z tej metody s\u0105 wykorzystywane w galerii wid\u017cet\u00f3w, kiedy u\u017cytkownik mo\u017ce wybra\u0107 wid\u017cet, kt\u00f3ry ma by\u0107 wy\u015bwietlany na ekranie g\u0142\u00f3wnym. U\u017cywamy tutaj r\u00f3wnie\u017c przyk\u0142adowego cytatu, w kt\u00f3rym potrzebny jest szybki dost\u0119p do danych, aby szybko zwr\u00f3ci\u0107 widok.<\/li><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineprovider\/gettimeline(in:completion:)\" rel=\"nofollow\" ><strong>Metoda getTimeline(in:)<\/strong><\/a> \u2013 zawiera zbi\u00f3r wpis\u00f3w i regu\u0142, kiedy powinny one zosta\u0107 wy\u015bwietlane na wid\u017cecie. Osie czasu to kombinacja widok\u00f3w i dat, co pozwala okre\u015bli\u0107, w kt\u00f3rej jednostce czasu dany widok powinien by\u0107 wy\u015bwietlany.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-11-1.png\"><img decoding=\"async\" width=\"921\" height=\"615\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-11-1.png\" alt=\"fragment kodu\" class=\"wp-image-15734\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-11-1.png 921w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-11-1-300x200.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-11-1-768x513.png 768w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>W naszym przyk\u0142adzie u\u017cyli\u015bmy funkcji asynchronicznej dzia\u0142aj\u0105cej na g\u0142\u00f3wnym w\u0105tku, aby pobra\u0107 cytaty, umie\u015bci\u0107 je w zbiorze obiekt\u00f3w <strong>QuoteEntry<\/strong> i manipulowa\u0107 obiektami daty, \u017ceby umo\u017cliwi\u0107 wid\u017cetowi wy\u015bwietlanie nowego cytatu co 10 sekund. Mo\u017cesz u\u017cy\u0107 innego przedzia\u0142u czasu lub zmieni\u0107 metod\u0119 wy\u015bwietlania cytat\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>O\u015b czasu<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timeline\" rel=\"nofollow\" ><strong>Obiekt osi czasu<\/strong><\/a> z metody <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/timelineprovider\/gettimeline(in:completion:)\" rel=\"nofollow\" ><strong>getTimeline<\/strong><\/a> tworzy o\u015b czasu z wpisami cytat\u00f3w oraz zasad\u0105, kiedy utworzy\u0107 now\u0105 o\u015b czasu, gdy ostatni obiekt w zbiorze zostanie wy\u015bwietlony na ekranie. Mo\u017cemy wybiera\u0107 pomi\u0119dzy \u201epo wybranej dacie\u201d, \u201epo ostatniej dacie w zbiorze wpis\u00f3w (u\u017cywanej w tym przypadku)\u201d oraz \u201epo interakcji u\u017cytkownika w aplikacji\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opcje wid\u017cetu i widok<\/strong><\/h3>\n\n\n\n<p>Po utworzeniu powy\u017cszych metod mo\u017cemy skonfigurowa\u0107 opcje wid\u017cetu jak i sam widok.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-12-1.png\"><img decoding=\"async\" width=\"710\" height=\"363\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-12-1.png\" alt=\"fragment kodu\" class=\"wp-image-15736\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-12-1.png 710w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-12-1-300x153.png 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>W g\u0142\u00f3wnej strukturze wid\u017cetu mo\u017cemy ustali\u0107 jego konfiguracj\u0119 i ustawienia. Wykorzystuje ona konfiguracj\u0119 wid\u017cet\u00f3w i obiekt <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/intentconfiguration\/init(kind:intent:provider:content:)\" rel=\"nofollow\" >provider<\/a>, aby wype\u0142ni\u0107 widok danymi, kt\u00f3re podali\u015bmy wcze\u015bniej.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/staticconfiguration\/init(kind:provider:content:)\" rel=\"nofollow\" >kind: String<\/a> powinna by\u0107 wy\u0142\u0105czn\u0105 nazw\u0105 dla tego wid\u017cetu, kt\u00f3ra b\u0119dzie si\u0119 r\u00f3\u017cni\u0142a od nazw innych naszych wid\u017cet\u00f3w.<\/li><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/staticconfiguration\/configurationdisplayname(_:)-8puo4\" rel=\"nofollow\" >.configurationDisplayName<\/a> pokazuje nazw\u0119 naszego wid\u017cetu na ekranie urz\u0105dzenia.<\/li><li><a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/staticconfiguration\/description(_:)-20uc6\" rel=\"nofollow\" >.description<\/a> powinien by\u0107 kr\u00f3tkim opisem naszego wid\u017cetu.<\/li><li>Metoda <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/staticconfiguration\/supportedfamilies(_:)\" rel=\"nofollow\" >.supportedFamilies<\/a> informuje wid\u017cet, jakich rozmiar\u00f3w powinien u\u017cywa\u0107 na ekranie g\u0142\u00f3wnym. W tym przyk\u0142adzie u\u017cywamy <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/widgetfamily\/systemsmall\" rel=\"nofollow\" >.systemSmall<\/a> i <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/widgetfamily\/systemmedium\" rel=\"nofollow\" >.systemMedium<\/a>, aby zaprezentowa\u0107 u\u017cytkownikowi ma\u0142y kwadratowy oraz prostok\u0105tny \u015bredniej wielko\u015bci wid\u017cet.<\/li><\/ul>\n\n\n\n<p>Mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 nowych typ\u00f3w dla obs\u0142ugiwanych rodzin, kt\u00f3re zosta\u0142y wprowadzone w systemie iOS 16. Wr\u00f3cimy do nich p\u00f3\u017aniej.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-13-1.png\"><img decoding=\"async\" width=\"643\" height=\"687\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-13-1.png\" alt=\"fragment kodu\" class=\"wp-image-15738\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-13-1.png 643w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-13-1-281x300.png 281w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Je\u015bli chodzi o widok, u\u017cywamy standardowych komponent\u00f3w <strong>SwiftUI<\/strong>, oddzielnych dla ka\u017cdej rodziny system\u00f3w, kt\u00f3rych u\u017cywamy, aby umo\u017cliwi\u0107 wy\u015bwietlenie r\u00f3\u017cnych komponent\u00f3w dla ka\u017cdego widoku. Jest to ca\u0142kiem normalna procedura, poniewa\u017c r\u00f3\u017cne rodziny mog\u0105 zawiera\u0107 r\u00f3\u017cn\u0105 ilo\u015b\u0107 tekstu i obraz\u00f3w.<\/p>\n\n\n\n<p>Mo\u017cesz spr\u00f3bowa\u0107 sam zbudowa\u0107 widok dla rodziny typu <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/widgetfamily\/systemlarge\" rel=\"nofollow\" ><strong>.systemLarge<\/strong><\/a> i zobaczy\u0107, jak r\u00f3\u017cni si\u0119 od \u015bredniego i ma\u0142ego.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-14.png\"><img decoding=\"async\" width=\"938\" height=\"237\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-14.png\" alt=\"fragment kodu\" class=\"wp-image-15740\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-14.png 938w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-14-300x76.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-14-768x194.png 768w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Je\u015bli masz problemy z konfiguracj\u0105 podgl\u0105du widoku w <strong>canvas<\/strong>, mo\u017cesz u\u017cy\u0107 powy\u017cszego kodu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-15.png\"><img decoding=\"async\" width=\"518\" height=\"480\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-15.png\" alt=\"widok po wpisaniu nazwy aplikacji w polu wyszukiwania\" class=\"wp-image-15742\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-15.png 518w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-15-300x278.png 300w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dodanie wid\u017cetu do ekranu g\u0142\u00f3wnego<\/strong><\/h3>\n\n\n\n<p>Teraz mo\u017cesz doda\u0107 nowy wid\u017cet do ekranu g\u0142\u00f3wnego. Je\u015bli nie pojawia si\u0119 w galerii wid\u017cet\u00f3w, po prostu wpisz nazw\u0119 aplikacji w polu wyszukiwania.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-16.png\"><img decoding=\"async\" width=\"777\" height=\"363\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-16.png\" alt=\"fragment kodu\" class=\"wp-image-15744\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-16.png 777w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-16-300x140.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-16-768x359.png 768w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Je\u015bli chcemy u\u017cy\u0107 nowego interfejsu API dla iOS 16, kt\u00f3ry pokazuje wid\u017cety na zablokowanym ekranie, wystarczy doda\u0107 nowy typ rodziny do obs\u0142ugiwanych rodzin i zaktualizowa\u0107 widok.<\/p>\n\n\n\n<p>Prostok\u0105tny wid\u017cet mo\u017ce wy\u015bwietla\u0107 tekst i ma\u0142y obraz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20.png\"><img decoding=\"async\" width=\"390\" height=\"165\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20.png\" alt=\"fragment kodu\" class=\"wp-image-15746\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20.png 390w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20-300x127.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Mo\u017cemy doda\u0107 nowy <strong>case<\/strong> do naszego widoku, dzi\u0119ki czemu dane z aplikacji wy\u015bwietlimy na wid\u017cecie nowego rodzaju, kt\u00f3ry poka\u017ce si\u0119 na zablokowanym ekranie urz\u0105dzenia.<a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/viewthatfits\" rel=\"nofollow\" ><strong>ViewThatFits<\/strong><\/a> jest to nowy rodzaj widoku, kt\u00f3ry dostosowuje si\u0119 do dost\u0119pnej przestrzeni i wykorzystuje j\u0105 dla widok\u00f3w, kt\u00f3re zawiera. W ten spos\u00f3b np. tekst wype\u0142ni ca\u0142\u0105 dost\u0119pn\u0105 przestrze\u0144 wid\u017cetu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-18.png\"><img decoding=\"async\" width=\"506\" height=\"484\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-18.png\" alt=\"Ekran iPhona z aplikacj\u0105 Quotes Widget\" class=\"wp-image-15748\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-18.png 506w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-18-300x287.png 300w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dodanie wid\u017cetu do zablokowanego ekranu<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-19.png\"><img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-19.png\" alt=\"fragment kodu\" class=\"wp-image-15750\" width=\"840\" height=\"143\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-19.png 862w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-19-300x51.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-19-768x131.png 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20-1.png\"><img decoding=\"async\" width=\"390\" height=\"165\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20-1.png\" alt=\"fragment kodu\" class=\"wp-image-15752\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20-1.png 390w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-20-1-300x127.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-21.png\"><img decoding=\"async\" width=\"374\" height=\"696\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-21.png\" alt=\"Ekran iPhona z cytatem\" class=\"wp-image-15754\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-21.png 374w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-21-161x300.png 161w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Dodaj\u0105c <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/widgetfamily\/accessoryinline\" rel=\"nofollow\" ><strong>.accessoryInline<\/strong><\/a> mo\u017cemy teraz zobaczy\u0107 nast\u0119pny nowy wid\u017cet dla iOS 16. Wid\u017cet ten wy\u015bwietla tylko jeden wiersz tekstu i opcjonalny obraz u g\u00f3ry ekranu (nad wy\u015bwietlan\u0105 godzin\u0105).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-22.png\"><img decoding=\"async\" width=\"704\" height=\"165\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-22.png\" alt=\"fragment kodu\" class=\"wp-image-15756\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-22.png 704w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-22-300x70.png 300w\" sizes=\"(max-width: 704px) 100vw, 704px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-23.png\"><img decoding=\"async\" width=\"533\" height=\"219\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-23.png\" alt=\"fragment kodu\" class=\"wp-image-15758\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-23.png 533w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-23-300x123.png 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Dodanie <a href=\"https:\/\/developer.apple.com\/documentation\/widgetkit\/widgetfamily\/accessorycircular\" rel=\"nofollow\" ><strong>.accessoryCircular<\/strong><\/a> pozwala nam korzysta\u0107 z okr\u0105g\u0142ych wid\u017cet\u00f3w z tekstem, obrazem lub nowym widokiem <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/gauge\" rel=\"nofollow\" >Gauge<\/a>, kt\u00f3rego tutaj u\u017cywamy.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-24.png\"><img decoding=\"async\" width=\"414\" height=\"770\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-24.png\" alt=\"Finalny widok wid\u017cetu\" class=\"wp-image-15760\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-24.png 414w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Ryc.-24-161x300.png 161w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Za pomoc\u0105 okr\u0105g\u0142ego wid\u017cetu i miernika (gauge) mo\u017cna pokaza\u0107 warto\u015b\u0107 reprezentowan\u0105 w przedziale dla zadeklarowanego zakresu w spos\u00f3b okr\u0105g\u0142y lub liniowy w przypadku u\u017cycia innej rodziny wid\u017cetu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\n\n\n\n<p>In\u017cynierowie Apple\u2019a wykonali \u015bwietn\u0105 robot\u0119, wprowadzaj\u0105c wid\u017cety na zablokowany ekran urz\u0105dze\u0144 z iOS 16, dodaj\u0105c personalizacj\u0119 i aktywno\u015bci na \u017cywo. Dzi\u0119ki odpowiedniemu podej\u015bciu do tworzenia, wid\u017cety na zablokowanym ekranie mog\u0105 znacznie poprawi\u0107 wra\u017cenia u\u017cytkownika i zapewni\u0107 wi\u0119ksz\u0105 \u0142atwo\u015b\u0107 i szybko\u015b\u0107 dost\u0119pu do najwa\u017cniejszych informacji z naszych aplikacji. Poniewa\u017c wsp\u00f3lnie zbudowali\u015bmy wid\u017cet, mo\u017cemy u\u017cy\u0107 stwierdzenia, \u017ce <strong>API jest bardzo przyjazne dla programist\u00f3w i \u0142atwe do wdro\u017cenia<\/strong>.<\/p>\n\n\n\n<p><em>Wielkie podzi\u0119kowania dla Damiana Drohobyckiego i Marty Mazurek za inspiracj\u0119 do napisania tego artyku\u0142u, przegl\u0105d techniczny i wsparcie.<\/em><\/p>\n\n\n\n<p>***<\/p>\n\n\n\n<p>Je\u015bli interesuje Ci\u0119 tematyka iOS, zach\u0119camy do przeczytania artyku\u0142u naszego eksperta <a href=\"https:\/\/sii.pl\/blog\/microsoft-intune-zarzadzanie-urzadzeniami-ios\/?category=development-na-twardo&amp;tag=ios,microsoft-intune,praca-zdalna\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"\" microsoft=\"\" intune=\"\">&#8222;Microsoft Intune \u2013 zarz\u0105dzanie urz\u0105dzeniami iOS&#8221;. <\/a><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;16047&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 7)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Wid\u017cety w systemie iOS 16&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 7)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apple po raz pierwszy wprowadzi\u0142 wid\u017cety do systemu iOS 14, a teraz, wraz z wydaniem iOS 16, wid\u017cety zosta\u0142y wzbogacone &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/widzety-w-systemie-ios-16-2\/\">Continued<\/a><\/p>\n","protected":false},"author":433,"featured_media":19766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":8,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[2427,1518,521],"class_list":["post-16047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-digital","tag-widzet","tag-ios"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/08\/Widzety-w-systemie-iOS-16-1.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/16047"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/433"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=16047"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/16047\/revisions"}],"predecessor-version":[{"id":21587,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/16047\/revisions\/21587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/19766"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=16047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=16047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=16047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}