Udostępnij za pośrednictwem

Podsumowanie rozdziału 13. Mapy bitowe

  • Artykuł

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Element Xamarin.FormsImage wyświetla mapę bitową. Wszystkie platformy Xamarin.Forms obsługują formaty plików JPEG, PNG, GIF i BMP.

Mapy bitowe pochodzą Xamarin.Forms z czterech miejsc:

  • Za pośrednictwem internetu zgodnie z adresem URL
  • Osadzony jako zasób w bibliotece udostępnionej
  • Osadzony jako zasób w projektach aplikacji platformy
  • Z dowolnego miejsca, do którego można odwoływać się obiekt platformy .NET Stream , w tym MemoryStream

Zasoby mapy bitowej w bibliotece udostępnionej są niezależne od platformy, a zasoby mapy bitowej w projektach platformy są specyficzne dla platformy.

Uwaga

Tekst książki zawiera odwołania do bibliotek klas przenośnych, które zostały zastąpione przez biblioteki .NET Standard. Cały przykładowy kod z książki został przekonwertowany w celu używania bibliotek standardowych platformy .NET.

Mapa bitowa jest określana przez ustawienie Source właściwości Image obiektu typu ImageSource, klasy abstrakcyjnej z trzema pochodnymi:

  • UriImageSource uzyskiwanie dostępu do mapy bitowej przez Internet na podstawie obiektu ustawionego Uri na jego Uri właściwość
  • FileImageSource uzyskiwanie dostępu do mapy bitowej przechowywanej w projekcie aplikacji platformy na podstawie folderu i ścieżki pliku ustawionej na jej File właściwość
  • StreamImageSourcedo ładowania mapy bitowej przy użyciu obiektu platformy .NET Stream określonego Func przez zwrócenie elementu Stream z zestawu do jego Stream właściwości

Alternatywnie (i częściej) można użyć następujących metod ImageSource statycznych klasy, z których wszystkie zwracają ImageSource obiekty:

Nie ma odpowiednika Image.FromResource klasy metod. Klasa jest przydatna UriImageSource , jeśli musisz kontrolować buforowanie. Klasa jest przydatna FileImageSource w języku XAML. StreamImageSource jest przydatna w przypadku asynchronicznego ładowania Stream obiektów, natomiast ImageSource.FromStream jest synchroniczna.

Mapy bitowe niezależne od platformy

Projekt WebBitmapCode ładuje mapę bitową w Internecie przy użyciu polecenia ImageSource.FromUri. Element Image jest ustawiony na Content właściwość ContentPage, więc jest ograniczony do rozmiaru strony. Niezależnie od rozmiaru mapy bitowej ograniczony element jest rozciągany Image na rozmiar kontenera, a mapa bitowa jest wyświetlana w maksymalnym rozmiarze elementu Image przy zachowaniu współczynnika proporcji mapy bitowej. Image Obszary poza mapą bitową mogą być kolorowe za pomocą BackgroundColorelementu .

Przykład WebBitmapXaml jest podobny, ale po prostu ustawia Source właściwość na adres URL. Konwersja jest obsługiwana przez klasę ImageSourceConverter .

Dopasuj i wypełnij

Możesz kontrolować, jak mapa bitowa jest rozciągana, ustawiając Aspect właściwość na Image jeden z następujących elementów Aspect członkowskich wyliczenia:

  • AspectFit: uwzględnia współczynnik proporcji (wartość domyślna)
  • Fill: wypełnia obszar, nie uwzględnia współczynnika proporcji
  • AspectFill: wypełnia obszar, ale uwzględnia współczynnik proporcji, osiągany przez przycinanie części mapy bitowej

Zasoby osadzone

Plik mapy bitowej można dodać do pliku PCL lub do folderu w pcl. Nadaj jej akcję kompilacji embeddedResource. W przykładzie ResourceBitmapCode pokazano, jak załadować plik za pomocą polecenia ImageSource.FromResource . Nazwa zasobu przekazana do metody składa się z nazwy zestawu, po której następuje kropka, a następnie opcjonalna nazwa folderu i kropka, po której następuje nazwa pliku.

