如何在Xamarin.iOS中实现三可见项带缩放的Collection View布局

我完全理解你想要的效果——那种中间项完全居中、左右两侧项部分露出的横向CollectionView，确实在Xamarin.iOS社区里现成的实现不多，但我们可以通过自定义UICollectionViewFlowLayout来复刻类似LGLinearFlow的效果，思路和Swift/OC版本一致，下面是完整的实现方案：

1. 自定义CenteredFlowLayout类 #

我们需要继承UICollectionViewFlowLayout并重写几个核心方法，来控制item的布局位置和滑动对齐逻辑：

using CoreGraphics;
using UIKit;

public class CenteredFlowLayout : UICollectionViewFlowLayout
{
    private nfloat _sideItemVisibleWidth = 80; // 左右侧边项可见的宽度，可根据需求调整

    public override void PrepareLayout()
    {
        base.PrepareLayout();

        if (CollectionView == null) return;

        // 计算item宽度：屏幕宽度减去左右两侧可见部分的总宽度
        var itemWidth = CollectionView.Bounds.Width - (_sideItemVisibleWidth * 2);
        ItemSize = new CGSize(itemWidth, CollectionView.Bounds.Height * 0.8); // 可调整item高度比例
        MinimumLineSpacing = 20; // item之间的间距
        SectionInset = new UIEdgeInsets(0, _sideItemVisibleWidth, 0, _sideItemVisibleWidth);
    }

    public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
    {
        var attributes = base.LayoutAttributesForElementsInRect(rect);
        var visibleRect = new CGRect(CollectionView.ContentOffset, CollectionView.Bounds.Size);

        foreach (var attribute in attributes)
        {
            if (attribute.Frame.IntersectsWith(visibleRect))
            {
                // 计算item与屏幕中心的距离，用于调整位置和缩放
                var centerX = CollectionView.Bounds.GetMidX() + CollectionView.ContentOffset.X;
                var distance = Math.Abs(centerX - attribute.Center.X);
                var maxDistance = CollectionView.Bounds.Width / 2 + ItemSize.Width / 2;

                // 调整item的位置，让它们以中心为基准排列
                var offset = attribute.Center.X - centerX;
                var normalizedOffset = offset / maxDistance;
                var newCenterX = centerX + (normalizedOffset * (ItemSize.Width + MinimumLineSpacing));
                attribute.Center = new CGPoint(newCenterX, attribute.Center.Y);

                // 添加缩放效果（可选，增强视觉层级）
                var scale = 1 - (0.15f * (distance / maxDistance));
                attribute.Transform = CGAffineTransform.MakeScale(scale, scale);
            }
        }

        return attributes;
    }

    public override CGPoint TargetContentOffsetForProposedContentOffset(CGPoint proposedContentOffset, UIKit.UICollectionViewScrollingVelocity velocity)
    {
        if (CollectionView == null) return proposedContentOffset;

        var targetRect = new CGRect(proposedContentOffset, CollectionView.Bounds.Size);
        var attributes = LayoutAttributesForElementsInRect(targetRect);

        var closestAttribute = attributes.OrderBy(attr =>
            Math.Abs(attr.Center.X - (proposedContentOffset.X + CollectionView.Bounds.GetMidX()))
        ).FirstOrDefault();

        if (closestAttribute == null) return proposedContentOffset;

        // 计算最终的偏移量，确保选中的item居中
        var offsetAdjustment = closestAttribute.Center.X - (proposedContentOffset.X + CollectionView.Bounds.GetMidX());
        return new CGPoint(proposedContentOffset.X + offsetAdjustment, proposedContentOffset.Y);
    }

    public override bool ShouldInvalidateLayoutForBoundsChange(CGRect newBounds)
    {
        // 当CollectionView bounds变化时，重新计算布局
        return true;
    }
}

代码说明： #

• _sideItemVisibleWidth：控制左右两侧项露出的宽度，可根据你的UI设计调整
• PrepareLayout：初始化item大小、间距和内边距，确保布局基础参数正确
• LayoutAttributesForElementsInRect：调整每个可见item的位置和缩放比例，让中间项突出，两侧项偏移并缩小
• TargetContentOffsetForProposedContentOffset：控制滑动结束时的偏移量，确保最终中间项完全居中
• ShouldInvalidateLayoutForBoundsChange：确保屏幕旋转或bounds变化时重新布局

