实现Xamarin.Forms ListView索引在Android与iOS端一致（仿iOS样式）求助

要让Android和iOS的ListView索引完全对齐iOS的侧边字母条样式，核心思路是利用自定义渲染器：iOS直接复用原生UITableView的索引能力，Android则自定义一个模拟iOS样式的侧边索引条，同时统一两端的滚动交互逻辑。下面是分步实现方案：

一、共享项目：定义带索引的自定义ListView #

先在共享代码里创建一个封装了索引能力的自定义ListView，方便跨平台绑定和扩展：

using Xamarin.Forms;

namespace YourAppName.Controls
{
    public class IndexedListView : ListView
    {
        // 绑定属性：要显示的索引字母列表（如A-Z）
        public static readonly BindableProperty IndexLettersProperty =
            BindableProperty.Create(nameof(IndexLetters), typeof(string[]), typeof(IndexedListView), new string[0]);

        // 绑定属性：点击索引字母时的命令
        public static readonly BindableProperty SelectedIndexCommandProperty =
            BindableProperty.Create(nameof(SelectedIndexCommand), typeof(ICommand), typeof(IndexedListView));

        public string[] IndexLetters
        {
            get => (string[])GetValue(IndexLettersProperty);
            set => SetValue(IndexLettersProperty, value);
        }

        public ICommand SelectedIndexCommand
        {
            get => (ICommand)GetValue(SelectedIndexCommandProperty);
            set => SetValue(SelectedIndexCommandProperty, value);
        }
    }
}

二、iOS平台：复用原生UITableView索引 #

iOS原生UITableView自带侧边索引功能，我们只需要在渲染器里对接自定义ListView的属性即可：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourAppName.Controls;
using YourAppName.iOS.Renderers;

[assembly: ExportRenderer(typeof(IndexedListView), typeof(IndexedListViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class IndexedListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (Control != null && Element is IndexedListView indexedListView)
            {
                var tableView = Control as UITableView;
                // 设置索引字母
                tableView.SectionIndexTitles = indexedListView.IndexLetters;
                // 处理索引点击跳转逻辑
                tableView.SectionForSectionIndexTitle = (tableView, title, index) =>
                {
                    indexedListView.SelectedIndexCommand?.Execute(title);
                    return index;
                };
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            // 当索引字母列表更新时同步到原生控件
            if (e.PropertyName == IndexedListView.IndexLettersProperty.PropertyName && Control != null)
            {
                var tableView = Control as UITableView;
                tableView.SectionIndexTitles = ((IndexedListView)Element).IndexLetters;
            }
        }
    }
}

三、Android平台：自定义iOS风格的侧边索引条 #

Android原生ListView没有类似iOS的索引样式，所以我们需要手动实现一个侧边索引View，并嵌入到ListView的布局中：

3.1 自定义索引条View #

创建一个IndexBarView，负责绘制字母、处理触摸事件：

using Android.Content;
using Android.Graphics;
using Android.Views;
using Android.Widget;
using YourAppName.Droid.Controls;

namespace YourAppName.Droid.Controls
{
    public class IndexBarView : View
    {
        // 索引字母列表
        private string[] _indexLetters;
        // 选中的字母位置
        private int _selectedPosition = -1;
        // 画笔
        private Paint _paint = new Paint(PaintFlags.AntiAlias);
        // 点击事件回调
        public event System.Action<string> OnIndexSelected;

        public IndexBarView(Context context) : base(context)
        {
            InitStyle();
        }

        private void InitStyle()
        {
            // 对齐iOS的索引样式：灰色文字，选中时高亮
            _paint.TextSize = 36;
            _paint.Color = Color.Gray;
            _paint.TextAlign = Paint.Align.Center;
        }

        public void SetIndexLetters(string[] letters)
        {
            _indexLetters = letters;
            Invalidate();
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);
            if (_indexLetters == null || _indexLetters.Length == 0) return;

            var totalHeight = Height;
            var singleHeight = totalHeight / _indexLetters.Length;

            for (int i = 0; i < _indexLetters.Length; i++)
            {
                // 选中的字母高亮显示
                if (i == _selectedPosition)
                {
                    _paint.Color = Color.Blue;
                    _paint.Typeface = Typeface.DefaultBold;
                }
                else
                {
                    _paint.Color = Color.Gray;
                    _paint.Typeface = Typeface.Default;
                }

                float x = Width / 2f;
                float y = singleHeight * i + singleHeight / 2f - (_paint.Descent() + _paint.Ascent()) / 2f;
                canvas.DrawText(_indexLetters[i], x, y, _paint);
            }
        }

        public override bool OnTouchEvent(MotionEvent e)
        {
            base.OnTouchEvent(e);
            if (_indexLetters == null || _indexLetters.Length == 0) return false;

            var touchY = e.Y;
            var singleHeight = Height / _indexLetters.Length;
            var position = (int)(touchY / singleHeight);

            if (position >= 0 && position < _indexLetters.Length)
            {
                switch (e.Action)
                {
                    case MotionEventActions.Down:
                    case MotionEventActions.Move:
                        _selectedPosition = position;
                        Invalidate();
                        OnIndexSelected?.Invoke(_indexLetters[position]);
                        break;
                    case MotionEventActions.Up:
                        _selectedPosition = -1;
                        Invalidate();
                        break;
                }
            }
            return true;
        }
    }
}

