Change loading indicator Offset in Xamarin.Forms RefreshView

Question

On Xamarin.Forms (iOS Android), I need to change the loading-indicator position on the RefreshView. I need to add offset, so the indicator is visible if you have a bar overlapping the ScrollView-RefreshView combo and trigger pullOnRefresh.

Loading-indicator in the top edge

EDIT: thanks to Junior Jiang - MSFT- Android solution

I also implement a solution for xamarin.iOS

[assembly: ExportRenderer(typeof(RefreshView), typeof(CustomRefreshViewRenderer))] 
namespace CustomRefresh.iOS {
public class CustomRefreshViewRenderer : RefreshViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<RefreshView> e)
    {
        base.OnElementChanged(e);

        foreach (var nativeView in Subviews)
            updateRefreshSettings(nativeView);

    }

    void updateRefreshSettings(UIView view) {
        if (view is UIScrollView)
        {
            var scrollView = view as UIScrollView;
            if (scrollView.RefreshControl != null)
            {
                var bounds = scrollView.RefreshControl.Bounds;
                scrollView.RefreshControl.Bounds = new CGRect(bounds.X, -(100), bounds.Width, bounds.Height);
            }
        }
        //add more scrollable view types
    }
}

}

Hi , could you share an image to explain the position you want to change to where place ? — Junior Jiang, Jun 03 '20 at 02:44

Junior Jiang · Accepted Answer · 2020-06-04T05:57:01.270

0

You can custom a RefreshViewRenderer to achieve that .

In Android , there is a MOriginalOffsetTop to modify the offset of loading indicator . In addition , also can use SetProgressViewOffset to set the start and end position of indicator .

Code as follow :

using Android.Content;
using RefreshViewDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(RefreshView), typeof(CustomRefreshViewRenderer))]
namespace RefreshViewDemo.Droid
{
    public class CustomRefreshViewRenderer : RefreshViewRenderer
    {

        public CustomRefreshViewRenderer(Context context) : base(context)
        {
            MOriginalOffsetTop = 100;

           // SetProgressViewOffset(true, 100, 101);
        }

    }
}

In iOS , the loading indicator belong to UIRefreshControl of UIScrollView , there is no direct way to change it's offset . Unless override all content view in Renderer then can achieve that . You can refer this Xamarin.Forms/Xamarin.Forms.Platform.iOS/Renderers/RefreshViewRenderer.cs to know what the RefreshView is made of .

====================Update=====================

Shared code is based on this official sample :https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-refreshviewdemo/

For Android , just need to create a CustomRefreshViewRenderer class in android solution .

The effect of SetProgressViewOffset(true, 100, 101) , it seems like the indicator not moving :

edited Jun 04 '20 at 05:57

answered Jun 03 '20 at 05:20

Junior Jiang

12,430
1
10
30

I saw the renderer has available "SwipeLayout" property there. Should I changed from there or from the "this.SetProgressViewOffset".? – Jaekov Segovia Jun 04 '20 at 05:32
@JaekovSegovia What's the meaning of *from there or from the...* , my shared code is all in the renderer . You can modify paramater to fit your want . – Junior Jiang Jun 04 '20 at 05:38
@JaekovSegovia I have updated the answer , you can have a look at that when have time . – Junior Jiang Jun 04 '20 at 05:57
Thanks for you anwer. It works as expected. I was using "SwipeRefreshLayout.SetProgressViewOffset(...)", but you can call the method directly from the renderer. – Jaekov Segovia Jun 04 '20 at 16:10
@JaekovSegovia Yes , they are the same effect . https://i.stack.imgur.com/ylRNQ.png – Junior Jiang Jun 05 '20 at 01:20
You have to use a negative value for the start value in SetProgressViewOffset(true, -100, 200); and it will move – Aaron Ramos Dec 09 '21 at 22:40

Change loading indicator Offset in Xamarin.Forms RefreshView

1 Answers1