Xamarin.Form 项目总结

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

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

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

 

ListView 的下拉刷新

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

1.  当下刷新时， RefreshCommand 会被调用，Refreshing 事件会被执行。IsRefreshing 会被设置为 true
2.  实现 RefreshCommand 或 Refreshing 事件。
3. 当刷新完成，调用 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