FlipView For Xamarin.Form 之 IOS

之前写过两篇博文 是关于 Android 和 Windows Phone 下的 FlipView 的实现。

上上周，有个印度佬通过 GitHub 找到我， 问我有没有打算个 ios 端的，还说比较了相同功能的几个开源项目，我的这个项目值得推荐。说的我心潮澎湃，上周末花了一个周末升级到最新的 XCode 7，顺便也升级到了 OS X EI Capitan, 安装了最新的 Xamarin, 使用了 IOS 9 提供的免费证书，终于于今天凌晨1点（10月25）把 ios 端的 renderer 给写出来了。

先上效果图：

项目地址：

https://github.com/gruan01/FlipView

支持 ios / Android / Windows Phone

相比之下，ios 的实现最简单， 只用了 UIScrollView + UIPageControl (白点) 就完成了，代码易于理解。

https://github.com/gruan01/FlipView/blob/master/FlipView/FlipView.iOS/Controls/FlipView.cs

Android 下使用了 PageAdapter + ViewPager + 一堆的点缀，控制点N多，不易阅读理解。

Windows Phone 下从 ItemsControl 扩展出来一个新控件，还算清晰吧。

本文主要介绍 ios 端，其它请参考：

Xamarin 实现 Android 无限循环展示, FlipView

挣扎着写 FlipView For Xamarin.Form

UIScrollView 可以设置分页(PagingEnable), 这个特性满足 FlipView 的需求。

如果要有分页效果， UIScrollView 的 ContentSize 必须大于它的 Frame.

要使每一页上都有衔接的内容显示，必须按 X 或 Y 方向对子 View 进行布局：

         public override void LayoutSubviews() {
             base.LayoutSubviews();
 
             var w = this.Frame.Size.Width;
             var h = this.Frame.Size.Height;
             ; i < this.Views.Count; i++) {
                 var v = this.Subviews[i];
 
                 , w, h);
                 v.Frame = rect;
             }
 
             this.ContentSize = new CGSize(w * this.Views.Count, h);
         }

要知道当前显示的是哪一页，需要监听 UIScrollView 的 Scrolled 事件：

             this.Scrolled += FlipView_Scrolled;
         }
 
         void FlipView_Scrolled(object sender, EventArgs e) {
             var pageWidth = this.Frame.Size.Width;
             ) / pageWidth) + ;
             this.PageControl.CurrentPage = page;
         }

this.PageControl 就是那几个白点，只负卖萌。 注意不要把它做为 UIScrollView 的子视图了， 它应该是和 UIScrollView 同一个父级的，要不然，这几个白点就会在切换页面的时候同时被滚来滚去。

         protected override void OnElementChanged(ElementChangedEventArgs<Flip> e) {
             base.OnElementChanged(e);
 
             var fv = new Controls.FlipView();
             var items = this.GetChildrenViews().ToList();
             fv.SetItems(items);
 
             this.SetNativeControl(fv);
             this.Control.SizeToFit();
             this.AddSubview(this.Control.PageControl);
         }

Android 的布局有 MATCH_PARENT 和 WRAP_CONTENT, windows phone 下更简单，这使得在 Android 和 WP 下不用关心空间大小的分配。

但是在 ios 下有一点麻烦，UIScrollView 的 子视图需分配 Frame, 还需要计算好 ContentSize。但是控件加载的时候，空间和大小都还没有分配， 当然无法给子视图分配 Frame, 同理 ContentSize 也无法计算。

无奈只得在 Render 的 OnElementChanged 方法中，SetNativeControl 之后，调用 SizeToFit 方法，已使 GetDesiredSize 可以被触发，并将分配的大小传给 UIScrollView

         public override SizeRequest GetDesiredSize(double widthConstraint, double heightConstraint) {
             this.Control.UpdateLayout(widthConstraint, heightConstraint);
             return UIViewExtensions.GetSizeRequest(this.NativeView, widthConstraint, heightConstraint, 44.0, 44.0);
         }

在 UpdateLayout 方法中， 对 UIScrollView 的 Frame 进行调整， 然后强制重新布局 （LayoutSubviews 方法会被调用）。

         public void UpdateLayout(double width, double height) {
             , , width, height);
             , height - , width, );
             //this.BringSubviewToFront(this.PageControl);
             this.SetNeedsLayout();
         }

模拟器的效果就是上面的效果图， 但是在真机调试的时候，编译阶段报如下错误：

错误 30 error MT1007: Failed to launch the application 'XXX' on the device '“XXX': Look for
earlier warnings returned: 0x454. You can still launch the application manually by tapping on it. Xamarin.iOS

Extension 0 0

手动点击安装到真机的APP， 无法运行。 这个应该是 Xamarin 的 Bug, 和代码无关，改天换个低版本的 Xamarin 在试。

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

OK 完。

谢谢捧场。