Program ustawia VerticalOptions właściwości Image i HorizontalOptions elementu na LayoutOptions.Center, co sprawia, że Image element nie jest ograniczony. Mapa Image bitowa i mają taki sam rozmiar:

  • W systemach iOS i Android Image jest to rozmiar pikseli mapy bitowej. Istnieje mapowanie jeden do jednego między pikselami mapy bitowej i pikselami ekranu.
  • Na platforma uniwersalna systemu Windows Image jest to rozmiar pikseli mapy bitowej w jednostkach niezależnych od urządzenia. Na większości urządzeń każdy piksel mapy bitowej zajmuje wiele pikseli ekranu.

Przykład StackedBitmap umieszcza element Image w pionie StackLayout w języku XAML. Rozszerzenie znaczników o nazwie ImageResourceExtension pomaga odwoływać się do zasobu osadzonego w języku XAML. Ta klasa ładuje tylko zasoby z zestawu, w którym się znajduje, aby nie można było umieścić go w bibliotece.

Więcej informacji na temat określania rozmiaru

Często pożądane jest spójne ustawianie rozmiaru map bitowych na wszystkich platformach. Eksperymentowanie z mapą StackedBitmap umożliwia ustawienie elementu w Image pionie StackLayout w celu zapewnienia WidthRequest spójności rozmiaru między platformami, ale można zmniejszyć rozmiar tylko przy użyciu tej techniki.

Można również ustawić HeightRequest wartość , aby rozmiary obrazów były spójne na platformach, ale ograniczona szerokość mapy bitowej ograniczy wszechstronność tej techniki. W przypadku obrazu w pionie StackLayoutHeightRequest należy unikać.

Najlepszym rozwiązaniem jest rozpoczęcie od mapy bitowej szerszej niż szerokość telefonu w jednostkach niezależnych od urządzenia i ustawienie WidthRequest żądanej szerokości w jednostkach niezależnych od urządzenia. Jest to pokazane w przykładzie DeviceIndBitmapSize .

MadTeaParty wyświetla rozdział 7 Alicji Alice's Adventures in Wonderland Lewisa Carrolla z oryginalnymi ilustracjami Johna Tenniel:

Potrójny zrzut ekranu szalonego przyjęcie herbaty

Przeglądanie i oczekiwanie

Przykład ImageBrowser umożliwia użytkownikowi przeglądanie obrazów stockowych przechowywanych w witrynie internetowej platformy Xamarin. Używa klasy .NET WebRequest do pobrania pliku JSON z listą map bitowych.

Uwaga

Xamarin.Forms programy powinny być używane HttpClient , a nie WebRequest do uzyskiwania dostępu do plików przez Internet.

Program używa elementu , ActivityIndicator aby wskazać, że coś się dzieje. Podczas ładowania każdej mapy bitowej właściwość tylko do IsLoading odczytu to true.Image Właściwość IsLoading jest wspierana przez właściwość, którą można powiązać, więc PropertyChanged zdarzenie jest wyzwalane po zmianie tej właściwości. Program dołącza program obsługi do tego zdarzenia i używa bieżącego ustawienia IsLoaded , aby ustawić IsRunning właściwość ActivityIndicator.

Mapy bitowe przesyłania strumieniowego

Metoda ImageSource.FromStream tworzy obiekt ImageSource na podstawie platformy .NET Stream. Metoda musi zostać przekazana Func do obiektu zwracającego Stream obiekt.

Uzyskiwanie dostępu do strumieni

W przykładzie BitmapStreams pokazano, jak za pomocą ImaageSource.FromStream metody załadować mapę bitową przechowywaną jako zasób osadzony oraz załadować mapę bitową w Internecie.

Generowanie map bitowych w czasie wykonywania

