首页 > 解决方案 > 在 Xamarin 窗体中加载视图内容时显示活动指示器

问题描述

有没有办法在页面内容视图呈现或加载时显示活动指示器?,我问这个是因为当我在页面中有很多控件时,我想导航到该页面,它需要几秒钟到页面。所以我想知道是否有一种方法可以即时导航页面,当页面出现时显示加载内容的活动指示器,以及在加载内容时显示它。

标签: c#xamarin.forms

解决方案


有没有办法在页面内容视图呈现或加载时显示活动指示器?

  1. 我们需要在 PCL 中创建服务名称 ILodingPageService 接口。

    public interface ILodingPageService
     {
    void InitLoadingPage(ContentPage loadingIndicatorPage = null);
    void ShowLoadingPage();
    void HideLoadingPage();
    
     }
    

2.创建透明页面以显示活动指示器。

<ContentPage.Content>
    <StackLayout
        Padding="30"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        VerticalOptions="Center">

        <ActivityIndicator IsRunning="True" Color="White" />

        <Label
            FontAttributes="Bold"
            Text="Loading..."
            TextColor="White" />

    </StackLayout>
</ContentPage.Content>

3.在Android平台实现ILodingPageService接口。

[assembly: Xamarin.Forms.Dependency(typeof(LodingPageServiceDroid))]

命名空间 IndicatorApp.Droid {
公共类 LodingPageServiceDroid : ILodingPageService {

    private Android.Views.View _nativeView;
    private Dialog _dialog;
    private bool _isInitialized;
    public void HideLoadingPage()
    {
        // Hide the page

        _dialog.Hide();
    }

    public void InitLoadingPage(ContentPage loadingIndicatorPage = null)
    {
        // check if the page parameter is available
        if (loadingIndicatorPage != null)
        {
            // build the loading page with native base
            loadingIndicatorPage.Parent = Xamarin.Forms.Application.Current.MainPage;
            loadingIndicatorPage.Layout(new Rectangle(0, 0,
            Xamarin.Forms.Application.Current.MainPage.Width,
            Xamarin.Forms.Application.Current.MainPage.Height));
            var renderer = loadingIndicatorPage.GetOrCreateRenderer();
            _nativeView = renderer.View;
            _dialog = new Dialog(CrossCurrentActivity.Current.Activity);

            _dialog.RequestWindowFeature((int)WindowFeatures.NoTitle);

            _dialog.SetCancelable(false);

            _dialog.SetContentView(_nativeView);

            Window window = _dialog.Window;

            window.SetLayout(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);

            window.ClearFlags(WindowManagerFlags.DimBehind);

            window.SetBackgroundDrawable(new ColorDrawable(Android.Graphics.Color.Transparent));
            _isInitialized = true;
        }
    }

    public void ShowLoadingPage()
    {
        // check if the user has set the page or not
        if (!_isInitialized)
            InitLoadingPage(new LoadingIndicatorPage1()); // set the default page

        // showing the native loading page

        _dialog.Show();
    }
}
internal static class PlatformExtension
{
    public static IVisualElementRenderer GetOrCreateRenderer(this VisualElement bindable)
    {
        var renderer = XFPlatform.GetRenderer(bindable);
        if (renderer == null)
        {
            renderer = XFPlatform.CreateRendererWithContext(bindable, CrossCurrentActivity.Current.Activity);

            XFPlatform.SetRenderer(bindable, renderer);

        }

        return renderer;

    }

}

}

我在 githun 创建了新的 simple,你可以下载它。

https://github.com/CherryBu/activityindicator

如果我的回复解决了您的问题,请记得在我的回复中标记答案,谢谢。

截图在这里: 在此处输入图像描述


推荐阅读