Xamarin.Form 项目总结

时间：2015-05-26 18:36:02 阅读：4972 评论：0 收藏：0 [点我收藏+]

标签：

离上一篇用Xamarin.Form做个技术预览版的APP 有一个月零几天了. 现在这个APP在业务方面的代码由另外一个同事全权处理, 我又闲了下来, 要去弄另外一个项目.

这个把月, 踩过 Xamarin.Form 很多坑, 填过很多坑, 也造了很坑...

这里做个总结, 给想跳坑的你做个参考.

ListView 的下拉刷新

下拉刷新还是很简单的, 首先要设置 listView.IsPullToRefreshEnabled 为 true

当下刷新时， RefreshCommand 会被调用，Refreshing 事件会被执行。IsRefreshing 会被设置为 true
实现 RefreshCommand 或 Refreshing 事件。
当刷新完成，调用 EndRefresh 或设置 IsRefreshing 为 false, 来告诉 listView 刷新已经完成。

 1 /// <summary>
 2 /// 下拉刷新事件
 3 /// </summary>
 4 /// <param name="sender"></param>
 5 /// <param name="e"></param>
 6 public void RefreshData(object sender, EventArgs e) {
 7     this.PageIdx = 0;
 8     this.LoadConsigns(true);
 9     var lst = (ListView)sender;
10     lst.IsRefreshing = false;
11 }

ListView 的 Footer

下拉刷新有自带事件可以处理, 但是加载更多却没有原生支持.
一开始,我在 ListView 的 Footer 中加了一个 Button , 点击的时候加载更多的数据, 在 WP 和 Android 下表现完美.
但是在 iOS 下:

采用 Xamarin.Forms 1.4.3.6358-pre2 时, Footer 错位, 具体是因为 HasUnevenRows 为 True, 行高不是默认的行高, 而计算 Footer 的位置的时候, 是用的默认的行高. 如果设置行高的话,就不会错位, 但是场景中不能设置行高.
采用 Xamarin.Forms 1.4.2.6359 直接报错.

无奈之下,只好放弃这种做法.

ListView 的 ItemAppearing事件

上面说放弃在 ListView 中加Footer, 但是加载更多这个功能还是要完成的.
先来看一下如何用 ItemAppearing 来处理加载更多的:

 1 /// <summary>
 2 /// 最后一条数据展现时，加载更多
 3 /// </summary>
 4 /// <param name="sender"></param>
 5 /// <param name="e"></param>
 6 public void LastAppear(object sender, ItemVisibilityEventArgs e) {
 7     if (this.Datas.Last().Equals(e.Item)) {
 8         this.LoadConsigns();
 9     }
10 }

即拿事件参数中的 e.Item 来和数据源中的最后一条来比较, 如果是同一个对象, 说明最后一条已经展现在当前可见屏幕范围之内, 可以加载更多数据了.
这样做,在 iOS 和 Android 下表现很完美.

但是在 WP 下却有可能加载完了第一页,紧接着加载第二页的问题.
因为在 WP 下是用 LongListSelector 来模拟的 ListView, LongListSelector 用了UI虚化技术, 虚化的条数貌似和一屏能显示的条数有关, 具体多少条不能设置, LongListSelector 自己维护.
相同的情况还发生在 TabbedPage 的子页中, 假设一个 TabbedPage 有4个ContentPage , 在初次进入App 的时候, 前两个 ContentPage 的 OnAppearing 事件都会触发.

ListView 的 Group Header

ListView 的Group Header 如果用 Template, 在 WP / Android 下, 表现完美.
但是 iOS 7.1 下直接不显示, 在 8.1时而显示,时而不显示, 并伴有稍微的错位.
如果不用 Template , 表现是挺好的.

同一个页面,多个 ListView

如果有这样的页面, 那请直接换 TableView , 将原来想放到两个 ListView 中的数据分别写到一个 TableView 的不同 TableSection 中.
因为多个 ListView 上下显示, 并不会自动"流式布局".

提升 ListView 的性能