Wszystkie platformy Xamarin.Forms obsługują nieskompresowany format pliku BMP, który można łatwo skonstruować w kodzie, a następnie przechowywać w pliku MemoryStream. Ta technika umożliwia algorytmowe tworzenie map bitowych w czasie wykonywania zgodnie z implementacją BmpMaker w klasie w bibliotece Xamrin.FormsBook.Toolkit .

Przykład "Do It Yourself" DiyGradientBitmap demonstruje użycie BmpMaker metody do utworzenia mapy bitowej z obrazem gradientowym.

Mapy bitowe specyficzne dla platformy

Xamarin.Forms Wszystkie platformy umożliwiają przechowywanie map bitowych w zestawach aplikacji platformy. Po pobraniu przez aplikację Xamarin.Forms te mapy bitowe platformy są typu FileImageSource. Są one używane do:

Zestawy platformy zawierają już mapy bitowe dla ikon i ekranów powitalnych:

  • W projekcie systemu iOS w folderze Resources
  • W projekcie systemu Android w podfolderach folderu Resources
  • W projektach systemu Windows w folderze Assets (chociaż platformy systemu Windows nie ograniczają map bitowych do tego folderu)

Przykład PlatformBitmaps używa kodu do wyświetlania ikony z projektów aplikacji platformy.

Rozdzielczości map bitowych

Wszystkie platformy umożliwiają przechowywanie wielu wersji obrazów map bitowych dla różnych rozdzielczości urządzeń. W czasie wykonywania jest ładowana właściwa wersja na podstawie rozdzielczości urządzenia na ekranie.

W systemie iOS te mapy bitowe różnią się sufiksem w nazwie pliku:

  • Brak sufiksu dla 160 urządzeń DPI (1 piksel do jednostki niezależnej od urządzenia)
  • Sufiks "@2x" dla urządzeń DPI 320 (2 piksele do jednostki DIU)
  • Sufiks "@3x" dla 480 urządzeń DPI (3 piksele do diu)

Mapa bitowa, która ma być wyświetlana jako kwadrat o jeden cal, istniałaby w trzech wersjach:

  • MyImage.jpg przy 160 pikselach kwadratowych
  • MyImage@2x.jpg przy 320 pikselach kwadratowych
  • MyImage@3x.jpg przy 480 pikselach kwadratowych

Program odwołuje się do tej mapy bitowej jako MyImage.jpg, ale właściwa wersja jest pobierana w czasie wykonywania na podstawie rozdzielczości ekranu. Gdy nie jest to ograniczone, mapa bitowa będzie zawsze renderowana w 160 jednostkach niezależnych od urządzenia.

W przypadku systemu Android mapy bitowe są przechowywane w różnych podfolderach folderu Resources :

  • drawable-ldpi (niski DPI) dla 120 urządzeń DPI (0,75 pikseli do DIU)
  • drawable-mdpi (średni) dla 160 urządzeń DPI (1 piksel do DIU)
  • drawable-hdpi (wysoki) dla 240 urządzeń DPI (1,5 pikseli do DIU)
  • drawable-xhdpi (bardzo wysoki) dla urządzeń DPI 320 (2 piksele do DIU)
  • drawable-xxhdpi (dodatkowy dodatkowy wysoki) dla 480 urządzeń DPI (3 piksele do DIU)
  • drawable-xxxhdpi (trzy dodatkowe wzloty) dla 640 urządzeń DPI (4 piksele do DIU)

W przypadku mapy bitowej przeznaczonej do renderowania na jednym kwadratowym calu różne wersje mapy bitowej będą miały taką samą nazwę, ale inny rozmiar i będą przechowywane w następujących folderach:

  • drawable-ldpi/MyImage.jpg przy 120 pikselach kwadratowych
  • drawable-mdpi/MyImage.jpg przy 160 pikselach kwadratowych
  • drawable-hdpi/MyImage.jpg przy 240 pikselach kwadratowych
  • drawable-xhdpi/MyImage.jpg przy 320 pikselach kwadratowych
  • drawable-xxhdpi/MyImage.jpg przy 480 pikselach kwadratowych
  • drawable-xxxhdpi/MyImage.jpg przy 640 pikselach kwadratowych

