Obrázky v Xamarin.Forms

Stažení ukázky

Image je možné sdílet napříč platformami pomocí , lze je načíst speciálně pro každou platformu nebo si je můžete stáhnout k zobrazení.

Obrázky jsou zásadní součástí navigace v aplikaci, použitelnosti a brandingu. Xamarin.Forms Aplikace musí být schopné sdílet obrázky na všech platformách, ale také potenciálně zobrazovat různé obrázky na jednotlivých platformách.

Obrázky specifické pro platformu jsou také potřeba pro ikony a úvodní obrazovky. Tyto konfigurace je potřeba nakonfigurovat pro každou platformu.

Zobrazení obrázků

Xamarin.Forms používá Image zobrazení k zobrazení obrázků na stránce. Má několik důležitých vlastností:

• Xamarin_Forms _Image_Source" data-linktype="absolute-path">Source – ImageSource instance, File, Uri nebo Resource, která nastaví obrázek na zobrazení.
• Xamarin_Forms _Image_Aspect" data-linktype="absolutní_cesta">– jak změnit velikost obrázku v rámci meze, ve které se zobrazuje (zda se má roztáhnout, oříznutí Aspect nebo letterbox).

ImageSource Instance lze získat statickými metodami pro každý typ zdroje image:

• Xamarin_Forms _ImageSource_FromFile_System_String_" data-linktype="absolute-path">– vyžaduje název souboru nebo cestu k souboru, které lze přeložit FromFile na jednotlivých platformách.
• Xamarin_Forms _ImageSource_FromUri_System_Uri_" data-linktype="absolute-path">– vyžaduje objekt FromUri URI, např. new Uri("http://server.com/image.jpg") .
• FromResource– Vyžaduje identifikátor prostředku pro soubor obrázku vložený do aplikace nebo .NET Standard knihovny s FromResource
• Xamarin_Forms _ImageSource_FromStream_System_Func_System_IO_Stream__" data-linktype="absolute-path">– vyžaduje FromStream datový proud, který poskytuje data obrázku.

Vlastnost Xamarin_Forms _Image_Aspect" data-linktype="absolute-path">určuje, jak se obrázek bude škálovat podle Aspect oblasti zobrazení:

• Xamarin_Forms _Aspect_Fill" data-linktype="absolute-path">– roztáhne obrázek tak, aby zcela a přesně vyplnil Fill oblast zobrazení. To může vést ke zkreslení obrázku.
• Xamarin_Forms _Aspect_AspectFill" data-linktype="absolutní_cesta">– omíchá obrázek tak, aby vyplnil oblast zobrazení při zachování aspektu AspectFill (tj. bez poruchy).
• Xamarin_Forms _Aspect_AspectFit" data-linktype="absolutní_cesta">AspectFit – Letterboxes obrázek (v případě potřeby) tak, aby se celý obrázek vešl do oblasti zobrazení s prázdným prostorem přidaný do horní/dolní strany nebo po stranách v závislosti na tom, jestli je obrázek široký nebo vysoký.

Obrázky je možné načíst z místního souboru, z vloženéhoprostředku ,stáhnout nebo načíst ze streamu. Kromě toho mohou být v zobrazení zobrazeny ikony písma zadáním dat ikony Image písma v FontImageSource objektu. Další informace najdete v části Zobrazení ikon písem v průvodci písmy.

Místní image

Soubory obrázků je možné přidat do každého projektu aplikace a odkazovat na ně ze Xamarin.Forms sdíleného kódu. Tato metoda distribuce obrázků je nutná, pokud jsou obrázky pro jednotlivé platformy specifické, například při použití různých rozlišení na různých platformách nebo mírně odlišných vzhledů.

Pokud chcete ve všech aplikacích použít jeden obrázek,musí se na každé platformě použít stejný název souboru a měl by to být platný název prostředku Androidu (tj. jsou povolena pouze malá písmena, číslice, podtržítka a tečka).

• iOS – Preferovaný způsob správy a podpory imagí od verze iOS 9 je použití sad imagí katalogu assetů, které by měly obsahovat všechny verze image, které jsou nezbytné pro podporu různých zařízení a faktorů škálování pro aplikaci. Další informace najdete v tématu Přidání obrázků do sady imagí katalogu assetů.
• Android – Umístěte obrázky do adresáře Resources/drawable pomocí akce sestavení: AndroidResource. Dávají se také verze obrázku s vysokým a nízkým rozlišením (v podadresářích s odpovídajícím názvem Resources, jako jsou drawable-ldpi,drawable-HDPia drawable-xhdpi).
• Univerzální Windows platformy (UPW) – Ve výchozím nastavení by se image měly umisťovat do kořenového adresáře aplikace pomocí akce sestavení: Obsah. Image lze také umístit do jiného adresáře, který je pak určený pro konkrétní platformu. Další informace najdete v tématu Výchozí adresář obrázků v Windows.