3.2 Android自定义渲染器 #

将索引条嵌入ListView的布局，处理滚动同步和跳转逻辑：

using Android.Content;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using YourAppName.Controls;
using YourAppName.Droid.Controls;
using YourAppName.Droid.Renderers;

[assembly: ExportRenderer(typeof(IndexedListView), typeof(IndexedListViewRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class IndexedListViewRenderer : ListViewRenderer
    {
        private IndexBarView _indexBar;
        private IndexedListView _element;

        public IndexedListViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                _element = e.NewElement as IndexedListView;
                SetupIndexBar();
            }
        }

        private void SetupIndexBar()
        {
            if (Control is Android.Widget.ListView listView)
            {
                // 创建索引条并添加到父布局
                _indexBar = new IndexBarView(Context);
                _indexBar.SetIndexLetters(_element.IndexLetters);
                _indexBar.OnIndexSelected += (letter) =>
                {
                    // 触发共享项目的命令
                    _element.SelectedIndexCommand?.Execute(letter);
                    // 滚动到对应分组位置
                    for (int i = 0; i < listView.Count; i++)
                    {
                        var item = listView.GetItemAtPosition(i);
                        // 这里需要根据你的分组数据模型，判断当前项的分组首字母是否匹配
                        // 示例：假设你的分组模型的Key是首字母
                        if (item is YourGroupModel group && group.Key.Equals(letter))
                        {
                            listView.SetSelection(i);
                            break;
                        }
                    }
                };

                // 给ListView的父布局添加索引条
                if (Parent is ViewGroup parentLayout)
                {
                    parentLayout.AddView(_indexBar, new LayoutParams(LayoutParams.WrapContent, LayoutParams.MatchParent)
                    {
                        Gravity = GravityFlags.Right
                    });
                }

                // 监听ListView滚动，同步索引条选中状态（可选优化）
                listView.Scroll += (s, args) =>
                {
                    // 根据当前可见的第一个Item，更新索引条的选中字母
                    // 这里需要根据你的数据模型实现，比如获取当前可见项的分组首字母，找到对应的索引位置
                    // 示例：
                    // var firstVisibleItem = listView.FirstVisiblePosition;
                    // var group = listView.GetItemAtPosition(firstVisibleItem) as YourGroupModel;
                    // if (group != null)
                    // {
                    //     var index = System.Array.IndexOf(_element.IndexLetters, group.Key);
                    //     _indexBar.SetSelectedPosition(index);
                    // }
                };
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == IndexedListView.IndexLettersProperty.PropertyName && _indexBar != null)
            {
                _indexBar.SetIndexLetters(_element.IndexLetters);
            }
        }
    }
}

四、使用示例（XAML + ViewModel） #

在XAML中引用自定义控件，并绑定分组数据和索引字母：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourAppName.Controls"
             x:Class="YourAppName.Views.IndexedListViewPage">
    <controls:IndexedListView 
        ItemsSource="{Binding GroupedData}"
        IsGroupingEnabled="True"
        IndexLetters="{Binding IndexLetters}"
        SelectedIndexCommand="{Binding OnIndexSelectedCommand}">
        <!-- 分组Header模板 -->
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label Text="{Binding Key}" BackgroundColor="#f0f0f0" Padding="10"/>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <!-- 项模板 -->
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </controls:IndexedListView>
</ContentPage>

在ViewModel中准备分组数据和索引字母：

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace YourAppName.ViewModels
{
    public class IndexedListViewViewModel
    {
        public ObservableCollection<Grouping<string, PersonModel>> GroupedData { get; set; }
        public string[] IndexLetters { get; set; }
        public ICommand OnIndexSelectedCommand { get; set; }

        public IndexedListViewViewModel()
        {
            // 模拟分组数据
            GroupedData = new ObservableCollection<Grouping<string, PersonModel>>
            {
                new Grouping<string, PersonModel>("A", new List<PersonModel> { new PersonModel("Alice"), new PersonModel("Amy") }),
                new Grouping<string, PersonModel>("B", new List<PersonModel> { new PersonModel("Bob") }),
                // 更多分组...
            };

            // 生成索引字母（从分组Key提取）
            IndexLetters = GroupedData.Select(g => g.Key).ToArray();

            OnIndexSelectedCommand = new Command<string>(letter =>
            {
                // 可选：处理索引选中的额外逻辑
            });
        }
    }

    // 分组模型
    public class Grouping<K, T> : ObservableCollection<T>
    {
        public K Key { get; private set; }
        public Grouping(K key, IEnumerable<T> items)
        {
            Key = key;
            foreach (var item in items)
                Items.Add(item);
        }
    }

    // 数据模型
    public class PersonModel
    {
        public string Name { get; set; }
        public PersonModel(string name) => Name = name;
    }
}

关键注意事项 #

• 数据对齐：确保Android和iOS的分组数据结构一致，索引字母和分组Key严格对应，避免跳转错位。
• 样式统一：Android的IndexBarView可以通过调整画笔的颜色、字号、位置，完全匹配iOS的索引条样式。
• 性能优化：在Android端滚动同步索引条时，避免频繁刷新UI，可以适当添加防抖逻辑。

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