2. 在ViewController中使用自定义布局 #

接下来，在你的ViewController里初始化CollectionView并应用这个自定义布局：

public class MainViewController : UIViewController, IUICollectionViewDataSource
{
    private UICollectionView _collectionView;
    private readonly List<string> _items = new List<string> { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        // 初始化自定义布局
        var layout = new CenteredFlowLayout();
        layout.ScrollDirection = UICollectionViewScrollDirection.Horizontal;

        // 创建CollectionView
        _collectionView = new UICollectionView(View.Bounds, layout);
        _collectionView.RegisterClassForCell(typeof(CustomCollectionCell), "CustomCell");
        _collectionView.DataSource = this;
        _collectionView.ShowsHorizontalScrollIndicator = false;
        _collectionView.PagingEnabled = false; // 必须关闭默认分页，使用自定义的居中对齐逻辑
        _collectionView.BackgroundColor = UIColor.White;

        View.AddSubview(_collectionView);

        // 添加Auto Layout约束（可选，根据你的布局需求调整）
        _collectionView.TranslatesAutoresizingMaskIntoConstraints = false;
        NSLayoutConstraint.ActivateConstraints(new[]
        {
            _collectionView.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor, 20),
            _collectionView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
            _collectionView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
            _collectionView.HeightAnchor.ConstraintEqualTo(200)
        });
    }

    // 实现UICollectionViewDataSource
    public nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        return _items.Count;
    }

    public UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var cell = collectionView.DequeueReusableCell("CustomCell", indexPath) as CustomCollectionCell;
        cell?.UpdateCell(_items[indexPath.Row]);
        return cell;
    }
}

// 自定义CollectionViewCell示例
public class CustomCollectionCell : UICollectionViewCell
{
    private UILabel _titleLabel;

    public CustomCollectionCell(IntPtr handle) : base(handle)
    {
        InitializeCell();
    }

    private void InitializeCell()
    {
        _titleLabel = new UILabel();
        _titleLabel.TextAlignment = UITextAlignment.Center;
        _titleLabel.TextColor = UIColor.Black;
        _titleLabel.Font = UIFont.SystemFontOfSize(16, UIFontWeight.Bold);

        ContentView.AddSubview(_titleLabel);
        _titleLabel.TranslatesAutoresizingMaskIntoConstraints = false;
        NSLayoutConstraint.ActivateConstraints(new[]
        {
            _titleLabel.CenterXAnchor.ConstraintEqualTo(ContentView.CenterXAnchor),
            _titleLabel.CenterYAnchor.ConstraintEqualTo(ContentView.CenterYAnchor),
            _titleLabel.LeadingAnchor.ConstraintGreaterThanOrEqualTo(ContentView.LeadingAnchor, 10),
            _titleLabel.TrailingAnchor.ConstraintLessThanOrEqualTo(ContentView.TrailingAnchor, 10)
        });

        // 给cell添加圆角和边框，增强视觉效果
        ContentView.Layer.CornerRadius = 8;
        ContentView.Layer.BorderWidth = 1;
        ContentView.Layer.BorderColor = UIColor.LightGray.CGColor;
        ContentView.BackgroundColor = UIColor.LightGray.ColorWithAlpha(0.1f);
    }

    public void UpdateCell(string title)
    {
        _titleLabel.Text = title;
    }
}

3. 调整和优化建议 #

• 如果你不需要缩放效果，可以删除LayoutAttributesForElementsInRect中的缩放代码
• 可以根据需求修改_sideItemVisibleWidth、ItemSize、MinimumLineSpacing等参数，适配不同的UI设计
• 如果需要垂直方向的布局，修改ScrollDirection为Vertical，并调整PrepareLayout和LayoutAttributesForElementsInRect中的计算逻辑（把X轴相关的计算换成Y轴）

内容的提问来源于stack exchange，提问作者Stefanija