Dodržování těchto pravidel pro pojmenovávání a umísťování souborů umožňuje následujícímu kódu XAML načíst a zobrazit obrázek na všech platformách:

<Image Source="waterfront.jpg" />

Ekvivalentní kód jazyka C# je následující:

var image = new Image { Source = "waterfront.jpg" };

Následující snímky obrazovky ukazují výsledek zobrazení místního obrázku na každé platformě:

Pro větší flexibilitu je možné pomocí vlastnosti vybrat jiný soubor obrázku nebo cestu pro některé nebo všechny platformy, jak je znázorněno Device.RuntimePlatform v tomto příkladu kódu:

image.Source = Device.RuntimePlatform == Device.Android
                ? ImageSource.FromFile("waterfront.jpg")
                : ImageSource.FromFile("Images/waterfront.jpg");

Nativní rozlišení (retina a vysoké rozlišení DPI)

iOS, Android a UPW zahrnují podporu různých rozlišení obrázků, kdy operační systém vybírá odpovídající image za běhu na základě možností zařízení. Xamarin.Forms používá rozhraní API nativních platforem pro načítání místních imagí, takže automaticky podporuje alternativní řešení, pokud jsou soubory správně pojmenovány a umístěny v projektu.

Vzhledem k tomu, že iOS 9 spravuje obrázky, je preferovaný způsob přetažení obrázků pro každé požadované rozlišení do příslušné sady obrázků katalogu assetů. Další informace najdete v tématu Přidání obrázků do sady imagí katalogu assetů.

Před iOSem 9 se verze image Retina mohly umístit do složky Resources ( prostředky) – dvakrát a třikrát s rozlišením s příponou @2x nebo @3x v názvu souboru před příponou souboru (např. myimage@2x.png). Apple ale tuto metodu práce s obrázky v aplikaci pro iOS už nepoužívá. Další informace najdete v tématu Velikosti a názvy souborů obrázků.

Obrázky alternativního rozlišení Androidu by se měly v projektu pro Android umístit do speciálně pojmenovaných adresářů, jak je znázorněno na následujícím snímku obrazovky:

UWP image file names can be suffixed with beforethe file extension , where is the percentage of scaling applied to the xxx asset, e.g. xxx. Obrázky je pak možné odkazovat v kódu nebo XAML bez modifikátoru škálování, například jednoduše myimage.png. Platforma vybere nejbližší odpovídající škálování prostředků na základě aktuálního rozlišení DPI na displeji.

Další ovládací prvky, které zobrazují obrázky

Některé ovládací prvky mají vlastnosti, které zobrazují obrázek, například:

• Buttonmá Xamarin_Forms _Button_ImageSource Button data-linktype="absolute-path">, kterou lze nastavit na rastrový obrázek, který se má ImageSource zobrazit v objektu Button . Další informace najdete v tématu Použití rastrových obrázků s tlačítky.

• ImageButtonmá Xamarin_Forms ImageButton _ImageButton_Source data-linktype="absolute-path">, kterou lze Source nastavit ImageButton na obrázek, který se má zobrazit v objektu . Další informace najdete v tématu Nastavení zdroje image.

• ToolbarItemmá vlastnost Xamarin_Forms ToolbarItem _MenuItem_IconImageSource" data-linktype="absolute-path">, kterou je možné nastavit na obrázek načtený ze souboru, vloženého IconImageSource prostředku, identifikátoru URI nebo datového proudu.

• ImageCellmá vlastnost Xamarin_Forms ImageCell _ImageCell_ImageSource" data-linktype="absolute-path">, kterou lze nastavit na obrázek načtený ze souboru, vloženého ImageSource prostředku, identifikátoru URI nebo streamu.

• Page. Každý typ stránky odvozený z má Page vlastnosti Page Xamarin_Forms _Page_IconImageSource" data-linktype="absolute-path">and Xamarin_Forms IconImageSource _Page_BackgroundImageSource" data-linktype="absolute-path">, BackgroundImageSource kterým lze přiřadit soubor, vložený prostředek, identifikátor URI nebo stream. Za určitých okolností, například při zobrazení , se ikona zobrazí, pokud to platforma NavigationPageContentPage podporuje.

  Důležité

  V iOSu Xamarin_Forms _Page_IconImageSource" data-linktype="absolute-path">vlastnost nelze naplnit z obrázku v sadě obrázků Page.IconImageSource katalogu assetů. Místo toho načtěte obrázky ikon Page.IconImageSource pro vlastnost ze souboru, vloženého prostředku, identifikátoru URI nebo streamu.

