Xamarin Forms自定义ActivityIndicator：GIF动效指示器实现求助

嘿，我完全懂你这种“以为很简单结果卡半天”的烦躁感！其实Xamarin Forms原生的ActivityIndicator确实不支持直接用GIF，得靠自定义控件+平台渲染器来实现，我给你整理了一套亲测有效的完整方案，一步步来：

我们要做一个跨平台的自定义CustomActivityIndicator控件，然后针对Android和iOS分别写渲染器，利用原生平台的控件来加载并播放GIF动画，最后通过绑定IsRunning属性来控制显示/隐藏和动画启停。

步骤1：创建共享项目的自定义控件 #

在你的Xamarin Forms共享项目里新建一个类，定义我们的自定义控件，只需要一个IsRunning绑定属性来控制状态：

using Xamarin.Forms;

namespace YourAppNamespace // 替换成你的项目命名空间
{
    public class CustomActivityIndicator : View
    {
        // 定义绑定属性，用于控制是否显示加载动画
        public static readonly BindableProperty IsRunningProperty =
            BindableProperty.Create(nameof(IsRunning), typeof(bool), typeof(CustomActivityIndicator), false);

        public bool IsRunning
        {
            get => (bool)GetValue(IsRunningProperty);
            set => SetValue(IsRunningProperty, value);
        }
    }
}

步骤2：Android平台渲染器实现 #

Android这边我们用ImageView来加载GIF资源，通过AnimationDrawable来控制动画播放。记得把你的GIF文件（比如loading.gif）放到Android项目的Resources/drawable文件夹，设置Build Action为AndroidResource。

using Android.Content;
using Android.Widget;
using YourAppNamespace;
using YourAppNamespace.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

// 注册渲染器，关联自定义控件和原生实现
[assembly: ExportRenderer(typeof(CustomActivityIndicator), typeof(CustomActivityIndicatorRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomActivityIndicatorRenderer : ViewRenderer<CustomActivityIndicator, ImageView>
    {
        private readonly Context _context;

        public CustomActivityIndicatorRenderer(Context context) : base(context)
        {
            _context = context;
        }

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

            if (Control == null)
            {
                // 初始化ImageView并加载GIF资源
                var imageView = new ImageView(_context);
                imageView.SetImageResource(Resource.Drawable.loading); // 替换成你的GIF文件名
                imageView.ScaleType = ImageView.ScaleType.CenterInside; // 适配控件尺寸
                imageView.Visibility = Android.Views.ViewStates.Gone; // 默认隐藏
                SetNativeControl(imageView);
            }

            if (e.NewElement != null)
            {
                UpdateAnimationState();
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            // 监听IsRunning属性变化，更新动画状态
            if (e.PropertyName == CustomActivityIndicator.IsRunningProperty.PropertyName)
            {
                UpdateAnimationState();
            }
        }

        private void UpdateAnimationState()
        {
            if (Element.IsRunning)
            {
                Control.Visibility = Android.Views.ViewStates.Visible;
                // 启动GIF动画
                var animationDrawable = Control.Drawable as Android.Graphics.Drawables.AnimationDrawable;
                animationDrawable?.Start();
            }
            else
            {
                Control.Visibility = Android.Views.ViewStates.Gone;
                // 停止动画
                var animationDrawable = Control.Drawable as Android.Graphics.Drawables.AnimationDrawable;
                animationDrawable?.Stop();
            }
        }
    }
}

步骤3：iOS平台渲染器实现 #

iOS这边用UIImageView来播放GIF，因为UIImageView原生支持序列帧动画。把你的GIF文件（比如loading.gif）放到iOS项目的Resources文件夹，设置Build Action为BundleResource。

using UIKit;
using YourAppNamespace;
using YourAppNamespace.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

// 注册渲染器
[assembly: ExportRenderer(typeof(CustomActivityIndicator), typeof(CustomActivityIndicatorRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomActivityIndicatorRenderer : ViewRenderer<CustomActivityIndicator, UIImageView>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<CustomActivityIndicator> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                // 初始化UIImageView
                var imageView = new UIImageView();
                imageView.ContentMode = UIViewContentMode.ScaleAspectFit; // 适配控件尺寸
                imageView.Hidden = true; // 默认隐藏

                // 加载GIF并转为动画帧
                var gifPath = NSBundle.MainBundle.PathForResource("loading", "gif"); // 替换成你的GIF文件名
                var gifData = NSData.FromFile(gifPath);
                var animatedImage = UIImage.CreateAnimatedImageFromData(gifData);
                imageView.Image = animatedImage;

                SetNativeControl(imageView);
            }

            if (e.NewElement != null)
            {
                UpdateAnimationState();
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CustomActivityIndicator.IsRunningProperty.PropertyName)
            {
                UpdateAnimationState();
            }
        }

        private void UpdateAnimationState()
        {
            if (Element.IsRunning)
            {
                Control.Hidden = false;
                Control.StartAnimating(); // 启动动画
            }
            else
            {
                Control.Hidden = true;
                Control.StopAnimating(); // 停止动画
            }
        }
    }
}

步骤4：在XAML中使用自定义控件 #

在你的页面XAML里引用自定义控件的命名空间，然后就可以像用原生ActivityIndicator一样使用了：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace" <!-- 替换成你的项目命名空间 -->
             x:Class="YourAppNamespace.MainPage">

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <!-- 绑定IsRunning到ViewModel的属性，控制显示 -->
        <local:CustomActivityIndicator IsRunning="{Binding IsLoading}" 
                                       WidthRequest="60" 
                                       HeightRequest="60"/>
    </StackLayout>
</ContentPage>

然后在你的ViewModel里实现INotifyPropertyChanged，添加IsLoading属性：

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourAppNamespace
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private bool _isLoading;
        public bool IsLoading
        {
            get => _isLoading;
            set
            {
                _isLoading = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

额外小提示 #

1. 尽量选择尺寸小的GIF，避免占用过多资源影响性能
2. 如果需要调整GIF的显示比例，可以在渲染器里设置控件的缩放模式（Android的ScaleType，iOS的ContentMode）
3. 如果你不想写原生渲染器，也可以用FFImageLoading这个第三方库，它支持直接在Xamarin Forms里加载GIF并通过IsAnimationPlaying属性控制播放，不过需要先安装对应的NuGet包

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