Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2214940
  • 博文数量: 849
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8135
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
  • 认证徽章:
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(849)

文章存档

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(273)

2010年(1)

2009年(54)

2008年(66)

2007年(49)

2006年(82)

2005年(12)

分类: Android平台

2018-08-13 21:56:26

图形用户界面的可视元素可以粗略地分为用于呈现的元素(例如文本)和能够与用户交互的元素,例如按钮,滑块和列表框。
文本对于呈现至关重要,但图片通常与补充文本和传达重要信息的方式同样重要。例如,没有图片,网络是不可想象的。这些图像通常是称为位图的图像元素(或像素)的矩形阵列的形式。
就像名为Label的视图显示文本一样,名为Image的视图显示位图。 iOS,Android和Windows运行时支持的?的位图有点不同,但如果您在Xamarin.Forms应用程序中坚持使用JPEG,PNG,GIF和BMP,则可能不会遇到任何问题。
Image定义了一个Source属性,您可以将其设置为ImageSource类型的对象,该对象引用Image显示的位图。位图可以来自各种源,因此ImageSource类定义了四个返回ImageSource对象的静态创建方法:

  • ImageSource.FromUri用于通过Web访问位图。
  • ImageSource.FromResource,用于存储为应用程序PCL中的嵌入式资源的位图。
  • ImageSource.FromFile用于存储为单个平台项目中的内容的位图。
  • ImageSource.FromStream,用于通过使用.NET Stream对象加载位图。

ImageSource还有三个后代类,名为UriImageSource,FileImageSource和StreamImageSource,您可以使用它们代替第一,第三和第四个静态创建方法。 通常,静态方法在代码中更容易使用,但XAML中有时需要后代类。
通常,您将使用ImageSource.FromUri和ImageSource.FromResource方法获取用于演示目的的独立于平台的位图,并使用ImageSource.FromFile为用户界面对象加载特定于平台的位图。 小位图在MenuItem和ToolbarItem对象中起着至关重要的作用,您还可以向Button添加位图。
本章首先使用从Image?Source.FromUri和ImageSource.FromResource方法获得的与平台无关的位图。 然后讨论了ImageSource.FromStream方法的一些用法。 本章最后使用ImageSource.FromFile获取工具栏和按钮的特定于平台的位图。

与平台无关的位图

这是一个名为WebBitmapCode的仅代码程序,其页面类使用ImageSource.FromUri从Xamarin网站访问位图:

点击(此处)折叠或打开

  1. public class WebBitmapCodePage : ContentPage
  2. {
  3.     public WebBitmapCodePage()
  4.     {
  5.         string uri = "https://developer.xamarin.com/demo/IMG_1415.JPG";
  6.         Content = new Image
  7.         {
  8.             Source = ImageSource.FromUri(new Uri(uri))
  9.         };
  10.     }
  11. }
如果传递给ImageSource.FromUri的URI未指向有效位图,则不会引发异常。
即便是这个小程序也可以简化。 ImageSource定义了从字符串或Uri到ImageSource对象的隐式转换,因此您可以将带有URI的字符串直接设置为Image的源支持:

点击(此处)折叠或打开

  1. public class WebBitmapCodePage : ContentPage
  2. {
  3.     public WebBitmapCodePage()
  4.     {
  5.         Content = new Image
  6.         {
  7.             Source = "https://developer.xamarin.com/demo/IMG_1415.JPG"
  8.         };
  9.     }
  10. }
或者,为了使其更加详细,可以将Image的Source属性设置为UriImageSource对象,并将其Uri属性设置为Uri对象:

点击(此处)折叠或打开

  1. public class WebBitmapCodePage : ContentPage
  2. {
  3.     public WebBitmapCodePage()
  4.     {
  5.         Content = new Image
  6.         {
  7.             Source = new UriImageSource
  8.             {
  9.                 Uri = new Uri("https://developer.xamarin.com/demo/IMG_1415.JPG")
  10.             }
  11.         };
  12.     }
  13. }
如果要控制基于Web的图像的缓存,则可能首选UriImageSource类。 该类实现了自己的缓存,该缓存使用每个平台上可用的应用程序的私有存储区域。 UriImageSource定义了一个CachingEnabled属性,其默认值为true,TimeSpan类型的CachingValidity属性的默认值为一天。 这意味着如果在一天内重新访问图像,则使用缓存的图像。 您可以通过将CachingEnabled设置为false来完全禁用缓存,也可以通过将CachingValidity属性设置为另一个TimeSpan值来更改缓存到期时间。
无论您采用哪种方式,默认情况下,Image视图显示的位图会拉伸到其容器的大小 - 在这种情况下为ContentPage - 同时遵循位图的宽高比:

此位图是方形的,因此图像上方和下方会出现空白区域。 当您在纵向和横向模式之间转动手机或模拟器时,渲染的位图可以更改大小,您将在顶部和底部或左侧和右侧看到一些空白区域,位图无法到达。 您可以使用Image继承自VisualElement的BackgroundColor属性为该区域着色。
WebBitmapCode程序中引用的位图是4,096像素的正方形,但Xamarin网站上安装了一个实用程序,它允许您通过指定URI来下载更小的位图文件,如下所示:

点击(此处)折叠或打开

  1. Content = new Image
  2. {
  3.     Source = "https://developer.xamarin.com/demo/IMG_1415.JPG?width=25"
  4. };
现在下载的位图是25像素的正方形,但它再次拉伸到其容器的大小。 每个平台都实现了一种插值算法,试图在图像展开以适合页面时平滑像素:

但是,如果现在将Image上的HorizontalOptions和VerticalOptions设置为Center
或者将Image元素放在StackLayout中 - 这个25像素的位图会折叠成一个非常小的图像。 本章稍后将更详细地讨论这种现象。
您还可以在XAML中实例化Image元素,并通过将Source属性直接设置为Web地址来从URL加载位图。 这是WebBitmapXaml程序中的XAML文件:

点击(此处)折叠或打开

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class="WebBitmapXaml.WebBitmapXamlPage">
  4.     <Image Source="https://developer.xamarin.com/demo/IMG_3256.JPG" />
  5.  
  6. </ContentPage>
更详细的方法涉及显式实例化UriImageSource对象并设置Uri属性:

点击(此处)折叠或打开

  1. <Image>
  2.     <Image.Source>
  3.         <UriImageSource Uri="https://developer.xamarin.com/demo/IMG_3256.JPG" />
  4.     </Image.Source>
  5. </Image>
无论如何,这是它在屏幕上的样子:

阅读(770) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册