为 Xamarin.Forms 作个跑马灯控件

原文: 为 Xamarin.Forms 作个跑马灯控件

前段时间，私下用 Xamarin.Forms 作了个商业项目的演示版。不少被国内App玩坏了的控件/效果，XF上都没有或是找不到对应的实现，没有办法只能亲自上阵写了几个，效果还行，就是有BUG。

这个跑马灯就是其中的一个，当初赶工，随便写个效果交了差，最终他们把这一块从APP中拿掉了，早知道我就不耗这个时间了。。。

通常App 为了省版面空间，都只会留小小的一块放跑马灯，多条文字轮翻显示，并且还只有一行文本，超出的部份隐藏；若是你看见哪一个APP搞个很大的一块去跑马，那说明这个App的设计师是个逗逼，产品经理也是。

考虑到手机屏幕尺寸，从左到右移动文字这种灯，彻底不合时宜，左晃右晃的更不用说了。

交付的版本中，我作成了缩放式的动画效果，结果很不理想，颇有多是这个缘由，对方最终把这一块给拿掉了。

这两天改了一下，只有从下往上滚动的动画，这样可使总体协调，简洁不失美观。

先看一下效果：

源码：
https://github.com/gruan01/XFThemesTest/blob/master/App1/App1/Marquee.cs

https://github.com/gruan01/XFThemesTest/blob/master/App1/App1/MainPage.xaml

 

1，控件类型选择

这个功能只是把文本在界面上移来移去，彻底用不着动用原生的Android/IOS 控件，因此没有 复杂的Renderer

每条文本都是一个子控件，因此必须是从 ContentView 或 Layout 派生，ContentView 只能有一个直接子控件，因此不合要求。

每一个子控件均可以在父容器的显示范围内自由的移动，因此，只能选择从 AbsoluteLayout 派生。

关于 AbsoluteLayout 能够参考：
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/

须要注意的是 AbsoluteLayoutFlags.XXXProportional ，即将 XXX 按比例设置。
好比：

1 <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0.5,0.5,10,10"
2 AbsoluteLayout.LayoutFlags="PositionProportional" />

的意思就是在 AbsoluteLayout 的中心点上放一个长10宽10的BoxView

 

2, 动画

XF 为控件提供了一套基本的动画接口，包括透明度渐变（Fade），位置移动(Layout)，旋转(Rotate), 扭曲（Translate）

具体参考：
https://developer.xamarin.com/api/type/Xamarin.Forms.ViewExtensions/

须要注意的是，同 WinForm 或 WPF 同样，不能直接在多线程中直接操做控件，若是非得使用多线程，请使用以下方式:

1 await Task.Delay(this.Interval)
2 .ContinueWith(t => this.Run(), TaskScheduler.FromCurrentSynchronizationContext());

另外注意一点， LayoutTo 不能结合 AbsoluteLayout.LayoutBounds 一块儿使用。

 

3，数据源与DataTemplate

当数据源变化，或数据源内部发生变化（增删改）时，都会对子控件进行重组。经过对子控件重组事件的监听，能够对子控件进行初始化或进行修改；修改简单，不讨论，可是初学者通常会有这样的迷惑：怎么把数据源中的数据转换成子控件？？

其实很简单：
通常带数据源的控件，都会指定 ItemTemplate (DataTemplate)，经过 DataTemplate.CreateContent 方法能够生成 ItemTemplate 指定的内容，而后把生成的内容的 BindingContext 指定为数据源中的数据就能够了。

 1 private View GetChildView(object data) {
 2     View view = null;
 3     if (this.ItemTemplate != null) {
 4         if (this.ItemTemplate != null)
 5             view = (View)this.ItemTemplate.CreateContent();
 6 
 7         if (view != null) {
 8             view.BindingContext = data;
 9         }
10     }
11 
12     if (view == null) {
13         view = new Label() { Text = data?.GetType().FullName };
14     }
15     return view;
16 }

 

 

整体代码比较简单，不在赘述。

 

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

Xamarin.Forms Themes 目前仍是 Preview 阶段，请勿参考使用源码中的用法。