这部分是 Xamarin.form 官方的文档读书笔记, 贴出来给你做个参考, 因为它很重要:
有两点会使 ListView 性能受损：
1，using ViewCell‘s with lots of views, and
2，using layouts that require lots of measurement.
1，在 cell 中使用过多的 views(控件)
2，过多的布局测量

为达到最优性能：
1，使用内建的 Cell (TextCell/ ImageCell /SwitchCell /EntryCell)
2，尽量少的元素。
3，避免层级嵌套；可以使用 AbsoluteLayout 或 Grid 来减少嵌套。
4，避免 Fill 之外的 LayoutOptions 选项。

提升打开新页面的体验速度

在 iOS 和 WP 下, 切换页面效果很流畅, Android 表现的有些卡.
做为优化, 我把加载数据从构造函数移到 OnAppearing 事件中, 并做了一个 500 毫秒的延时:

 1 protected override void OnAppearing() {
 2     base.OnAppearing();
 3 
 4     if (this.Data == null)
 5         Task.Delay(500).ContinueWith((t) => {
 6             Device.BeginInvokeOnMainThread(() => {
 7                 this.LoadData();
 8             });
 9         });
10 
11 }

这样做之后, 切换页面相对来说会流畅很多.

HUD

Android 下使用 AndHUD , iOS 下使用 BTProgressHUD, 这两个在在 NuGet 上都有.
但是并没有 WP 的HUD, 还好, 我用 Popup 做了一个.

1     public interface IHud {
2         void Close();
3         void Show(string msg);
4         void ShowToast(string msg, int delay = 1000);
5     }

 1 [assembly: Dependency(typeof(Hud))]
 2 namespace LBC.Mobi.WinPhone.Services {
 3     public class Hud : IHud {
 4 
 5         private System.Windows.Controls.Grid Container = new System.Windows.Controls.Grid();
 6 
 7         private Popup Popup = null;
 8 
 9         public Hud() {
10             this.Popup = new Popup() {
11                 Child = new Border() {
12                     Background = new SolidColorBrush(Colors.Black),
13                     Opacity = 0.6,
14                     CornerRadius = new CornerRadius(10),
15                     Padding = new System.Windows.Thickness(10),
16                     HorizontalAlignment = System.Windows.HorizontalAlignment.Center,
17                     VerticalAlignment = System.Windows.VerticalAlignment.Center,
18                     Child = this.Container,
19                 }
20             };
21 
22             this.Container.SizeChanged += Container_SizeChanged;
23         }
24 
25         void Container_SizeChanged(object sender, SizeChangedEventArgs e) {
26             var size = System.Windows.Application.Current.RootVisual.RenderSize;
27             this.Popup.HorizontalOffset = (size.Width - this.Container.ActualWidth) / 2;
28             this.Popup.VerticalOffset = (size.Height - this.Container.ActualHeight) / 2;
29         }
30 
31         public void ShowToast(string msg, int delay = 1000) {
32             this.Popup.IsOpen = true;
33             this.Container.Children.Clear();
34             this.Container.Children.Add(new TextBlock() {
35                 Text = msg,
36                 Foreground = new SolidColorBrush(Colors.White),
37                 FontSize = 20
38             });
39 
40             var v = Windows.Phone.Devices.Notification.VibrationDevice.GetDefault();
41             v.Vibrate(TimeSpan.FromSeconds(0.1));
42 
43             Task.Delay(delay)
44                 .ContinueWith(t =>
45                     Deployment.Current.Dispatcher.BeginInvoke(() => {
46                         this.Popup.IsOpen = false;
47                     })
48                     );
49         }
50 
51         public void Close() {
52             this.Popup.IsOpen = false;
53         }
54 
55         public void Show(string msg) {
56             this.ShowToast(msg, 60000);
57         }
58     }
59 }

联编设置

前一篇,我说 Xamarin 生成的 Android 的 app 巨大, 主要是因为没有联编 (Linking).
之所以没有联编, 是因为联编就报:

error XA2006: Reference to metadata item ....

之类的错误.

昨天搜索了一下, 联编是因为工程选项没有设置正确:

Compile using Android version 选择 Last Platform.
Minimum 选择最小支持的版本.

技术分享

Linking 选项不能选择 Sdk and User Assemblies. 否则生成的 APK 无法运行

