Aracılığıyla paylaş

Bölüm 13'ün özeti. Bit Eşlemler

Not

Bu kitap 2016 baharında yayımlanmıştır ve o zamandan beri güncellenmemiştir. Kitapta değerli kalan çok şey vardır, ancak bazı malzemeler eskidir ve bazı konular artık tamamen doğru veya eksiksiz değildir.

Xamarin.FormsImage öğesi bir bit eşlem görüntüler. Tüm platformlar Xamarin.Forms JPEG, PNG, GIF ve BMP dosya biçimlerini destekler.

içindeki Xamarin.Forms bit eşlemler dört yerden gelir:

  • URL tarafından belirtilen web üzerinden
  • Paylaşılan kitaplığa kaynak olarak eklenmiş
  • Platform uygulaması projelerine kaynak olarak eklenmiş
  • .NET Stream nesnesi tarafından başvurulabilecek her yerden, MemoryStream

Paylaşılan kitaplıktaki bit eşlem kaynakları platformdan bağımsızdır, platform projelerindeki bit eşlem kaynakları ise platforma özgüdür.

Not

Kitabın metni, .NET Standart kitaplıklarıyla değiştirilen Taşınabilir Sınıf Kitaplıkları'na başvuruda bulunur. Kitaptaki tüm örnek kodlar .NET standart kitaplıklarını kullanacak şekilde dönüştürüldü.

bit eşlem, öğesinin Source Image özelliği türünde bir nesneye ImageSourceayarlanarak belirtilir ve üç türevi olan bir soyut sınıftır:

  • UriImageSourceözelliğine ayarlanmış bir nesneye göre web üzerinden bit Uri eşlemlere erişmek için Uri
  • FileImageSourceözelliğine ayarlanmış bir klasör ve dosya yolunu temel alan bir platform uygulaması projesinde depolanan bit eşlemlere erişmek için File
  • StreamImageSourcebir kümeden Func özelliğine döndürerek belirtilen bir .NET Stream nesnesi kullanarak bit Stream eşlem yüklemek için Stream

Alternatif olarak (ve daha yaygın olarak) sınıfın aşağıdaki statik yöntemlerini ImageSource kullanabilirsiniz ve bunların tümü nesneleri döndürür ImageSource :

Yöntemlerin sınıf eşdeğeri Image.FromResource yoktur. Önbelleğe UriImageSource almayı denetlemeniz gerekiyorsa sınıfı kullanışlıdır. sınıfı FileImageSource XAML'de kullanışlıdır. StreamImageSource nesnelerin zaman uyumsuz yüklenmesi Stream için yararlıdır, ancak ImageSource.FromStream zaman uyumludur.

Platformdan bağımsız Bit Eşlemler

WebBitmapCode projesi kullanarak ImageSource.FromUriweb üzerinden bir bit eşlem yükler. Image öğesi öğesinin Content ContentPageözelliğine ayarlanır, bu nedenle sayfanın boyutuyla kısıtlanır. Bit eşlem boyutu ne olursa olsun, kısıtlanmış Image bir öğe kapsayıcısının boyutuna kadar uzatılır ve bit eşlem, bit eşlemin en boy oranı korunarak öğenin içindeki Image en büyük boyutunda görüntülenir. Bit eşlem ötesindeki Image alanları ile BackgroundColorrenklendirilebilir.

WebBitmapXaml örneği benzerdir, ancak yalnızca özelliğini URL'ye ayarlarSource. Dönüştürme sınıfı tarafından ImageSourceConverter işlenir.

Sığdır ve doldur

öğesinin özelliğini Image numaralandırmanın aşağıdaki üyelerinden Aspect birine ayarlayarak Aspect bit eşleminin nasıl uzatılmış olduğunu denetleyebilirsiniz:

  • AspectFit: en boy oranına (varsayılan) göre
  • Fill: alanı doldurur, en boy oranına saygı göstermez
  • AspectFill: alanı doldurur, ancak bit eşlem parçası kırpılarak gerçekleştirilir, en boy oranına dikkat eder

Ekli kaynaklar

