Custom UIRefreshControl animation

510 views Asked by At

I am trying to create a custom UIRefreshControl animation that shows my company logo. So far I am able to start an animation when refreshing and stopping when it is not refreshing.

What I want is to have control over the draginEvent of UIRefreshControl and make the logo do something as the UIRefreshControl is dragged down(increase the image alpha or something like it).

I know there has to be a handle to the dragging distance, but I can't find anything I can use to get this value. Can someone help me please.

this is my code so far.

public sealed class FormsUIRefreshControl : UIRefreshControl
{
    UIImageView animatedCircleImage;
    nfloat visibility = 0.0f;
    public FormsUIRefreshControl()
    {
        this.ValueChanged += (object sender, EventArgs e) => 
            {
                var command = RefreshCommand;
                if(command  == null)
                    return;

                command.Execute(null);
            };

        BackgroundColor = UIColor.Clear;

        //Alpha = (nfloat)0.30;

        animatedCircleImage = new UIImageView(new UIImage("loadingLogo.png"));
        animatedCircleImage.Frame = new RectangleF(110, 10, 100, 50);
        animatedCircleImage.BackgroundColor = UIColor.Blue;
        animatedCircleImage.AnimationImages = new UIImage[] {
            UIImage.FromBundle ("loadingLogo.png")
            , UIImage.FromBundle ("loadingLogo1.png")
            , UIImage.FromBundle ("loadingLogo2.png")
            , UIImage.FromBundle ("loadingLogo3.png")
            , UIImage.FromBundle ("loadingLogo4.png")
            , UIImage.FromBundle ("loadingLogo5.png")
            , UIImage.FromBundle ("loadingLogo6.png")
            , UIImage.FromBundle ("loadingLogo7.png")
        };
        animatedCircleImage.AnimationRepeatCount = 0;
        animatedCircleImage.AnimationDuration = .5;
        //animatedCircleImage.StartAnimating();

        AddSubview (animatedCircleImage);

        //ClipsToBounds = true;

        TintColor = UIColor.Clear;
    }


    public override void BeginRefreshing ()
    {
        base.BeginRefreshing ();
        animatedCircleImage.StartAnimating ();
    }

    public override void EndRefreshing ()
    {
        base.EndRefreshing ();
        animatedCircleImage.StopAnimating ();
    }
2

There are 2 answers

0
Ricardo Contreras On BEST ANSWER

You need scrollViewDidScroll. But this works on the class that uses the TableView/TableViewController. Maybe you can call a public animation method for your FormsUIRefreshControl from here using the contentOffset. In Objective C:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"Y Offset: %f", scrollView.contentOffset.y);
}
0
backslash-f On

My 0.02 cents (Swift):

// MARK: - Scroll View Delegate

override func scrollViewDidScroll(scrollView: UIScrollView) {

  // Distance the table has been pulled >= 0.
  let pullDistance: CGFloat = max(0.0, -refreshControl.frame.origin.y)

  // Calculate the pull ratio, between 0.0-1.0.
  let pullRatio: CGFloat = min(max(pullDistance, 0.0), 100.0) / 100.0

  // Update the cloud icon alpha for a nice effect.
  yourCustomLogoImageEtc.alpha = pullRatio
}

Here is an example using QuartzCode.