Xamarin.Forms學習之位圖(二)


  上篇文章分享了如何加載網絡圖片和PCL中的圖片,所以今天繼續分享關於如何加載平台的內嵌圖片,在這之前說一下上篇文章開頭的一個問題:為什么不能加載UWP項目,這是因為我升級了UWP的SDK,而Xamarin還沒有支持到這個版本(我也不想用Xamarin來發UWP項目)。還有就是園友問怎么知道哪些是平台特殊的API(Platform-specific API和文件操作),自認為呢,當你調用一個API的時候需要引用Xanmarin.IOS和Mono.Android或者說除了.NET的API都算是Platform-specific API,當然這是我個人的理解。

  當然,還是一樣,有錯請及時留言,大家互相分享和進步!

  

  不廢話,繼續正文,在上文中說到,相同的圖片在不同的手機上的顯示是有分別的,我想,做過APP開發的應該都知道這個問題,對於未接觸過的呢,簡單說下(其實我這里表達不是很清楚,在博客園中還有其他的相關的文章專門做詳細的介紹,但是我把地址忘了,所以只有你們自己去找找了),就是經常聽到的屏幕分辨率和像素要映射(或者叫對應)的原因,比如有的手機分辨率是960*640,480*800等等這些,正是由於這些不同分辨率的存在讓圖片的顯示產生了不同,而圖片的像素是不變的,一像素就是一像素,但是這一像素要在屏幕上顯示,那么就會產生問題了。像素是位圖的尺寸單位,手機屏幕(這里就不再把什么分辨率的東西扯得太遠了,簡單點就叫個手機屏幕)也有一個單位,英文叫device-independent unit簡稱就是DIU,所以同樣的圖片在不同的手機上顯示不一樣就是DIU和像素之間映射不一致所導致的,現在常見的有(主流貌似都是以蘋果來介紹的):

  一個單位點(DIU)對應一個像素

  一個單位點(DIU)對應兩個像素

  一個單位點(DIU)對應三個像素

其實呢安卓的設備還包含以下三種:

  一個單位點(DIU)對應0.75個像素

  一個單位點(DIU)對應1.5個像素

  一個單位點(DIU)對應4個像素

所以,如果同樣的圖片在不同的DIU設備上顯示就會出現顯示的大小不一致的情況,如上安卓則有六種常見DIU,但是你懂的,誰TMD一天沒事光弄圖,所以呢也只弄1:1、1:2和1:3的三種圖的,就是跟蘋果圖保持一致,那沒有相應比例的圖片豈不是顯示會出問題?!當然不會,手機系統會自動根據當前的DIU去找到三種中合適的圖去進行一定比例的縮放。

 

  現在我們來說說平台圖片,在我們Xamrin.Forms項目中的xxx.Driod和xxx.IOS的項目(我的所有Xamarin相關都不會涉及到UWP,UWP我覺得還是用UWP開發吧)中都能看到一個Resources的文件夾,但是查看該文件夾,你就會發現他們並不一樣,舉個例子,在IOS中有如下名稱的圖片:

  Icon-Small.png

  Icon-Small@2x.png

  Icon-Small@3x.png

  他們名稱幾乎一樣,不一樣的是后面兩個都是以@2x或者@3x結束,我想看到這里,大家都能聯想到了一些東西了,是的這就是為不同的DIU准備的,你們可以在資源管理系統中右鍵屬性查看詳細信息就會知道,他們的像素分別是40*40、80*80和120*120.這里也許你會說那項目中如何加載圖片哦,為了顯示一張圖我需要高三個地址,還有安卓的話豈不是最好要弄6個地址去加載一個圖片,我瘋了,對吧!淡定,剛剛已經說了圖片的名稱是有規律的,所以你不要去寫很多個地址去加載圖片,你只需要寫@前面的相同的部分就行了,剩下的系統會自己去根據當前的DIU去找相應名稱的圖片,比如你當前的1DIU對應3個像素,那么當你加載Icon-Small.png圖片的時候會自動去加載Icon-Small@3x.png圖片。

  安卓的Resources跟蘋果有些不一樣,蘋果是把所有的圖片放在Resources文件夾中的,通過名稱來區分的,但是安卓則是通過文件夾來區分的,展開安卓項目中的Resources文件夾,你自會看到,其他也都相同就不再多說。

 

  現在對平台的Resources和其中包含的圖片有了一個簡單的了解,現在來調用這里面的圖片並顯示,這里就需要上一篇文章中所需要的FileImageSource類,示例代碼如下:

       Image image = new Image
            {
                Source = new FileImageSource
                {
            //File = "icon.png" File
= Device.OnPlatform(iOS: "Icon-Small-40.png", Android: "icon.png", WinPhone: "Assets/StoreLogo.png") }, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand };

  在調用平台圖片的時候,電子書中有句話,原文如下:

Almost always, you’ll be using Device.OnPlatform in code or OnPlatform in XAML to specify the three filenames:

  意思就是調用平台圖片的時候總是需要用到OnPlatform,但其實這里如果IOS和Andriod的圖片名稱相同的話並且不考慮Windows的平台,可以直接如注釋的那般寫,是沒有問題的。

 

  好了,平台圖片和FileImageSource對象的用法,就做個這樣的簡單分享,過兩天和會把Xamarin.Forms中的三種手勢做個簡單的分享,然后會開始動畫!加油!要學的東西好多哦,感覺腦子不夠用啊!

  最近在linux上部署asp.net core的demo卻總是運行不起,我是直接在本地dotnet publish然后上傳的,其實也不是運行不起,而是有個警告,並且我已經打開了80和5000端口了,但是我在外界依然不能訪問,這個是在阿里雲上的一個測試服務器。我貼個圖,知道怎么搞定的大神麻煩指點下。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM