xamarin.ios - How to use AutoLayout in Xamarin iOS? -
i creating view without using storyboard or xib. using mvvmcross in project , binding controls this:
using system; using system.drawing; using corefoundation; using uikit; using foundation; using cirrious.mvvmcross.touch.views; using cirrious.mvvmcross.binding.bindingcontext; namespace mobile.ios.views { /// <summary> /// home screen of iphone /// </summary> [register("homeview")] public class homeview : mvxviewcontroller { /// <summary> /// method load view /// </summary> public override void viewdidload() { view = new uiview() { backgroundcolor = uicolor.white }; this.title = "home"; base.viewdidload(); var lblhome = new uilabel(new rectanglef(80, 100, 300, 40)); lblhome.textcolor = uicolor.green; add(lblhome); var btnsignin = new uibutton(uibuttontype.roundedrect); btnsignin.settitle("move login screen", uicontrolstate.normal); btnsignin.frame = new rectanglef(10, 200, 300, 40); add(btnsignin); var set = this.createbindingset<homeview, homeviewmodel>(); set.bind(lblhome).to(vm => vm.hometitle); set.bind(btnsignin).to(vm => vm.login); set.apply(); // perform additional setup after loading view } } }
i want use autolayout design view. views looks fine , similar in iphone device (4s, 5, 5s, 6) , views (portrait or landscape).
without knowing excatly how want label , button react size changes. came this:
using system; using system.drawing; using corefoundation; using uikit; using foundation; using cirrious.mvvmcross.touch.views; using cirrious.mvvmcross.binding.bindingcontext; namespace mobile.ios.views { /// <summary> /// home screen of iphone /// </summary> [register("homeview")] public class homeview : mvxviewcontroller { uilabel lblhome; uibutton btnsignin; public override void viewdidload () { base.viewdidload (); view = new uiview() { backgroundcolor = uicolor.white}; this.title = "home"; base.viewdidload(); // var lblhome = new uilabel( new rectanglef(80,100,300,40) ); lblhome = new uilabel(); lblhome.translatesautoresizingmaskintoconstraints = false; // need autolayout lblhome.text = "home label"; lblhome.textalignment = uitextalignment.center; lblhome.textcolor = uicolor.green; lblhome.backgroundcolor = uicolor.cyan; add( lblhome ); btnsignin = new uibutton( uibuttontype.roundedrect ); btnsignin.settitle( "move login screen", uicontrolstate.normal ); btnsignin.backgroundcolor = uicolor.magenta; // btnsignin.frame = new rectanglef( 10, 200, 300, 40 ); btnsignin.translatesautoresizingmaskintoconstraints = false; // need autolayout add( btnsignin ); setupautolayoutconstraints (); var set = this.createbindingset<homeview, homeviewmodel>(); set.bind( lblhome ).to( vm => vm.hometitle ); set.bind( btnsignin ).to( vm => vm.login ); set.apply(); } private void setupautolayoutconstraints() { view.addconstraints (new [] { // makes width of lblhome same width view , -20 nslayoutconstraint.create(lblhome, nslayoutattribute.width, nslayoutrelation.equal, view, nslayoutattribute.width, 1, -20), // makes height of lblhome 40 nslayoutconstraint.create(lblhome, nslayoutattribute.height, nslayoutrelation.equal, null, nslayoutattribute.noattribute, 1, 40), // makes top of lblhome 100 top of view nslayoutconstraint.create(lblhome, nslayoutattribute.top, nslayoutrelation.equal, view, nslayoutattribute.top, 1, 100), // centers lblhome in view along x-axis nslayoutconstraint.create(lblhome, nslayoutattribute.centerx, nslayoutrelation.equal, view, nslayoutattribute.centerx, 1, 0) }); view.addconstraints (new [] { // makes width of btnsignin same width lblhome nslayoutconstraint.create(btnsignin, nslayoutattribute.width, nslayoutrelation.equal, lblhome, nslayoutattribute.width, 1, 0), // makes height of btnsignin same height lblhome nslayoutconstraint.create(btnsignin, nslayoutattribute.height, nslayoutrelation.equal, lblhome, nslayoutattribute.height, 1, 0), // makes top of btnsignin 60 bottom of lblhome nslayoutconstraint.create(btnsignin, nslayoutattribute.top, nslayoutrelation.equal, lblhome, nslayoutattribute.bottom, 1, 60), // centers btnsignin in view along x-axis nslayoutconstraint.create(btnsignin, nslayoutattribute.centerx, nslayoutrelation.equal, view, nslayoutattribute.centerx, 1, 0) }); } } }
when using autolayout dont want set , frames rather add views set constraints in setupautolayoutconstraints
method.
helpful links on auto layout:
hope helps!
Comments
Post a Comment