Xamarin.Forms学习之位图(一)

  在开始我的分享之前呢,让我先问下我的问题:

  1、最近更新了Xamarin 4.1.1.3,我想问下版本更新信息在哪里看?

  2、更新后我新建的项目没有UWP项目了(虽然没有用过,但是我想确认是4.1.1.3移除了还是我自身的问题),其实我觉得移除了也好,UWP就用UWP写最好了!

  3、我的模拟器无法使用,是我安装的问题还是说有其他的设置?

  再吐个槽:

  1、Xamarin.Froms早已经更新到了2.3了,但是vs的模板一直没更新(还是说可以其他设置更新?还是说2.3不稳定?),导致新建的项目的Froms版本依然是2.0的。

  2、F7和F12功能不好用。

  3、还是没有预览这个老生常谈的问题。

  我记得我还有几个的,咋想不起了。。。好吧,算了,不想了。

  还是那句话,有错请留言指正,谢谢!

  继续正文,显示图片用的是Image这个倒是没什么说的,设置图片源的是通过Image的ImageSource类型的Source属性来设置的,ImageSource类定义了四个静态方法,一边使用:

  1、ImageSource.FromUri 用于访问web的位图

  2、ImageSource.FromResource 访问PCL中嵌入的资源的位图

  3、ImageSource.FromFile 访问平台中的位图

  4、ImageSource.FromStream 通过Stream流加载位图

  要提醒的是“嵌入的资源”,如果你把图片放入PCL中,并且想要访问它,必须把图片的生成操作改成“嵌入的资源”,如下:

  

  ImageSource除了有四个静态方法之外还有三个派生类:UriImageSource,FileImageSource,StreamImageSource。通过名字你可以跟上面的ImageSource的静态方法找到对应,其中UriImageSource你就可以在XAML中直接设置Image的源了,而不必在Code-Bhind中去书写:

  <Image>
    <Image.Source>
      <UriImageSource Uri="http://hpimges.blob.core.chinacloudapi.cn/coverstory/watermark_zanzibarredcolobus_zh-cn11792109900_1920x1080.jpg" />
    </Image.Source>
  </Image>

  但是你会发现派生类有三个,静态方法有四个,没有ImageSource.FromResource的对应的派生类,岂不是说我们就不能在XAML中直接访问PCL的嵌入资源了?答案当然是NO,需要我们自己写一个。

  在项目中新建一个ImageResourceExtension的类,这个类需要继承IMarkupExtension接口(多的不说,自己F12去查看),

  

  代码如下:

namespace App1.Extension
{
    [ContentProperty("Source")]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (null == Source)
                return null;
            return ImageSource.FromResource(Source);
        }
    }

    //这个是我测试下IMarkupExtension的简单用法弄得一个
    [ContentProperty("TextColor")]
    public class LabelTextColorExtension : IMarkupExtension
    {
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            return Color.Blue;
        }
    }
}

  然后我们就可以咋XAML直接设置PCL的嵌入的资源给Image了

<Image Source="{img:ImageResource App1.Images.logo_small.gif}" />

  别忘了命名空间的引用:

