爲 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 階段，請勿參考使用源碼中的用法。