第十三章:位图(三)
嵌入資源
通過Internet訪問位圖很方便,但有時(shí)候并不是最佳選擇。該過程需要互聯(lián)網(wǎng)連接,確保位圖未被移動(dòng),并有一段時(shí)間下載。為了快速且有保證地訪問位圖,它們可以直接綁定到應(yīng)用程序中。
如果需要訪問非特定于平臺(tái)的映像,則可以將位圖作為嵌入資源包含在共享的可移植類庫(kù)項(xiàng)目中,并使用ImageSource.From?Resource方法訪問它們。 ResourceBitmapCode解決方案演示了如何執(zhí)行此操作。
此解決方案中的ResourceBitmapCode PCL項(xiàng)目有一個(gè)名為Images的文件夾,它包含兩個(gè)位圖,名為ModernUserInterface.jpg(一個(gè)非常大的位圖)和ModernUserInterface256.jpg(相同的圖片,但寬度為256像素)。
將任何類型的嵌入資源添加到PCL項(xiàng)目時(shí),請(qǐng)確保將資源的構(gòu)建操作設(shè)置為EmbeddedResource。這很關(guān)鍵。
在代碼中,將Image元素的Source屬性設(shè)置為從靜態(tài)ImageSource.FromResource方法返回的ImageSource對(duì)象。此方法需要資源ID。 resource ID包括程序集名稱后跟句點(diǎn),然后是文件夾名稱后跟一個(gè)otherperiod,然后是文件名,其中包含文件擴(kuò)展名的另一個(gè)句點(diǎn)。對(duì)于此示例,用于訪問ResourceBitmapCode程序中兩個(gè)位圖中較小位圖的資源ID為:
ResourceBitmapCode.Images.ModernUserInterface256.jpg
此程序中的代碼引用較小的位圖,并將Image元素上的HorizontalOptions和VerticalOptions設(shè)置為Center:
如您所見,此實(shí)例中的位圖未展開以填充頁面:
如果符合以下情況,則不會(huì)拉伸位圖以填充其容器:
- 它小于容器,并且
- 未設(shè)置Image元素的VerticalOptions和HorizontalOptions屬性
填充,或者如果Image是StackLayout的子級(jí)。
如果注釋掉VerticalOptions和HorizontalOptions設(shè)置,或者引用大位圖(文件名末尾沒有“256”),圖像將再次拉伸以填充容器。
如果未展開位圖以適合其容器,則必須以特定大小顯示該位圖。那個(gè)大小是多少?
在iOS和Android上,位圖以像素大小顯示。換句話說,通過位圖的像素和視頻顯示的像素之間的一對(duì)一映射來渲染位圖。用于這些屏幕截圖的iPhone 6模擬器的屏幕寬度為750像素,您可以看到位圖的256像素寬度約為寬度的三分之一。這里的Android手機(jī)是Nexus 5,其像素寬度為1080,位圖大約是寬度的四分之一。
但是,在Windows運(yùn)行時(shí)平臺(tái)上,位圖顯示在與設(shè)備無關(guān)的單元中 - 在此示例中,為256個(gè)與設(shè)備無關(guān)的單元。用于這些屏幕截圖的諾基亞Lumia 925的像素寬度為768,與iPhone 6大致相同。但是,這款Windows 10 Mobile手機(jī)在獨(dú)立于設(shè)備的設(shè)備中的屏幕寬度為341,您可以看到ren?dered位圖比其他平臺(tái)寬得多。
有關(guān)調(diào)整位圖大小的討論將在下一節(jié)繼續(xù)討論。
您如何引用從XAML存儲(chǔ)為嵌入資源的位圖?不幸的是,沒有ResourceImageSource類。如果有,您可能會(huì)嘗試在Image.Source標(biāo)記之間在XAML中實(shí)例化該類。但那不是一個(gè)選擇。
您可以考慮使用x:FactoryMethod來調(diào)用ImageSource.FromResource,但這不起作用。正如當(dāng)前實(shí)現(xiàn)的那樣,ImageSource.FromResource方法要求位圖資源與調(diào)用該方法的代碼位于同一程序集中。當(dāng)您使用x:FactoryMethod調(diào)用ImageSource.FromResource時(shí),將從Xamarin.Forms.Xaml程序集進(jìn)行調(diào)用。
什么是有效的是一個(gè)非常簡(jiǎn)單的XAML標(biāo)記擴(kuò)展。這是一個(gè)名為StackedBitmap的項(xiàng)目中的一個(gè):
ImageResourceExtension有一個(gè)名為Source的屬性,您可以將其設(shè)置為資源ID。 ProvideValue方法只使用Source屬性調(diào)用ImageSource.FromResource。 對(duì)于單屬性標(biāo)記擴(kuò)展常見,Source也是該類的content屬性。 這意味著當(dāng)您使用大括號(hào)語法進(jìn)行XAML標(biāo)記擴(kuò)展時(shí),您不需要顯式包含“Source =”。
但請(qǐng)注意:您無法將此ImageResourceExtension類移動(dòng)到諸如Xama?rin.FormsBook.Toolkit之類的庫(kù)中。 該類必須是包含要加載的嵌入式源的同一程序集的一部分,通常是應(yīng)用程序的可移植類庫(kù)。
這是StackedBitmap項(xiàng)目中的XAML文件。 Image元素與StackLayout共享兩個(gè)Label元素:
本地前綴是指StackedBitmap程序集中的StackedBitmap命名空間。 Image元素的Source屬性設(shè)置為ImageResource標(biāo)記擴(kuò)展,它引用存儲(chǔ)在PCL項(xiàng)目的Images文件夾中的位圖并標(biāo)記為EmbeddedResource。 位圖寬320像素,高240像素。 Image還設(shè)置了BackgroundColor屬性; 這將允許我們?cè)赟tackLayout中查看Image的整個(gè)大小。
Image元素的SizeChanged事件設(shè)置為代碼隱藏文件中的處理程序:
Image元素的大小由StackLayout垂直約束,因此位圖以其像素大小(在iOS和Android上)和在Windows Phone上與設(shè)備無關(guān)的單位顯示。 Label以與設(shè)備無關(guān)的單位顯示Image元素的大小,這些單元在每個(gè)平臺(tái)上都有所不同:
底部Label顯示的Image元素的寬度包括aqua背景,并且等于設(shè)備無關(guān)單元中頁面的寬度。 您可以使用Fill或As?pectFill的Aspect設(shè)置來使位圖填充整個(gè)aqua區(qū)域。
如果您希望Image元素的大小與設(shè)備獨(dú)立單元中的渲染位圖大小相同,則可以將Image的HorizontalOptions屬性設(shè)置為Fill的默認(rèn)值以外的值:
現(xiàn)在,底部Label僅顯示渲染位圖的寬度。 Aspect支架的設(shè)置無效:
讓我們將這個(gè)渲染的圖像大小稱為其自然大小,因?yàn)樗谡陲@示的位圖的大小。
iPhone 6的像素寬度為750像素,但正如您在第5章中運(yùn)行WhatSize程序時(shí)發(fā)現(xiàn)的那樣,應(yīng)用程序感知屏幕寬度為375.設(shè)備有兩個(gè)像素?獨(dú)立單元,因此位圖的寬度為顯示320像素,寬度為160個(gè)單位。
Nexus 5的像素寬度為1080,但應(yīng)用程序感知寬度為360,因此與設(shè)備無關(guān)的單元有三個(gè)像素,因?yàn)?07個(gè)單元的圖像寬度確認(rèn)。
在iOS和Android設(shè)備上,當(dāng)以自然大小顯示位圖時(shí),位圖的像素與顯示器的像素之間存在一對(duì)一的映射。但是,在Windows運(yùn)行時(shí)設(shè)備上,情況并非如此。用于這些屏幕截圖的諾基亞Lumia 925的像素寬度為768.運(yùn)行Windows 10 Mobile操作系統(tǒng)時(shí),設(shè)備獨(dú)立單元有2.25像素,因此應(yīng)用程序感知屏幕寬度為341。但320× 240像素位圖以320×240個(gè)與設(shè)備無關(guān)的單元的大小顯示。
當(dāng)您從各個(gè)平臺(tái)項(xiàng)目訪問位圖時(shí),Windows運(yùn)行時(shí)和其他兩個(gè)平臺(tái)之間的這種不一致實(shí)際上是有益的。正如您將看到的,iOS和Android包含一項(xiàng)功能,可讓您為不同的設(shè)備分辨率提供不同大小的位圖。在效果上,這允許您在與設(shè)備無關(guān)的單元中指定位圖大小,這意味著Windows設(shè)備與這些方案一致。
但是當(dāng)使用與平臺(tái)無關(guān)的位圖時(shí),您可能希望在所有三個(gè)平臺(tái)上確定位圖的大小,這需要更深入地了解主題。
總結(jié)
以上是生活随笔為你收集整理的第十三章:位图(三)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 行矩阵列矩阵D3DGLU3D
- 下一篇: Spring AOP学习