Xamarin.form项目开发中的总结


Xamarin.Form 项目总结

Xamarin.Form


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

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

ListView 的下拉刷新

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

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

  1. 1 /// <summary>
  2. 2 /// 下拉刷新事件
  3. 3 /// </summary>
  4. 4 /// <param name="sender"></param>
  5. 5 /// <param name="e"></param>
  6. 6 public void RefreshData(object sender, EventArgs e) {
  7. 7 this.PageIdx = 0;
  8. 8 this.LoadConsigns(true);
  9. 9 var lst = (ListView)sender;
  10. 10 lst.IsRefreshing = false;
  11. 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. 1 /// <summary>
  2. 2 /// 最后一条数据展现时,加载更多
  3. 3 /// </summary>
  4. 4 /// <param name="sender"></param>
  5. 5 /// <param name="e"></param>
  6. 6 public void LastAppear(object sender, ItemVisibilityEventArgs e) {
  7. 7 if (this.Datas.Last().Equals(e.Item)) {
  8. 8 this.LoadConsigns();
  9. 9 }
  10. 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. 1 protected override void OnAppearing() {
  2. 2 base.OnAppearing();
  3. 3
  4. 4 if (this.Data == null)
  5. 5 Task.Delay(500).ContinueWith((t) => {
  6. 6 Device.BeginInvokeOnMainThread(() => {
  7. 7 this.LoadData();
  8. 8 });
  9. 9 });
  10. 10
  11. 11 }

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

HUD

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

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

联编设置

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

error XA2006: Reference to metadata item ....
之类的错误.

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

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

261714088214362.jpg-50kB
261714186808041.jpg-30.1kB

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

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

AOT JIT 泛型

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

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

其中, MainLauncher 设为 true

还要设置一下 Theme : Style/Theme

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

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

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

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

4, 在 Resources/drawable 目录下新建一个 SplashScreen.xml, 对应到上面的Xml 中的 的值:

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

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

分享到