Sdílet prostřednictvím

Shrnutí kapitoly 13. Bitmapy

  • Článek

Poznámka:

Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.

Prvek Xamarin.FormsImage zobrazí rastrový obrázek. Xamarin.Forms Všechny platformy podporují formáty souborů JPEG, PNG, GIF a BMP.

Rastrové Xamarin.Forms obrázky pocházejí ze čtyř míst:

  • Přes web, jak je určeno adresou URL
  • Vloženo jako prostředek ve sdílené knihovně
  • Vloženo jako prostředek v projektech aplikací platformy
  • Odkudkoliv, na které lze odkazovat objektem .NET Stream , včetně MemoryStream

Rastrové prostředky ve sdílené knihovně jsou nezávislé na platformě, zatímco rastrové prostředky v projektech platformy jsou specifické pro danou platformu.

Poznámka:

Text knihy odkazuje na přenosné knihovny tříd, které byly nahrazeny knihovnami .NET Standard. Veškerý vzorový kód z knihy byl převeden na použití standardních knihoven .NET.

Rastrový obrázek je určen nastavením Source vlastnosti Image objektu typu ImageSource, abstraktní třída se třemi deriváty:

  • UriImageSource pro přístup k bitmapu přes web na základě objektu Uri nastaveného na jeho Uri vlastnost
  • FileImageSource pro přístup k rastru uloženému v projektu aplikace platformy na základě složky a cesty k souboru nastavené na její File vlastnost
  • StreamImageSource pro načtení rastrového obrázku pomocí objektu .NET Stream určeného vrácením Stream Func ze sady na jeho Stream vlastnost

Alternativně (a častěji) můžete použít následující statické metody ImageSource třídy, z nichž všechny vracejí ImageSource objekty:

Neexistuje žádný ekvivalent Image.FromResource třídy metod. Třída UriImageSource je užitečná, pokud potřebujete řídit ukládání do mezipaměti. Třída FileImageSource je užitečná v jazyce XAML. StreamImageSource je užitečná pro asynchronní načítání Stream objektů, zatímco ImageSource.FromStream je synchronní.

Bitmapy nezávislé na platformě

Projekt WebBitmapCode načte rastrový obrázek přes web pomocí ImageSource.FromUri. Prvek Image je nastaven na Content vlastnost ContentPage, takže je omezena na velikost stránky. Bez ohledu na velikost rastrového obrázku se omezený Image prvek roztáhne na velikost svého kontejneru a rastrový obrázek se zobrazí v maximální velikosti v rámci Image prvku při zachování poměru stran rastrového obrázku. Image Oblasti nad rámec rastrového obrázku mohou být barevně obarveny BackgroundColor.

Ukázka WebBitmapXaml je podobná, ale jednoduše nastaví Source vlastnost na adresu URL. Převod zpracovává ImageSourceConverter třída.

Přizpůsobit a vyplnit

Způsob roztažení rastrového obrázku můžete určit nastavením Aspect vlastnosti Image na jeden z následujících členů výčtu Aspect :

  • AspectFit: respektuje poměr stran (výchozí)
  • Fill: vyplňuje oblast, nerespektuje poměr stran.
  • AspectFill: vyplní oblast, ale respektuje poměr stran, který se provádí oříznutím části rastrového obrázku.

Vložené prostředky

Rastrový soubor můžete přidat do pcL nebo do složky v PCL. Dejte jí akci sestavení EmbeddedResource. Ukázka ResourceBitmapCode ukazuje použití ImageSource.FromResource k načtení souboru. Název prostředku předaný metodě se skládá z názvu sestavení, následovaného tečkou, následovaný volitelným názvem složky a tečkou následovanou názvem souboru.

Program nastaví VerticalOptions a HorizontalOptions vlastnosti objektu LayoutOptions.CenterImage , což způsobíImage, že prvek není unconstrained. Rastrový Image obrázek má stejnou velikost:

  • V iOSu a Androidu Image je velikost rastrového obrázku v pixelech. Mezi rastrovými pixely a pixely obrazovky je mapování 1:1.
  • Na Univerzální platforma Windows Image je velikost rastrového obrázku v jednotkách nezávislých na zařízení. Na většině zařízení zabírá každý rastrový pixel více pixelů obrazovky.

Ukázka StackedBitmap vloží Image do svislého objektu StackLayout XAML. Pojmenované ImageResourceExtension rozšíření značek pomáhá odkazovat na vložený prostředek v XAML. Tato třída načítá prostředky pouze ze sestavení, ve kterém se nachází, takže ji nelze umístit do knihovny.

Další informace o velikosti