Bit eşlem dosyasını PCL'ye veya PCL'deki bir klasöre ekleyebilirsiniz. EmbeddedResource'un Derleme Eylemini verin. ResourceBitmapCode örneği, dosyayı yüklemek için nasıl kullanılacağını ImageSource.FromResource gösterir. Yöntemine geçirilen kaynak adı derleme adından, ardından bir nokta ve ardından isteğe bağlı klasör adı ve bir nokta ve ardından dosya adından oluşur.

Program öğesinin VerticalOptions ve HorizontalOptions özelliklerini Image olarak LayoutOptions.Centerayarlar ve bu da öğeyi Image kısıtlanmamış hale getirir. Image ve bit eşlem aynı boyuttadır:

  • iOS ve Android'de bit Image eşlem piksel boyutudur. Bit eşlem pikselleri ile ekran pikselleri arasında bire bir eşleme vardır.
  • Evrensel Windows Platformu, Image bit eşleminin cihazdan bağımsız birimlerdeki piksel boyutudur. Çoğu cihazda her bit eşlem pikseli birden çok ekran pikseli kaplar.

StackedBitmap örneği, XAML'de dikey StackLayout olarak bir Image ekler. adlı ImageResourceExtension bir işaretleme uzantısı, XAML'deki ekli kaynağa başvurmaya yardımcı olur. Bu sınıf yalnızca bulunduğu derlemedeki kaynakları yükler, bu nedenle bir kitaplığa yerleştiremez.

Boyutlandırma hakkında daha fazla bilgi

Bit eşlemleri tüm platformlar arasında tutarlı bir şekilde boyutlandırmak genellikle tercih edilir. StackedBitmap ile denemeler yaparak, boyutu platformlar arasında tutarlı hale getirmek için dikey StackLayout öğede Image bir ayarlayabilirsinizWidthRequest, ancak yalnızca bu tekniği kullanarak boyutu küçültebilirsiniz.

Ayrıca, görüntü boyutlarının platformlarda tutarlı olmasını sağlamak için öğesini de ayarlayabilirsiniz HeightRequest , ancak bit eşlemin kısıtlanmış genişliği bu tekniğin çok yönlülüğünü sınırlandıracaktır. Dikey StackLayoutHeightRequest içindeki bir görüntü için bundan kaçınılmalıdır.

En iyi yaklaşım, cihazdan bağımsız birimlerde telefon genişliğinden daha geniş bir bit eşlem ile başlamak ve cihazdan bağımsız birimlerde istenen genişliğe ayarlamaktır WidthRequest . Bu, DeviceIndBitmapSize örneğinde gösterilmiştir.

MadTeaParty, John Tenniel'in orijinal çizimleriyle Lewis Carroll'ın Alice'in Harikalar Diyarındaki Maceraları'nın 7. Bölümünü görüntüler:

Çılgın çay partisinin üçlü ekran görüntüsü

Gözatma ve bekleme

ImageBrowser örneği, kullanıcının Xamarin web sitesinde depolanan stok görüntülerine göz atmasını sağlar. Bit eşlem listesini içeren bir JSON dosyası indirmek için .NET WebRequest sınıfını kullanır.

Not

Xamarin.Formsprogramları, İnternet üzerinden dosyalara erişmek yerine WebRequest kullanmalıdırHttpClient.

Program, bir şeyler olduğunu belirtmek için bir ActivityIndicator kullanır. Her bit eşlem yüklenirken salt okunur IsLoading özelliği Image olur true. IsLoading özelliği bağlanabilir bir özellik tarafından yedeklenir, bu nedenle bu özellik değiştiğinde bir PropertyChanged olay tetiklenir. Program bu olaya bir işleyici ekler ve özelliğini ActivityIndicatorayarlamak IsRunning için geçerli ayarını IsLoaded kullanır.

Bit eşlemleri akışla aktarma

ImageSource.FromStream yöntemi, .NET Streamtabanlı bir ImageSource oluşturur. yöntemine nesne döndüren bir Func Stream nesne geçirilmelidir.

Akışlara erişme

