Forums Ultimate UI for iOS
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Danny Meier
65
Custom header cell with background image or gradient
posted

Hi,

I'ts me again ;) I like this grid component...it's great to work with.

Are there any samples how to customize the header cells regarding to the appearance? I'd like to have a gradient - realised with flexible background image or painting a gradient layer.

I tried something like:

    public class GridHeaderCell : IGGridViewHeaderCell
    {
        public GridHeaderCell(string identifier) : base(identifier)
        {
            Initialize();
        }

        public GridHeaderCell(IntPtr handle) : base(handle)
        {
            Initialize();
        }

        private void Initialize()
        {
            var gradient = new CAGradientLayer();
            gradient.Frame = Bounds;
            gradient.CornerRadius = 3.0f;
            gradient.MasksToBounds = true;
            gradient.StartPoint = new PointF(0.5f, 0.5f);
            gradient.EndPoint = new PointF(1.0f, 1.0f);
            gradient.Colors = new[] { UIColor.FromRGB(50, 0, 0).CGColor, UIColor.FromRGB(200, 0, 0).CGColor };
            Layer.InsertSublayer(gradient, 0);
        }
    }

But the header is still black. Creating a custom theme allows only to set simple background colors...

Cheers, Danny

Parents
No Data
Reply
  • 40030
    Verified Answer
    Offline posted

    Hi Danny!

    I'm really glad to hear you're enjoying the IGGridView.

    Basically the CAGradientLayer doesn't autosize, so you need to keep it's frame up to date. When you initially set it up, there is no frame on the HeaderCell, so the gradient layer you're creating is 0,0. 

    All IGGridViewCell's actually expose a method to override called SetupSize. Simply override that method, and whenever the cell's size changes, this method will be called and you can update your gradient layer's frame:

    public class GridHeaderCell : IGGridViewHeaderCell
        {
            CAGradientLayer _gradLayer;
            public GridHeaderCell(string identifier) : base(identifier)
            {
                Initialize();
            }

            public GridHeaderCell(IntPtr handle) : base(handle)
            {
                Initialize();
            }

            private void Initialize()
            {
                _gradLayer = new CAGradientLayer();
                _gradLayer.CornerRadius = 3.0f;
                _gradLayer.MasksToBounds = true;
                _gradLayer.StartPoint = new PointF(0.5f, 0.5f);
                _gradLayer.EndPoint = new PointF(1.0f, 1.0f);
                _gradLayer.Colors = new[] { UIColor.FromRGB(50, 0, 0).CGColor, UIColor.FromRGB(200, 0, 0).CGColor };
                Layer.InsertSublayer(_gradLayer, 0);
            }

            public override void SetupSize (SizeF size)
            {
                base.SetupSize (size);
                _gradLayer.Frame = new RectangleF (0, 0, size.Width, size.Height);
            }
        }

    I hope this helps! 

    -SteveZ

Children
No Data