Autolayout within SEssentialsAccordionSection (Xamarin)


#1

I’m trying to get autolayout to work programatically within an Accordion, and I’m not having much luck.  (It may be due to my limited experience with autolayout.)   The code below basically sets up a blue content view and adds a green label horizontally centered, and 10 pixels from the bottom.  This works fine when I try to add it directly to a parent view (with the extra 4 lines that are now commented out.)

If I instead try using these lines in to create a section of my AccordionData source, I haven’t been able to get it to work correctly.  (The label displays half way off the left part of the screen, and the blue background doesn’t display at all.  I’m sure it has to do with not setting the constraights on the content view to be able to match the size of its container.  I’ve tried passing in a RectangleF frame to size the UIView, but then it instead shows the label centered both vertically and horizontally, with still no blue content view.  And for some reason, nothing shows up in the first accordion section.

Anyone know if it is possible to use autolayout within an accordion section?

            UIView content = new UIView ();
            content.TranslatesAutoresizingMaskIntoConstraints = false;
//                View . Add   ( content )__;
//                View . AddConstraint   ( NSLayoutConstraint. Create  (content ,   NSLayoutAttribute. Left ,   NSLayoutRelation . Equal ,   View ,   NSLayoutAttribute . Left ,   1 ,   0))__;
//                View . AddConstraint   ( NSLayoutConstraint. Create  (content ,   NSLayoutAttribute. Width ,   NSLayoutRelation . Equal ,   View ,   NSLayoutAttribute . Width ,   1 ,   0))__;
//                View . AddConstraint   ( NSLayoutConstraint. Create  (content ,   NSLayoutAttribute. Top ,   NSLayoutRelation . Equal ,   View ,   NSLayoutAttribute . Top ,   1 ,   0))__;
//                View . AddConstraint   ( NSLayoutConstraint. Create  (content ,   NSLayoutAttribute. Height ,   NSLayoutRelation . Equal ,   View ,   NSLayoutAttribute . Height ,   1 ,   0))__;

            content.BackgroundColor = UIColor.Blue;

            UILabel label = new UILabel ();
            label.BackgroundColor = UIColor.Green;
            label.Text = "label ";
            label.TranslatesAutoresizingMaskIntoConstraints = false;
            content.Add (label);
            content.TranslatesAutoresizingMaskIntoConstraints = false;
            content.AddConstraint (NSLayoutConstraint.Create (label, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, content, NSLayoutAttribute.CenterX, 1, 0));
            content.AddConstraint (NSLayoutConstraint.Create (label, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, content, NSLayoutAttribute.Bottom, 1, -20));

//   associate   the   content   with   the   section   in   a_ dictionary_
            mapSectionToView.Add (section, content);


#2

Found a solution that I believe will work.

By adding an additional UIView container that is presized, I can then add the constraints I need to it and have everything else with autolayout work.

            UIView sizedView = new UIView (new RectangleF(0,0,320,300));//size of the section

            UIView content = new UIView ();
           
            content.TranslatesAutoresizingMaskIntoConstraints = false;
            sizedView.Add (content);
            sizedView.AddConstraint (NSLayoutConstraint.Create (content, NSLayoutAttribute.Left, NSLayoutRelation.Equal, sizedView, NSLayoutAttribute.Left, 1, 0));
            sizedView.AddConstraint (NSLayoutConstraint.Create (content, NSLayoutAttribute.Width, NSLayoutRelation.Equal, sizedView, NSLayoutAttribute.Width, 1, 0));
            sizedView.AddConstraint (NSLayoutConstraint.Create (content, NSLayoutAttribute.Top, NSLayoutRelation.Equal, sizedView, NSLayoutAttribute.Top, 1, 0));
            sizedView.AddConstraint (NSLayoutConstraint.Create (content, NSLayoutAttribute.Height, NSLayoutRelation.Equal, sizedView, NSLayoutAttribute.Height, 1, 0));

mapSectionToView.Add (section, sizedView);