xmlns:img="clr-namespace:App1.Extension"

  对于嵌入的资源的访问,唯一要说的就是其路径,必须从程序集写起,还有这个ImageResourceExtension类不能提到公共的当中,因为这是通过反射来获取,如果你把图片放到当前的PCL中,但是方法在公共的里面,那么你懂的反射的路径是不对的,也就获取不到图片,但是也就是说如果图片是公共的,放在公共的项目中,也就能能正常访问了?卧槽,明天试试!

  继续Iamge的内容,访问web的资源位图,通过ImageSource的Uri相关的扩展或者使用ImageSource.FromStream都行,但是建议使用UriImageSource派生类,因为他可以把图片缓存在程序的私有领域中,我们可以通过bool型的CachingEnabled和TimeSpan类型的CachingValidity来设置图片的是否缓存和缓存时间。如果使用其他的则需要自己写缓存的逻辑代码。

  位图在Image中的填充则是通过枚举的Aspect属性来设置的,图片填充这个应该没有太多的说到的,我就简单说下:

  1、AspectFit — 默认的,这个就是保持图片的比例填充Image。

  2、Fill — 这个看意思也知道就是不考虑比例,填充整个Image。

  3、AspectFill — 这个就是保持图片的原始大小,但是只显示Image能显示的地方,简单说就是如果图片太大,就剪切Image那么大的一块就行显示。也就是说这个属性对太大的图片有影响。

  关于位图的显示大小的问题,电子书中写的妈的“拗口”的很,看了半天最后直接实践,一个一个属性的去调,才发现so easy,也难为别个写书的了,当然也许是英文,语言沟通的原因。最终其实就是图片在屏幕也就是用户界面上的呈现是受Aspect属性、Iamge元素的大小和位图的大小的影响的。其限制影响大小如下:

  Image的大小>位图的大小>Aspect

  虽然这三个的关系这么写牛头不对马嘴,但是大意是这个。在简单说就是自己去试,就是如下图所示的标红线的三类属性的变换,要注意的就是VerticalOptions和HorizontalOptions属性:

  

  到这里你以为就完了,错了!毕竟是跨平台的要想在多个平台上呈现的效果一致,那么你需要:

Although the pictures don’t look bad on any of the platforms, getting them all about the same size would require starting out with larger bitmaps.

  也许这里就一句话,没有前言后语的,不太容易理解,其实就是由于设备的原因Nokia的跟IOS和Android的像素的映射不一样的原因的,如果让他们“自由”的显示,有较大的差异(),所以解决之法就是找个大一点的图片然后设置他的宽和高(我不知道这个对不对啊,反正回了两边,也就只能理解到这儿了!)。

  从Stream中读取图片,则需要ImageSource.FromStream或者StreamImageSource,虽然他们都是从刘总获取图片,但是并没有什么需要特别说的。就直接上代码了:

string resourceID = "App1.Images.logo_small.gif"; image1.Source = ImageSource.FromStream(() => { Assembly assembly = GetType().GetTypeInfo().Assembly; Stream stream = assembly.GetManifestResourceStream(resourceID); return stream; });

  就到这里了!

时间: 2024-11-03 22:29:18

Xamarin.Forms学习之位图(一)的相关文章

Xamarin.Forms学习之位图(二)

上篇文章分享了如何加载网络图片和PCL中的图片,所以今天继续分享关于如何加载平台的内嵌图片,在这之前说一下上篇文章开头的一个问题:为什么不能加载UWP项目,这是因为我升级了UWP的SDK,而Xamarin还没有支持到这个版本(我也不想用Xamarin来发UWP项目).还有就是园友问怎么知道哪些是平台特殊的API(Platform-specific API和文件操作),自认为呢,当你调用一个API的时候需要引用Xanmarin.IOS和Mono.Android或者说除了.NET的API都算是Pla

Xamarin.Forms学习之Platform-specific API和文件操作

这篇文章的分享原由是由于上篇关于Properties的保存不了,调用SavePropertiesAsync()方法也不行,所以我希望通过操作文件的方式保存我的需要的数据,然后我看了一下电子书中的第二十章和需要相关知识的第九章,这篇文章中的内容则是我学习这两章的一点记录和分享,还是那样,有错请留言指正,谢谢! 不同的平台存在着一些特定的API,通过在电子书中两章的学习,实践一下如何调用这些API和将这些API封装成公共的库,供以后的项目调用.以一个显示平台信息的小实例开始做一个简单的演示,其运行效

Xamarin.Forms学习之Page Navigation(一)