Vložené image

Vložené bitové kopie jsou také dodávány s aplikací (jako jsou místní bitové kopie), ale místo kopie image ve struktuře souborů každé aplikace je soubor bitové kopie vložen do sestavení jako prostředek. Tato metoda distribuce imagí se doporučuje při použití identických imagí na každé platformě a je zvláště vhodná pro vytváření komponent, protože image je součástí kódu.

Pokud chcete vložit obrázek do projektu, klikněte pravým tlačítkem a přidejte nové položky a vyberte obrázky, které chcete přidat. Ve výchozím nastavení bude image mít akci sestavení: Žádné; Tuto hodnotu je potřeba nastavit na Build Action: EmbeddedResource (Akce sestavení: EmbeddedResource).

Pokud vložené obrázky umístěte do složek v rámci projektu, oddělují se také názvy složek tečkami (.). v ID prostředku. Přesunutí image beach.jpg do složky s názvem MyImages by mělo za následek ID prostředku WorkingWithImages.MyImages.beach.jpg

Kód pro načtení vložené image jednoduše předá ID prostředku metodě , jak je znázorněno níže:

Image embeddedImage = new Image
{
    Source = ImageSource.FromResource("WorkingWithImages.beach.jpg", typeof(MyClass).GetTypeInfo().Assembly)
};

V současné době není k dispozici žádný implicitní převod pro identifikátory prostředků. Místo toho je nutné použít ImageSource.FromResource nebo new ResourceImageSource() pro načtení vložených obrázků.

Následující snímky obrazovky ukazují výsledek zobrazení vložené image na každé platformě:

XAML

Vzhledem k tomu, že není k dispozici žádný předdefinovaný konvertor typu z string na ResourceImageSource , nelze tyto typy imagí nativně načíst pomocí jazyka XAML. Místo toho je možné napsat jednoduché vlastní rozšíření kódu XAML pro načtení imagí pomocí ID prostředku zadaného v jazyce XAML:

[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}

Chcete-li použít toto rozšíření, přidejte vlastní xmlns kód do XAML pomocí správného oboru názvů a hodnot sestavení pro projekt. Zdroj bitové kopie lze následně nastavit pomocí této syntaxe: {local:ImageResource WorkingWithImages.beach.jpg} . Úplný příklad XAML je uveden níže:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
   x:Class="WorkingWithImages.EmbeddedImagesXaml">
 <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
   <!-- use a custom Markup Extension -->
   <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
 </StackLayout>
</ContentPage>

Řešení potíží s vloženými obrázky

Ladění kódu

Vzhledem k tomu, že v některých případech je obtížné pochopit, proč se nenačítá konkrétní prostředek obrázku, lze do aplikace dočasně přidat následující kód pro ladění, aby bylo možné ověřit, zda jsou prostředky správně nakonfigurovány. Vypíše všechny známé prostředky vložené do daného sestavení do konzoly , která pomůže ladit problémy při načítání prostředků.

using System.Reflection;
// ...
// NOTE: use for debugging, not in released app code!
var assembly = typeof(MyClass).GetTypeInfo().Assembly;
foreach (var res in assembly.GetManifestResourceNames())
{
    System.Diagnostics.Debug.WriteLine("found resource: " + res);
}

Obrázky vložené v jiných projektech

Ve výchozím nastavení ImageSource.FromResource metoda vyhledává pouze obrázky ve stejném sestavení jako kód volající ImageSource.FromResource metody. Pomocí ladicího kódu výše můžete určit, která sestavení obsahují konkrétní prostředek, a to tak, že změníte typeof() příkaz na Type známý jako v každém sestavení.

Nicméně zdrojové sestavení prohledávané pro vložený obrázek lze zadat jako argument ImageSource.FromResource metody:

var imageSource = ImageSource.FromResource("filename.png",
            typeof(MyClass).GetTypeInfo().Assembly);

Stáhnout obrázky

Obrázky lze automaticky stáhnout pro zobrazení, jak je znázorněno v následujícím kódu XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="WorkingWithImages.DownloadImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="Image UriSource Xaml" />
    <Image Source="https://aka.ms/campus.jpg" />
    <Label Text="campus.jpg gets downloaded from microsoft.com" />
  </StackLayout>
</ContentPage>