如止设置之后, 我这个 APP 的大小只有 5.09 M

AOT JIT 泛型

用 .NET 做App, 服务提供首选 WebApi, 只不过...
直接使用 Asp.net Web API Client 的相关泛型方法读取数据的时候, 在 IOS 下真机(注意,是真机调试, 模拟器不会报错)调试会报错.

Attempting to JIT compile method ‘System.Net.Http.HttpContentExtensions:ReadAsAsync<LBC.Mobi.WebApiClient.Models.Token> (System.Net.Http.HttpContent,System.Type,System.Collections.Generic.IEnumerable`1<System.Net.Http.Formatting.MediaTypeFormatter>,System.Net.Http.Formatting.IFormatterLogger,System.Threading.CancellationToken)‘ while running with --aot-only. See http://docs.xamarin.com/ios/about/limitations for more information.

因为 IOS 是 AOT (静态编译), 而 Android 和 WP 使用的是 JIT(动态编译).具说 Android 也引入了 AOT ,不懂.

具体的限制可以从以下链接获取:
http://docs.xamarin.com/ios/about/limitations

这个文档没有看太懂, 但是这个错误是因为在调用 WebApi 的时候, 使用了相关的泛型方法而报错.
但是并不是说, 不能使用泛型, 因为在 iOS 项目属性里, 有个 Enable generic value type sharing, 如果不勾上这个, 连最基本的泛型使用都会报错. 然而这个选项在当前我使用的 Xamarin 版本中, 对 WebApi 来说, 没卵用.
不过,不要怕, 有人贴段变通的方法:
https://bugzilla.xamarin.com/show_bug.cgi?id=12746

你也可参考:

  1 using System;
  2 using System.Net;
  3 using System.Net.Http;
  4 using System.Net.Http.Formatting;
  5 using System.Net.Http.Headers;
  6 using System.Threading.Tasks;
  7 using System.Linq;
  8 
  9 namespace LBC.Mobi.WebApiClient {
 10 
 11     public abstract class MethodBase {
 12 
 13         public virtual bool SupportProtoBuf {
 14             get {
 15                 return true;
 16             }
 17         }
 18 
 19         public bool HasError {
 20             get;
 21             protected set;
 22         }
 23 
 24         public string ErrorReason {
 25             get;
 26             protected set;
 27         }
 28 
 29         public HttpStatusCode? Status {
 30             get;
 31             protected set;
 32         }
 33 
 34         /// <summary>
 35         /// 方法名,除去基地址,比如 User/Get
 36         /// </summary>
 37         public abstract string MethodName {
 38             get;
 39         }
 40 
 41         /// <summary>
 42         /// 如何执行,是Post,get还是 delete 等, 执行的参数等.
 43         /// </summary>
 44         internal abstract Func<HttpClient, Uri, Task<HttpResponseMessage>> Invoke {
 45             get;
 46         }
 47 
 48 
 49         internal async virtual Task<HttpResponseMessage> GetResult(string token) {
 50             Uri url = new Uri(ApiClient.GetMethodUrl(this.MethodName));
 51 
 52             if (this.Invoke != null) {
 53                 using (var client = new OAuthHttpClient(token)) {
 54                     if (this.SupportProtoBuf)
 55                         client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/x-protobuf"));
 56 
 57                     return await this.Invoke.Invoke(client, url);
 58                 }
 59             }
 60 
 61             return await Task.FromResult<HttpResponseMessage>(null);
 62         }
 63     }
 64 
 65     public abstract class MethodBase<T> : MethodBase {
 66 
 67         internal async virtual Task<T> Execute(string token) {
 68             var msg = await this.GetResult(token);
 69             var reason = "";
 70             HttpStatusCode? status = null;
 71             if (msg != null) {
 72                 if (msg.IsSuccessStatusCode) {
 73                     //var str = await a.Content.ReadAsStringAsync();
 74                     //var o = JsonConvert.DeserializeObject<T>(str);
 75 
 76                     var useProtoBuf = msg.Content.Headers.ContentType.MediaType.Equals("application/x-protobuf", StringComparison.OrdinalIgnoreCase);
 77 
 78                     //if (this.SupportProtoBuf) {
 79                     if (useProtoBuf) {
 80                         return await this.Read(typeof(T), msg, new ProtoBufFormatter()).ContinueWith(t => (T)t.Result);
 81                         //return await a.Content.ReadAsAsync<T>(new[] { new ProtoBufFormatter() });
 82                     } else {
 83                         return await this.Read(typeof(T), msg).ContinueWith(t => (T)t.Result);
 84                         //return await a.Content.ReadAsAsync<T>();
 85                     }
 86                 } else {
 87                     reason = msg.ReasonPhrase;
 88                     status = msg.StatusCode;
 89                 }
 90             }
 91 
 92             this.HasError = true;
 93             this.ErrorReason = reason;
 94             this.Status = status;
 95 
 96             return await Task.FromResult<T>(default(T));
 97         }
 98 
 99         //IOS 是 AOT , 不支持 JIT, 在反序列化的时候,要用该方法.
100         private async Task<object> Read(Type outType, HttpResponseMessage msg, params MediaTypeFormatter[] formatters) {
101             if (formatters != null && formatters.Length > 0)
102                 return await msg.Content.ReadAsAsync(outType, formatters);
103             else
104                 return await msg.Content.ReadAsAsync(outType);
105         }
106     }
107 }

Splash

ios 的 Splash 很好设置, 在选项里点点就可以完成了.
WP 的更简单, 放一个 480 X 800 的 SplashScreenImage.jpg 的图片到 WP 项目的根目录就是了. 如果还想适应个分辨率, 延个时啥的,可参考:
http://stackoverflow.com/questions/19450446/how-to-set-splash-screen-in-window-phone-8-application-development

麻烦的就是, Android
请按以下的设置处理:
1, 先新建一个 Activity:

1     [Activity(Label = "货代网", MainLauncher = true, Icon = "@drawable/icon", NoHistory = true, Theme = "@style/Theme.Splash", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
2     public class SplashScreen : Activity {
3         protected override void OnCreate(Bundle bundle) {
4             base.OnCreate(bundle);
5             var intent = new Intent(this, typeof(MainActivity));
6             StartActivity(intent);
7             Finish();
8         }
9     }

其中, MainLauncher 设为 true

还要设置一下 Theme : Style/Theme

2, 将 MainActivity 上标注的 MainLauncher 改为 false , 或删除.

3, 在 Resources/Velues 目录下新增 Styles.xml:

 1 <resources>
 2   <style name="Theme.Splash"
 3     parent="android:Theme">
 4     <item name="android:windowBackground">
 5       @drawable/splashscreen
 6     </item>
 7     <item name="android:windowNoTitle">true</item>
 8     <item name="android:windowIsTranslucent">false</item>
 9     <item name="android:windowIsFloating">false</item>
10     <item name="android:backgroundDimEnabled">true</item>
11   </style>
12 </resources>

其中, name="Theme.Splash" 就是上面新建的 Activity (SplashScreen) 标注的的值.

4, 在 Resources/drawable 目录下新建一个 SplashScreen.xml, 对应到上面的Xml 中的 <item name="android:windowBackground"> 的值:

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 
 3 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 4   <item>
 5     <shape android:shape="rectangle" >
 6       <solid android:color="#3498db" />
 7     </shape>
 8   </item>
 9   <item>
10     <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
11       android:src="@drawable/Splash"
12       android:gravity="center"
13       android:layout_gravity="center"/>
14   </item>
15 </layer-list>

5, 在 Resources/drawable 目录下放个 Splash.png, 对应到上面的 XML 中的 bitmap 节的 src 属性.

--------------

完

这个是商业项目, 所以没有源代码共享.

如果你感兴趣, 可以下载 android 的 app 试用 ( Android 4.1 及以上 ), 服务是我本机的调试环境, 每天 9:30 ~ 下午 18:00 开启.

http://files.cnblogs.com/files/xling/LBC.LBC-Signed.apk

用户名/密码 : FRANK / FRANK

Xamarin.Form 项目总结

标签：

原文地址：http://www.cnblogs.com/xling/p/4531190.html

踩

(0)

(3)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行