Xamarin自定义布局系列——瀑布流布局

虽然XF(Xamarin.Forms简称XF,下同)为我们提供大这么多的控件,但在实际使用中,会发现这些控件的可定制性特别差,基本上都需要里利用Renderer来做一些修改。为了实现我们的需求,有两种办法:
- Renderer
- 自定义控件/布局
1.Renderer
XF中的所有控件,实际都是通过Renderer来实现的,利用Renderer,直接实例化相应的原生控件,每一个XF控件在各个平台都对应一个原生控件,具体可以查看这儿:RendererBase
利用Renderer,需要你了解原生控件的使用,所以引用一句话就是:
跨平台不代表不用学各个平台
笔者也是对安卓和iOS了解不多,正在摸索学习中
2.自定义控件/布局
这种相对来说比较简单,却比较繁琐,并且最终效果不会太好,包括性能和UI两方面。但是还是能适应一些常用场景。
关于布局基础知识方面可以查看这位作者的一片文章:Xamarin.Forms自定义布局基础
在使用中会发现XF的自定义布局和UWP的非常相似,常用的方法有两个
public SizeRequest Measure(double widthConstraint, double heightConstraint, MeasureFlags flags = MeasureFlags.None); //计算元素大小
public void Layout(Rectangle bounds);//为元素实际布局,确定其位置和大小
Measure方法的两个参数,表示父元素能为子元素提供的空间大小,返回值则表示子元素计算出自己实际需要的空间大小。
Layout方法的参数表示父元素给子元素提供的布局位置,包含XY坐标和大小四个参数。
现在考虑瀑布流布局的特点:
- 父元素大小确定,至少宽度和高度中有一个值确定(通常表现为整个页面大小)
- 子元素排列表现为按行排列或者按列排列
-
按行排列时:子元素的高是一个定值,宽度跟具具体情况可变
-
按列排列时:子元素的宽是一个定值,高度跟具具体情况可变
瀑布流的常用场景
- 图片展示
下面以的Demo展示一个按列布局的图片展示瀑布流布局
主要有两个方法
private double _maxHeight;
/// <summary>
/// 计算父元素需要的空间大小
/// </summary>
/// <param name="widthConstraint">可供布局的宽度</param>
/// <param name="heightConstraint">可供布局的高度</param>
/// <returns>实际需要的布局大小</returns>
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
double[] colHeights = new double[Column];
double allColumnSpacing = ColumnSpacing * (Column - 1);
columnWidth = (widthConstraint - allColumnSpacing) / Column;
foreach (var item in this.Children)
{
var measuredSize = item.Measure(columnWidth, heightConstraint, MeasureFlags.IncludeMargins);
int col = 0;
for (int i = 1; i < Column; i++)
{
if (colHeights[i] < colHeights[col])
{
col = i;
}
}
colHeights[col] += measuredSize.Request.Height + RowSpacing;
}
_maxHeight = colHeights.OrderByDescending(m => m).First();
return new SizeRequest(new Size(widthConstraint, _maxHeight));
}
OnMeasured方法在布局开始前被调用,在这个方法中,我们遍历所有的子元素,通过调用子元素的Measure方法,计算出所有子元素需要的布局大小,然后按列累加所有的高度,最后选取高度的最大值,这个最大值就是父元素的布局高度,在按列布局中,宽度是确定的。
protected override void LayoutChildren(double x, double y, double width, double height)
{
double[] colHeights = new double[Column];
double allColumnSpacing = ColumnSpacing * (Column - 1);
columnWidth = (width- allColumnSpacing )/ Column;
foreach (var item in this.Children)
{
var measuredSize=item.Measure(columnWidth, height, MeasureFlags.IncludeMargins);
int col = 0;
for (int i = 1; i < Column; i++)
{
if (colHeights[i] < colHeights[col])
{
col = i;
}
}
item.Layout(new Rectangle(col * (columnWidth + ColumnSpacing), colHeights[col], columnWidth, measuredSize.Request.Height));
colHeights[col] += measuredSize.Request.Height+RowSpacing;
}
}
LayoutChildren方法在OnMeasured方法后调用,通过调用子元素的Layou方法,用于对所有子元素布局。
至此,瀑布流和的新逻辑基本完成了,实际很简单。接下来就是让瀑布流支持数据绑定,实现动态添加删除子元素。
为了支持数据绑定,实现一个依赖属性ItemsSource,当ItemsSource被赋值或者值发生变化的时候,重新布局,根据ItemsSource的内容重新布局
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IList), typeof(FlowLayout), null,propertyChanged: ItemsSource_PropertyChanged);
public IList ItemsSource
{
get { return (IList)this.GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
private static void ItemsSource_PropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var flowLayout = (FlowLayout)bindable;
var newItems = newValue as IList;
var oldItems = oldValue as IList;
var oldCollection = oldValue as INotifyCollectionChanged;
if (oldCollection != null)
{
oldCollection.CollectionChanged -= flowLayout.OnCollectionChanged;
}
if (newValue == null)
{
return;
}
if (newItems == null)
return;
if(oldItems == null||newItems.Count!= oldItems.Count)
{
flowLayout.Children.Clear();
for (int i = 0; i < newItems.Count; i++)
{
var child = flowLayout.ItemTemplate.CreateContent();
((BindableObject)child).BindingContext = newItems[i];
flowLayout.Children.Add((View)child);
}
}
var newCollection = newValue as INotifyCollectionChanged;
if (newCollection != null)
{
newCollection.CollectionChanged += flowLayout.OnCollectionChanged;
}
flowLayout.UpdateChildrenLayout();
flowLayout.InvalidateLayout();
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
}
private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.OldItems != null)
{
this.Children.RemoveAt(e.OldStartingIndex);
this.UpdateChildrenLayout();
this.InvalidateLayout();
}
if (e.NewItems == null)
{
return;
}
for (int i = 0; i < e.NewItems.Count; i++)
{
var child = this.ItemTemplate.CreateContent();
((BindableObject)child).BindingContext = e.NewItems[i];
this.Children.Add((View)child);
}
this.UpdateChildrenLayout();
this.InvalidateLayout();
}
}
ItemsSource_PropertyChanged方法在ItemsSource属性被赋值的时候调用,在此方法中,根据自定义的DataTemplate,创建一个视图(View),设置其数据绑定上下文为对应的Item,然后添加到瀑布流布局的Children中。
var child = this.ItemTemplate.CreateContent(); ((BindableObject)child).BindingContext = e.NewItems[i]; this.Children.Add((View)child);
注意到,在数据绑定中,更加常见的场景是:ItemsSource只赋值一次,以后ItemsSource中的值修改,直接能在布局中表现出来。
这就要求ItemsSource的数据源必须实现INotifyCollectionChanged这个接口,在.Net中,ObservableCollection

项目地址:Github
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器