locked
How to Make a Gradient Background Like Android in iOS RRS feed

  • Question

  • User22834 posted

    If you like: 1. Matching your iOS ContentPages to the default dark background gradient of Android 2. Dark background gradients in general 3. Applying your own background effects

    Here's a template for you.

    Create a new file in your iOS project. Name it whatever you want (such as MyContentPageRenderer.cs).

    In this particular example, we're creating a gradient layer and adding it as a sublayer to all ContentPages. Any ContentPage that has BackgroundColor = Color.Transparent will "show" the background gradient. But if you set the page's BackgroundColor to a solid color, it will block the gradient. Ditto for any objects on your page.

    using System;
    using [YOUR NAMESPACE HERE];
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    using MonoTouch.UIKit;
    using MonoTouch.CoreGraphics;
    using MonoTouch.CoreAnimation;
    using MonoTouch.Foundation;
    
    
    [assembly: ExportRenderer(typeof(ContentPage), typeof(MyContentPageRenderer))]
    
    namespace [YOUR NAMESPACE HERE]
    {
        public class MyContentPageRenderer: PageRenderer
        {
            public CAGradientLayer gradient;
            public MyContentPageRenderer ():base()
            {
            }
            protected override void ViewDidLoad ()
            {
                base.ViewDidLoad ();
                gradient = new CAGradientLayer ();
                gradient.Frame = View.Bounds;
                gradient.NeedsDisplayOnBoundsChange = true;
                gradient.MasksToBounds = true;
                gradient.Colors = new CGColor[]{ UIColor.Black.CGColor, UIColor.DarkGray.CGColor };
                View.Layer.InsertSublayer (gradient, 0);
    
            }
            public override void ViewWillLayoutSubviews ()
            {
                base.ViewWillLayoutSubviews ();
                gradient.Frame = View.Bounds;
            }
        }
    }
    

    The ViewWillLayoutSubviews() routine handles resizing when the device rotates.

    Wednesday, July 23, 2014 6:33 PM

All replies

  • User181 posted

    I don't think you should do the creation of the layer in OnElementChanged. In theory that method could be called multiple times. Why not do it in ViewDidLoad?

    Wednesday, July 23, 2014 6:38 PM
  • User22834 posted

    Adam, you're right. Updated.

    Wednesday, July 23, 2014 6:43 PM
  • User208900 posted

    @JohnBeans Thanks a lot...worked like a charm..

    Thursday, August 3, 2017 11:04 AM