BitmapStreams örneği, ekli kaynak olarak depolanan bir bit eşlemi yüklemek ve web'de bit eşlem yüklemek için yönteminin nasıl kullanılacağını ImaageSource.FromStream gösterir.

Çalışma zamanında bit eşlem oluşturma

Tüm platformlar Xamarin.Forms sıkıştırılmamış BMP dosya biçimini destekler. Bu, kodda kolayca oluşturulur ve içinde depolanır MemoryStream. Bu teknik, Xamrin.FormsBook.Toolkit kitaplığındaki BmpMaker sınıfında uygulandığı gibi çalışma zamanında algoritmalı bit eşlemler oluşturmaya olanak tanır.

"Kendin Yap" DiyGradientBitmap örneği, gradyan görüntü ile bit eşlem oluşturmak için kullanımını BmpMaker gösterir.

Platforma özgü bit eşlemler

Tüm platformlar Xamarin.Forms bit eşlemlerin platform uygulama derlemelerinde depolanmasına izin verir. Bir Xamarin.Forms uygulama tarafından alındığında, bu platform bit eşlemleri türündedir FileImageSource. Bunları aşağıdakiler için kullanırsınız:

Platform derlemeleri zaten simgeler ve giriş ekranları için bit eşlemler içerir:

  • iOS projesinin Kaynaklar klasöründe
  • Android projesinde, Kaynaklar klasörünün alt klasörlerinde
  • Windows projelerinde , Varlıklar klasöründe (Windows platformları bit eşlemleri bu klasörle kısıtlamasa da)

PlatformBitmaps örneği, platform uygulaması projelerinden bir simge görüntülemek için kodu kullanır.

Bit eşlem çözünürlükleri

Tüm platformlar, farklı cihaz çözünürlükleri için bit eşlem görüntülerinin birden çok sürümünün depolanmasına izin verir. Çalışma zamanında, ekranın cihaz çözünürlüğüne göre uygun sürüm yüklenir.