Často je žádoucí formátovat rastrové obrázky konzistentně mezi všemi platformami. Experimentování s StackedBitmap, můžete nastavit WidthRequest prvek Image ve svislém směru StackLayout , aby velikost byla konzistentní mezi platformami, ale velikost můžete zmenšit pouze pomocí této techniky.

Můžete také nastavit HeightRequest , aby velikost obrázků byla konzistentní na platformách, ale omezená šířka rastrového obrázku omezí všestrannost této techniky. U obrázku ve svislém směru StackLayoutHeightRequest byste se měli vyhnout.

Nejlepší je začít rastrovým obrázkem širším než šířka telefonu v jednotkách nezávislých na zařízení a nastavit WidthRequest požadovanou šířku v jednotkách nezávislých na zařízení. To je znázorněno v ukázce DeviceIndBitmapSize .

MadTeaParty zobrazuje kapitolu 7 Lewis Carrollova dobrodružství v Divočině s původními ilustracemi Johna Tenniela:

Triple screenshot of mad tea party

Procházení a čekání

Ukázka ImageBrowser umožňuje uživateli procházet stock obrázky uložené na webu Xamarin. Používá třídu .NET WebRequest ke stažení souboru JSON se seznamem rastrových obrázků.

Poznámka:

Xamarin.Forms programy by neměly používat HttpClient místo WebRequest přístupu k souborům přes internet.

Program používá ActivityIndicator k označení, že se něco děje. Při načítání každého rastrového obrázku je vlastnost Image truejen IsLoading pro čtení . Vlastnost IsLoading je zajištěna vlastností s možností vázání, takže PropertyChanged událost se aktivuje, když se tato vlastnost změní. Program připojí obslužnou rutinu k této události a použije aktuální nastavení IsLoaded k nastavení IsRunning vlastnosti objektu ActivityIndicator.

Streamování rastrových obrázků

Metoda ImageSource.FromStream vytvoří na ImageSource základě rozhraní .NET Stream. Metoda musí být předán Func objekt, který vrací Stream objekt.

Přístup ke streamům

Ukázka BitmapStreams ukazuje, jak pomocí ImaageSource.FromStream metody načíst rastrový obrázek uložený jako vložený prostředek a načíst rastrový obrázek přes web.

Generování rastrových obrázků za běhu

Xamarin.Forms Všechny platformy podporují nekomprimovaný formát souboru BMP, který lze snadno sestavit v kódu a pak uložit do MemoryStream. Tato technika umožňuje algoritmicky vytvářet rastrové obrázky za běhu, jak je implementováno ve BmpMaker třídě v knihovně Xamrin.FormsBook.Toolkit .

Ukázka "Do It Yourself" DiyGradientBitmap ukazuje použití BmpMaker k vytvoření rastrového obrázku s přechodovým obrázkem.

Rastrové obrázky specifické pro platformu

Xamarin.Forms Všechny platformy umožňují ukládání rastrových obrázků do sestavení aplikace platformy. Při načítání Xamarin.Forms aplikací jsou tyto rastrové obrázky platformy typu FileImageSource. Používáte je pro:

Sestavení platformy již obsahují rastrové obrázky pro ikony a úvodní obrazovky:

  • V projektu iOS ve složce Resources
  • V projektu Android v podsložkách složky Resources
  • V projektech Windows ve složce Assets (i když platformy Windows neomezují rastrové obrázky na danou složku)

Ukázka PlatformyBitmaps používá kód k zobrazení ikony z projektů aplikací platformy.

Rozlišení rastrových obrázků

Všechny platformy umožňují ukládání více verzí rastrových obrázků pro různá rozlišení zařízení. Za běhu se načte správná verze na základě rozlišení zařízení na obrazovce.

V iOSu jsou tyto rastrové obrázky rozlišeny příponou názvu souboru:

  • Žádná přípona pro zařízení s rozlišením 160 DPI (1 pixel na jednotku nezávislou na zařízení)
  • Přípona "@2x" pro zařízení s rozlišením 320 DPI (2 pixely na DIU)
  • Přípona "@3x" pro zařízení s rozlišením 480 DPI (3 pixely na DIU)

Rastrový obrázek, který se má zobrazit jako jednopalcový čtverec, by existoval ve třech verzích:

  • MyImage.jpg na čtverci 160 pixelů
  • MyImage@2x.jpg při 320 pixelech čtverce
  • MyImage@3x.jpg při 480 pixelech čtverce

Program by odkazoval na tento rastr jako MyImage.jpg, ale správná verze je načtena za běhu na základě rozlišení obrazovky. Při nekontrénování se rastrový obrázek vždy vykreslí na 160 jednotek nezávislých na zařízení.

