为 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 阶段,请勿参考使用源码中的用法。

时间: 2024-08-09 15:19:53

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

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

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

Xamarin.Forms 仿照京东搜索记录控件

Xamarin.Forms 仿照京东搜索记录控件 在项目中遇到这样一个需求,仿照京东搜索记录.在Xamarin.Forms中有什么控件可以实现呢? 首先,来分析这个控件的特点: 数据量不大 每条记录字数长度不一,使得每条记录呈现的样式长度不一 经过如上分析,由于数据量不大,且界面样式并不是整齐划一,所以用不着使用ListView,查看官方文档后,发现FlexLayout即可满足我们的需求. FlexLayout这个控件的详细说明可以看微软的官方文档. 这里主要利用了FlexLayout的一些相关

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

Xamarin XAML语言教程构建ControlTemplate控件模板 (四) 2.在页面级别中构建控件模板 如果开发者要在页面级别中构建控件模板,首先必须将ResourceDictionary添加到页面中,然后在ResourceDictionary中实现模板的构建即可,其语法形式如下: <Page> <Page.Resources> <ResourceDictionary> <ControlTemplate x:Key="KeyName"

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

Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate ControlTemplate是从Xamarin.Forms 2.1.0开始被引入的.ControlTemplate被称为控件模板,它将页面的外观和内容进行了分离,从而让开发者可以更方便的创建基于主题的页面.本节将讲解控件模板相关的内容,其中包括构建控件模板以及控件模板的模板绑定等内容. 构建控件模板 控件模板可以在应用程序级别中构建,也可以在页面级别中构建.以下将对这两个构建方式

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

微软代码签名证书使用指南 http://www.wotrust.com/support/signcode_guide.htm 签名重要性:http://www.wotrust.com/FAQ/whySigning.htm 中国数字认证网 http://www.ca365.com/ SSL开放论坛 » 软件代码签名 http://www.openssl.com.cn/forum-22-1.html http://www.cnblogs.com/babyt/ 给控件做数字签名之一:将控件打包为Web

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

相信我,这不是一篇吐槽文章.... 基础控件 Android的控件和控件样式非常特别,它是一种内联特别高的设计模式,换句话说,它是非常烂的设计.... 但在这种特别的关系里还是有一定的规律的,下面我们一起来看看控件的使用方式. 首先我们定义一个ImageButton,如下: <ImageButton android:src="@drawable/toolbar_upload_photo_normal" android:layout_gravity="right|cent

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

Telerik UI for Xamarin是一个构建跨平台移动应用程序的原生UI.Telerik UI for Xamarin使用Xamarin.Forms技术,它可以让开发人员从一个单一的共享C#代码库中创建原生的iOS.Android和Windows Phone应用程序.不仅如此,UI for Xamarin建立在iOS和Android的原生控件之上的,为Xamarin用户的应用程序提供真正的原生UI. [Telerik UI for Xamarin R2 2019下载] 具体更新内容如下

用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多

基于avalon+jquery做的bootstrap分页控件

刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代码贴上: 1 /** 2 * options.id avalon 所需要的$id 3 * options.total 总记录数 4 * options.rows 行数 5 * options.callback 6 */ 7 var Pager=function(options){ 8 var _th