Mapa bitowa będzie zawsze renderowana w 160 jednostkach niezależnych od urządzenia. (Standardowy Xamarin.Forms szablon rozwiązania obejmuje tylko foldery hdpi, xhdpi i xxhdpi).

Projekt platformy UWP obsługuje schemat nazewnictwa map bitowych, który składa się ze współczynnika skalowania w pikselach na jednostkę niezależną od urządzenia jako wartość procentową, na przykład:

  • MyImage.scale-200.jpg przy 320 pikselach kwadratowych

Prawidłowe są tylko niektóre wartości procentowe. Przykładowe programy dla tej książki obejmują tylko obrazy z sufiksami scale-200, ale bieżące Xamarin.Forms szablony rozwiązań obejmują scale-100, scale-125, scale-150 i scale-400.

Podczas dodawania map bitowych do projektów platformy akcja kompilacji powinna być następująca:

  • iOS: BundleResource
  • Android: AndroidResource
  • Platforma UWP: zawartość

Przykład ImageTap tworzy dwa obiekty przypominające przyciski składające się z Image elementów z zainstalowanym obiektem TapGestureRecognizer . Ma to na celu, aby obiekty miały jeden cal kwadratowy. Właściwość Source Image jest ustawiana przy użyciu obiektów OnPlatform i On do odwołowania się do potencjalnie różnych nazw plików na platformach. Obrazy mapy bitowej zawierają liczby wskazujące ich rozmiar pikseli, dzięki czemu można zobaczyć, który rozmiar mapy bitowej jest pobierany i renderowany.

Paski narzędzi i ich ikony

Jednym z podstawowych zastosowań map bitowych specyficznych dla platformy jest Xamarin.Forms pasek narzędzi, który jest skonstruowany przez dodanie ToolbarItem obiektów do kolekcji zdefiniowanej ToolbarItems przez Page. ToobarItem pochodzi z, z MenuItem którego dziedziczy niektóre właściwości.

Najważniejsze ToolbarItem właściwości to:

  • Text tekst, który może się pojawić w zależności od platformy i Order
  • Icon typ FileImageSource obrazu, który może pojawić się w zależności od platformy i Order
  • Order typu ToolbarItemOrder, wyliczenie z trzema elementami członkowskimi, Default, Primaryi Secondary.

Liczba elementów powinna być ograniczona Primary do trzech lub czterech. Należy uwzględnić Text ustawienie dla wszystkich elementów. W przypadku większości platform tylko Primary elementy wymagają elementu Icon , ale system Windows 8.1 wymaga Icon elementu dla wszystkich elementów. Ikony powinny mieć kwadrat 32 jednostek niezależnych od urządzenia. Typ FileImageSource wskazuje, że są one specyficzne dla platformy.

Zdarzenie ToolbarItem jest uruchamiane po naciśnięciu Clicked , podobnie jak Button. ToolbarItem obsługuje Command również właściwości i CommandParameter często używane w połączeniu z maszyną MVVM. (Zobacz Rozdział 18, MVVM).

Zarówno systemy iOS, jak i Android wymagają, aby strona, na którą jest wyświetlany pasek narzędzi NavigationPage , lub strona przechodziła przez NavigationPageelement . Program ToolbarDemo ustawia MainPage właściwość klasy App na NavigationPage konstruktor z argumentem ContentPage i demonstruje procedurę obsługi konstrukcji i zdarzeń paska narzędzi.

Obrazy przycisków

Można również użyć map bitowych specyficznych dla platformy, aby ustawić właściwość mapy bitowej 32 jednostek niezależnych od urządzenia kwadratu, jak pokazano w przykładzie ButtonImage.Button Image

Uwaga

Korzystanie z obrazów na przyciskach zostało ulepszone. Zobacz Używanie map bitowych z przyciskami.