Ekvivalentní kód jazyka C# je následující:

var webImage = new Image {
     Source = ImageSource.FromUri(
        new Uri("https://aka.ms/campus.jpg")
     ) };

Xamarin_Forms _ImageSource_FromUri_System_Uri_ "data-LINKTYPE =" absolutní cesta ">ImageSource.FromUri metoda vyžaduje Uri objekt a vrátí nový UriImageSource , který načte z Uri .

K dispozici je také implicitní převod řetězců identifikátorů URI, takže následující příklad bude fungovat také takto:

webImage.Source = "https://aka.ms/campus.jpg";

Následující snímky obrazovky ukazují výsledek zobrazení vzdálené image na každé platformě:

Mezipaměť stažené image

UriImageSourcePodporuje také ukládání stažených imagí do mezipaměti, které jsou nakonfigurovány prostřednictvím následujících vlastností:

• Xamarin_Forms _UriImageSource_CachingEnabled "data-LINKTYPE =" absolutní cestu ">CachingEnabled – zda je povoleno ukládání do mezipaměti ( true ve výchozím nastavení).
• Xamarin_Forms _UriImageSource_CacheValidity "data-LINKTYPE =" absolutní cestu ">CacheValidity -A TimeSpan , která určuje, jak dlouho bude obrázek uložen místně.

Ukládání do mezipaměti je ve výchozím nastavení povolená a image se uloží místně po dobu 24 hodin. Chcete-li zakázat ukládání do mezipaměti pro konkrétní obrázek, vytvořte instanci zdroje bitové kopie následujícím způsobem:

image.Source = new UriImageSource { CachingEnabled = false, Uri = new Uri("https://server.com/image") };

Chcete-li nastavit konkrétní dobu mezipaměti (například 5 dní), vytvořte instanci zdroje bitové kopie následujícím způsobem:

webImage.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Integrovaná mezipaměť usnadňuje podporu scénářů jako rolovacích seznamů obrázků, kde můžete nastavit (nebo navazovat) obraz v každé buňce a nechat vestavěnou mezipaměť pořídit opětovné načtení obrázku, když se buňka posouvá zpátky do zobrazení.

Animované soubory GIF

Xamarin.Forms zahrnuje podporu pro zobrazení malých a animovaných obrázků GIF. K tomu je potřeba nastavit Xamarin_Forms vlastnost _Image_Source data-LINKTYPE = "absolutní cesta" >Image.Source na animovaný soubor GIF:

<Image Source="demo.gif" />

Ve výchozím nastavení se při načtení animovaného obrázku GIF nehraje. Důvodem je skutečnost, IsAnimationPlaying že vlastnost, která určuje, zda je animovaný soubor GIF přehráván nebo zastaven, má výchozí hodnotu false . Tato vlastnost typu bool je zajištěna BindableProperty objektem, což znamená, že se může jednat o cíl datové vazby a stylu.

Proto pokud je animovaný obrázek GIF načtený, nebude přehrán, dokud IsAnimationPlaying vlastnost není nastavena na hodnotu true . Přehrávání je pak možné zastavit nastavením IsAnimationPlaying vlastnosti na false . Všimněte si, že tato vlastnost nemá žádný vliv, pokud se zobrazuje zdroj obrázku, který není GIF.

Ikony a úvodní obrazovky

I když se nevztahují k Image zobrazení, ikony aplikace a úvodní obrazovky jsou také důležité k použití imagí v Xamarin.Forms projektech.

Nastavení ikon a úvodních obrazovek pro Xamarin.Forms aplikace se provádí v každém z aplikačních projektů. To znamená, že se generují správně velikosti imagí pro iOS, Android a UWP. Tyto Image by se měly pojmenovat a umístit podle požadavků jednotlivých platforem.

Ikony

Další informace o vytváření těchto aplikačních prostředků najdete v článku pokyny pro práci s imagemi, Google Iconographya UWP pro dlaždice a ikony

Kromě toho mohou zobrazení ikony písma zobrazit Image zadáním dat ikony písma v FontImageSource objektu. Další informace najdete v tématu zobrazení ikon písem v průvodci písmy .

Úvodní obrazovky

Úvodní obrazovka (označovaná také jako úvodní obrazovka nebo výchozí obrázek) vyžaduje jenom aplikace pro iOS a UWP.

přečtěte si dokumentaci pro iOS, která pracuje s obrázky a úvodními obrazovkami Windows Dev Center.

Související odkazy

• WorkingWithImages (ukázka)
• iOS při práci s obrázky
• Android Iconography
• Pokyny pro prvky dlaždice a ikony