iOS'ta, bu bit eşlemler dosya adında bir sonekle ayırt edilir:

  • 160 DPI cihazı için sonek yok (cihazdan bağımsız üniteye 1 piksel)
  • 320 DPI cihazı için '@2x' soneki (DIU'ya 2 piksel)
  • 480 DPI cihazı için '@3x' soneki (DIU'ya 3 piksel)

Bir inç kare olarak görüntülenmesi amaçlanan bit eşlem üç sürümde bulunur:

  • 160 piksel karede MyImage.jpg
  • MyImage@2x.jpg 320 piksel karede
  • MyImage@3x.jpg 480 piksel kare

Program bu bit eşlemi MyImage.jpg olarak adlandırırdı, ancak ekranın çözünürlüğüne göre uygun sürüm çalışma zamanında alınır. Kısıtlanmamış olduğunda bit eşlem her zaman cihazdan bağımsız 160 ünitede işlenir.

Android için bit eşlemler Resources klasörünün çeşitli alt klasörlerinde depolanır:

  • 120 DPI cihazı için drawable-ldpi (düşük DPI) (DIU'ya 0,75 piksel)
  • 160 DPI cihazı için drawable-mdpi (orta) (DIU'ya 1 piksel)
  • 240 DPI cihazı için drawable-hdpi (yüksek) (DIU'ya 1,5 piksel)
  • 320 DPI cihazı için drawable-xhdpi (fazladan yüksek) (DIU'ya 2 piksel)
  • 480 DPI cihazı için drawable-xxhdpi (ekstra yüksek) (DIU'ya 3 piksel)
  • 640 DPI cihazı için drawable-xxxhdpi (üç ekstra yüksek) (DIU'ya 4 piksel)

Bir inç karede işlenmesi amaçlanan bir bit eşlem için, bit eşlemin çeşitli sürümleri aynı ada ancak farklı bir boyuta sahip olur ve şu klasörlerde depolanır:

  • 120 piksel karede drawable-ldpi/MyImage.jpg
  • 160 piksel karede çizilebilir mdpi/MyImage.jpg
  • 240 piksel karede çizilebilir hdpi/MyImage.jpg
  • 320 piksel karede çizilebilir xhdpi/MyImage.jpg
  • 480 piksel karede drawable-xxhdpi/MyImage.jpg
  • 640 piksel karede drawable-xxxhdpi/MyImage.jpg

Bit eşlem her zaman cihazdan bağımsız 160 ünitede işlenir. (Standart Xamarin.Forms çözüm şablonu yalnızca hdpi, xhdpi ve xxhdpi klasörlerini içerir.)

UWP projesi, yüzde olarak cihazdan bağımsız birim başına piksel cinsinden ölçeklendirme faktöründen oluşan bit eşlem adlandırma düzenini destekler, örneğin:

  • 320 piksel karede MyImage.scale-200.jpg

Yalnızca bazı yüzdeler geçerlidir. Bu kitabın örnek programları yalnızca ölçek-200 son eklerine sahip görüntüleri içerir, ancak geçerli Xamarin.Forms çözüm şablonları ölçek-100, ölçek-125, ölçek-150 ve ölçek-400'leri içerir.

Platform projelerine bit eşlemler eklerken Derleme Eylemi şu şekilde olmalıdır:

  • iOS: BundleResource
  • Android: AndroidResource
  • UWP: İçerik

ImageTap örneği, yüklü öğelerden TapGestureRecognizer oluşan Image iki düğme benzeri nesne oluşturur. Nesnelerin bir inç kare olması amaçlanmıştır. Source özelliğiImage, platformlarda farklı olabilecek dosya adlarına başvurmak için ve On nesneleri kullanılarak OnPlatform ayarlanır. Bit eşlem görüntüleri, piksel boyutunu gösteren sayılar içerir, böylece hangi boyut bit eşleminin alındığını ve işlendiğini görebilirsiniz.

Araç çubukları ve simgeleri

Platforma özgü bit eşlemlerin Xamarin.Forms birincil kullanımlarından biri, tarafından Pagetanımlanan koleksiyona ToolbarItems nesneler eklenerek ToolbarItem oluşan araç çubuğudur. ToobarItemMenuItem bazı özellikleri devraldığı türetilir.

En önemli ToolbarItem özellikler şunlardır:

  • Text platforma bağlı olarak görünebilecek metinler için ve Order
  • Icon platforma bağlı olarak görünebilecek görüntü türü FileImageSource ve Order
  • Order türünde ToolbarItemOrder, üç üyesi olan bir numaralandırma, Default, Primaryve Secondary.

Öğe sayısı Primary üç veya dört ile sınırlı olmalıdır. Tüm öğeler için bir Text ayar eklemelisiniz. Çoğu platformda Primary yalnızca öğeler için bir Icon gerekir, ancak Windows 8.1 tüm öğeler için bir Icon gerektirir. Simgeler cihazdan bağımsız 32 birim kare olmalıdır. Türü, FileImageSource platforma özgü olduklarını gösterir.

dokunulduğunda ToolbarItem bir Clicked olayı tetikler, çok benzer.Button ToolbarItemayrıca MVVM ile bağlantılı olarak sık kullanılan ve CommandParameter özelliklerini de desteklerCommand. (Bkz. Bölüm 18, MVVM).

Hem iOS hem de Android, araç çubuğunu görüntüleyen bir sayfanın veya tarafından gidilen NavigationPagebir sayfa olmasını NavigationPage gerektirir. ToolbarDemo programı, sınıfının App özelliğini bir bağımsız değişkenle oluşturucuya NavigationPage ayarlar MainPage ve bir ContentPage araç çubuğunun yapısını ve olay işleyicisini gösterir.

Düğme resimleri

Özelliğini ButtonImage örneğinde gösterildiği gibi cihazdan bağımsız 32 birim karelik bir bit eşlem olarak ayarlamak Image Button için platforma özgü bit eşlemleri de kullanabilirsiniz.

Not

Düğmelerdeki görüntülerin kullanımı geliştirildi. Bkz. Bit eşlemleri düğmelerle kullanma.

  • Last updated on