前段时间,私下用 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 按比例设置。
比如:

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

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

2, 动画

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

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

需要注意的是,同 WinForm 或 WPF 一样,不能直接在多线程中直接操作控件,如果非得使用多线程,请使用如下方式:

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

另外注意一点, LayoutTo 不能结合 AbsoluteLayout.LayoutBounds 一起使用。

3,数据源与DataTemplate

当数据源变化,或数据源内部发生变化(增删改)时,都会对子控件进行重组。通过对子控件重组事件的监听,可以对子控件进行初始化或进行修改;修改简单,不讨论,但是初学者一般会有这样的迷惑:怎么把数据源中的数据转换成子控件??

其实很简单:
一般带数据源的控件,都会指定 ItemTemplate (DataTemplate),通过 DataTemplate.CreateContent 方法可以生成 ItemTemplate 指定的内容,然后把生成的内容的 BindingContext 指定为数据源中的数据就可以了。

 private View GetChildView(object data) {
     View view = null;
     if (this.ItemTemplate != null) {
         if (this.ItemTemplate != null)
             view = (View)this.ItemTemplate.CreateContent();

         if (view != null) {
             view.BindingContext = data;
         }
     }

     if (view == null) {
         view = new Label() { Text = data?.GetType().FullName };
     }
     return view;
 }

总体代码比较简单,不在赘述。

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

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

为 Xamarin.Forms 做个跑马灯控件的更多相关文章

  1. Android文字跑马灯控件(文本自动滚动控件)

    最近在开发一个应用,需要用到文本的跑马灯效果,图省事,在网上找,但老半天都找不到,后来自己写了一个,很简单,代码如下: import android.content.Context; import a ...

  2. Flex “跑马灯”效果(自定义“跑马灯”控件)

    自定义类(BroadCastMarquee.as): package marquee { import flash.events.MouseEvent; import flash.events.Tim ...

  3. Xamarin XAML语言教程构建ControlTemplate控件模板 (四)

    Xamarin XAML语言教程构建ControlTemplate控件模板 (四) 2.在页面级别中构建控件模板 如果开发者要在页面级别中构建控件模板,首先必须将ResourceDictionary添 ...

  4. Xamarin XAML语言教程构建ControlTemplate控件模板 (三)

    Xamarin XAML语言教程构建ControlTemplate控件模板 (三) (3)打开MainPage.xaml.cs文件,编写代码,实现主题的切换功能.代码如下: using System; ...

  5. Xamarin XAML语言教程构建ControlTemplate控件模板 (二)

    Xamarin XAML语言教程构建ControlTemplate控件模板 (二) (2)打开MainPage.xaml文件,编写代码,将构建的控件模板应用于ContentView中.代码如下: &l ...

  6. Xamarin XAML语言教程构建ControlTemplate控件模板

    Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate ControlTemplate是从Xamarin.Forms 2.1.0开始被引入的 ...

  7. 给控件做数字签名之一:将控件打包为Web发布包 [转]

    微软代码签名证书使用指南 http://www.wotrust.com/support/signcode_guide.htm 签名重要性:http://www.wotrust.com/FAQ/whyS ...

  8. C#-Xamarin的Android项目开发(二)——控件应用

    相信我,这不是一篇吐槽文章.... 基础控件 Android的控件和控件样式非常特别,它是一种内联特别高的设计模式,换句话说,它是非常烂的设计.... 但在这种特别的关系里还是有一定的规律的,下面我们 ...

  9. 移动UI控件Telerik UI for Xamarin发布R2 2019|引入Map控件

    Telerik UI for Xamarin是一个构建跨平台移动应用程序的原生UI.Telerik UI for Xamarin使用Xamarin.Forms技术,它可以让开发人员从一个单一的共享C# ...

随机推荐

  1. Javascript之旅——第十一站:原型也不好理解?

    写到这篇,我的js系列也快接近尾声了,所以这个系列不会遗留js来实现面向对象的核心——原型,有些人说原型不好理解,其实嘛,要想系统 的理解原型,最便捷的方式就是看看经典的书,少看些博客,博客这东西只是 ...

  2. Kafka 技术文档

    Kafka 技术文档   目录 1 Kafka创建背景 2 Kafka简介 3 Kafka好处 3.1 解耦 3.2 冗余 3.3 扩展性 3.4 灵活性 & 峰值处理能力 3.5 可恢复性 ...

  3. [整]SQL执行顺序

    SQL的执行顺序: 第一步:FROM <left_table> <join_type> JOIN <right_table> ON <on_predicate ...

  4. db2存储过程

    一. 使用存储过程的好处 1. 减少客户机与服务器之间的网络使用率,以及数据库锁定保持的时间 应用程序通常在执行每个SQL语句都要跨网络两次,存储过程可以将SQL语句集中在一起, 从而使得对于每一组S ...

  5. Linux学习--------二

    Linux基础知识 Linux文件系统为一个倒转的单根树状结构文件系统的根为"/" 文件系统严格区分大小写路径 使用"/"分割(windows使用"\ ...

  6. DOS命令批量重命名文件配合Excel 操作备忘

    批量取得文件夹下文件名 有时候文件夹下有好多图片什么的,文件名称不是统一的格式,想统一一下,于是google找到以下方法,进入要操作的目录,按住shift键的同时,单击鼠标右键,你会看到在此处打开命令 ...

  7. Linux rpm 查询

    [root@wang /]# rpm -qa // 查看安装所有包 [root@wang /]# rpm -qa |grep vim // 查询所安装的包 +包名 [root@wang /]# rpm ...

  8. proteus汉化

    下载地址: http://files.cnblogs.com/files/xiaobo-Linux/proteus7%E6%B1%89%E5%8C%96.zip (别的版本也应该可以汉化) 将这ARE ...

  9. HTTP 请求报文 响应报文

    引言 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发 ...

  10. Mysql 如何实现列值的合并

    Mysql 如何实现列值的合并 SELECT  GROUP_CONCAT(name SEPARATOR ' ') AS name FROM A