在最初接触Xamarin.Forms的时候,我是跟着Xamarin官方的名为“learning-xamarin-ebook”的pdf文档进行学习的,我在成功运行Hello world程序之后,我开始跟着pdf写上面的monkey实例,然而我却遇到了一个问题,我在列表页点击某一个Item的时候,不能如示例上面所展示的那样跳转到详细页面.也正因为此我在官方文档和电子书中寻找答案,也将自己的学习的东西做个简单的笔记和分享. 在Froms的中的提供了如下方法用于导航: Task PushAsync(Pa

Xamarin.Forms学习之初

微软的Build 2016结束的有段时间了,对于一个简单的小屌丝程序员--我来说,关注最大的无疑是Xamarin的免费(开源什么的让大神们上吧),内心激动啊.大会结束的周末我就迫不及待的安装了,然后...一脸的懵逼,更新vs后什么sdk,jdk都不知道,唯一知道的就是没法运行,后来大神们相继出了一些文章,才开始了解一些大概,有错误的请在下面留言提出,免得我误导了别人. xamarin可以简单分为一下几个: Xamarin.Forms:个人觉得这才是Xamarin真正的优势所在,真正的跨平台,一次

Xamarin.Forms学习之Page Navigation(二)

在上一篇的文章中,对页面常规的导航做一些分享,然而在实际的编程中,页面数据的保持,传值等等都有很多,这篇文章就对这些相关内容做一个分享和记录,有问题,希望大家留言指正.这一篇从实现业务逻辑来讲并没有什么特别的,这里主要是说说通过Properties和生命周期实现数据的“保持”.当然这里遇到了一个让我懵逼的问题,电子书中介绍说,Properties的值是会一直保持的,直到App卸载,但是在我的安卓机中实验,程序终止后,值就为空了,不知是我看掉了什么东西还是怎么了,不知道大家有没有遇到这个问题,希望

Xamarin.Forms之Effects的使用

在 Xamarin.Forms 2.1.0-pre1 ,Xamarin.Forms新增了新的Effects API. Effects是一系列方法,为了给View的渲染器添加运行时改变. 然而,我想强调的是, Effects天生被设计为高可复用的. 如果一个Effect能够解决一个难题, 它可能能够在你的整个APP中使用.如果你写了一个Effect来解决你的一个难题, 你能够分享它给其他遇到同样问题的人. 这篇文章尝试展示一种方式,能够帮助我们使分享Effects这件事变得很简单. public

Xamarin.Forms WebView

目前本地或网络的网页内容和文件加载 WebView是在您的应用程序显示Web和HTML内容的视图.不像OpenUri,这需要用户在Web浏览器的设备上,WebView中显示您的应用程序内的HTML内容. 本指南由以下几部分组成: 内容?- web视图支持各种内容源,包括嵌入的HTML,网页和HTML字符串. 导航?-网页视图包括导航到特定页面,回到主页. 活动?–监听并通过在WebView中用户所采取的行动作出回应. 性能?-了解的WebView的每个平台上的性能特点. 权限?-了解如何设置权限

Xamarin.Forms 调用 腾讯地图SDK

Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com/jtang/p/4698496.html 其他文档参考: 腾讯地图SDK(安卓)文档 这里面有详细的使用过程(当然里面的代码是不适用C#的,不过要从这里下载SDK,也有如何申请Key的过程,请参考阅读) Xamarin.Forms自定义每个平台的控件文档 里面有如何根据不同的平台条件下,调用其他页

Xamarin.Forms教程开发Xamarin.Forms应用程序需要的工具

开发Xamarin.Forms应用程序需要的工具 Xamarin.Forms教程开发Xamarin.Forms应用程序需要的工具,2014年5月8日在发布的Xamrin 3中引进了Xamarin.Forms.Xamarin.Forms是一个高效创建跨平台用户界面的库.通过Xamarin.Forms可以一次编码生成基于主流移动平台(iOS.Android.Windows Phone)的应用界面.和HTML 5不同,Xamarin.Forms是一套原生的界面解决方案,这意味着通过Xamarin.Fo