Pro Android jsou rastrové obrázky uložené v různých podsložkách složky Resources :

  • drawable-ldpi (low DPI) pro zařízení s 120 DPI (0,75 pixelů do DIU)
  • drawable-mdpi (medium) pro zařízení s rozlišením 160 DPI (1 pixel do DIU)
  • drawable-hdpi (high) pro zařízení s rozlišením 240 DPI (1,5 pixelů do DIU)
  • drawable-xhdpi (extra high) pro 320 DPI zařízení (2 pixely do DIU)
  • drawable-xxhdpi (extra high) pro zařízení s 480 DPI (3 pixely do DIU)
  • drawable-xxxhdpi (tři dodatečné maximum) pro 640 DPI zařízení (4 pixely do DIU)

U rastrového obrázku určeného k vykreslení na jeden čtverec palce budou mít různé verze rastrového obrázku stejný název, ale jinou velikost a budou uloženy v těchto složkách:

  • drawable-ldpi/MyImage.jpg at 120 pixels square
  • drawable-mdpi/MyImage.jpg na čtverci 160 pixelů
  • drawable-hdpi/MyImage.jpg at 240 pixels square
  • drawable-xhdpi/MyImage.jpg na 320 pixelů čtverce
  • drawable-xxhdpi/MyImage.jpg at 480 pixels square
  • drawable-xxxhdpi/MyImage.jpg at 640 pixels square

Rastrový obrázek se vždy vykreslí na 160 jednotek nezávislých na zařízeních. (Standardní Xamarin.Forms šablona řešení obsahuje pouze složky hdpi, xhdpi a xxhdpi.)

Projekt UPW podporuje rastrové schéma pojmenování, které se skládá z faktoru škálování v pixelech na jednotku nezávislou na zařízení jako procento, například:

  • MyImage.scale-200.jpg na 320 pixelů čtverce

Platné jsou pouze některé procenta. Ukázkové programy pro tuto knihu zahrnují pouze obrázky s příponou scale-200 , ale aktuální Xamarin.Forms šablony řešení zahrnují škálování-100, škálování-125, škálování-150 a škálování-400.

Při přidávání rastrových obrázků do projektů platformy by měla být akce sestavení:

  • iOS: BundleResource
  • Android: AndroidResource
  • UPW: Obsah

Ukázka ImageTap vytvoří dva objekty podobné tlačítkům, které se skládají z Image prvků s nainstalovaným objektem TapGestureRecognizer . Je zamýšleno, aby objekty byly jednopalcové čtvercové. Vlastnost Source Image je nastavena pomocí OnPlatform a On objekty odkazovat na potenciálně různé názvy souborů na platformách. Rastrové obrázky obsahují čísla označující jejich velikost pixelů, abyste viděli, která velikost rastrového obrázku se načte a vykresluje.

Panely nástrojů a jejich ikony

Jedním z primárních použití rastrových obrázků specifických pro platformu je Xamarin.Forms panel nástrojů, který je vytvořen přidáním ToolbarItem objektů do ToolbarItems kolekce definované .Page ToobarItem je odvozen od toho, z MenuItem něhož dědí některé vlastnosti.

ToolbarItem Nejdůležitější vlastnosti jsou:

  • Text pro text, který se může zobrazit v závislosti na platformě a Order
  • Icon typu FileImageSource obrázku, který se může zobrazit v závislosti na platformě a Order
  • Order typu ToolbarItemOrder, výčet se třemi členy, Default, Primarya Secondary.

Počet Primary položek by měl být omezen na tři nebo čtyři. Měli byste zahrnout Text nastavení pro všechny položky. U většiny platforem vyžadují Icon pouze Primary položky, ale Windows 8.1 vyžaduje Icon pro všechny položky. Ikony by měly být 32 jednotek nezávislých na zařízeních. Typ FileImageSource označuje, že jsou specifické pro platformu.

Clicked Aktivuje ToolbarItem událost, když na ni klepnete, podobně jako Button. ToolbarItem také podporuje Command a CommandParameter vlastnosti často používané v souvislosti s MVVM. (Viz Kapitola 18, MVVM).

IOS i Android vyžadují, aby stránka, která zobrazuje panel nástrojů, NavigationPage byla nebo stránka přecháděná na stránku NavigationPage. Program ToolbarDemo nastaví MainPage vlastnost své App třídy naNavigationPage konstruktor s argumentem ContentPage a demonstruje konstrukci a obslužnou rutinu události panelu nástrojů.

Obrázky tlačítek

Rastrové obrázky specifické pro platformu můžete také použít k nastavení Image vlastnosti na rastrový obrázek 32 jednotek nezávislých na zařízení, jak ukazuje ukázka ButtonImage.Button

Poznámka:

Použití obrázků na tlačítkách bylo vylepšeno. Viz Použití rastrových obrázků s tlačítky.