IOS Auto Layout-uistackpanel and Uigridpanel

I used to do Windows Phone development, and then I turned to iOS, so many of the development experience on Windows Phone was taken to iOS. In fact, some experience itself is not related to the platform, and the platform is nothing more than the implementation method. Well, don't say much nonsense.

I'm going to introduce you to an iOS auto-China UIPanel (Uistackpanel Uigridpanel), a classmate of Windows Phone development who saw these three classes must look familiar, yes, these three classes are Windows The core of the phone layout is just a little bit different.

Let me first introduce the background of my development of this class library and help you understand why I am doing this.

The interface for developing programs on iOS is currently available in three ways, the first pure Code development, the second using Xib development, and the third using storyboard development. Not to say which way good, three ways each have advantages and disadvantages, my own development is inclined to pure code development, because I am learning iOS when the use of Xib do, it is possible that I am not very skilled in xib, xib with the Windows Phone interface development of two comparisons, I'm not really interested in continuing to use Xib to open, storyboard is a technology that came out later, so I was almost always using a purely code-based approach to developing iOS interfaces.

Pure code is developed at fixed resolutions or is a good choice, but it is a bit of a struggle to meet a rotating interface or to fit the ipad. For this problem, the Apple has not introduced AutoLayout this technology before the basic way. But Apple from IOS6.0 began to introduce the AutoLayout technology, since the introduction of the technology to use the Xib to develop the interface becomes relatively convenient, if you still use pure code to do AutoLayout is extremely painful, of course, familiar with the later is very useful ( But looking at a bunch of constraint information looks depressed.

Recently when considering this question brainwave, suddenly thought can refer to the Windows Phone above layout way, since IOS6.0 already joined the AutoLayout technology, then I can use AutoLayout technology to develop a similar windows The Stackpanle and GridView controls in the phone, think about it. It took me a few days to study it. This is the three classes I mentioned earlier (UIPanel Uistackpanel uigridpanel).

Let me first introduce the use of these three classes

• Uipanel,uipanel is the base class for all other derived panel. The size of the subview that is added to it is the same as the size of UIPanel.
• Uistackpanel,uistackpanel inheritance Uipanel,uistackpanel has an attribute ishorizontal, that is, whether the arrangement of subviews is arranged horizontally, the default is vertical top-down arrangement, Subview added to Uistackpanel if it is a vertical sort, the width of the subview is the same as the width of the uistackpanel, and the height is controlled by the extended property size of UIView. Conversely, if it is arranged horizontally, then the height of the subview is the same as the height of the Uistackpanel, and the width is controlled by the UIView extended attribute size.
• Uigridpanel,uigridpanel inherits the Uipanel,uigridpanel similar table, with rows and colums two properties, you can specify the extended properties of the Subview row and Colum to achieve a detailed arrangement, You can even span multiple-column or multi-line layouts through Subview's rowspan and Columspan two extended properties.

Let's compare two vertical and horizontal screens

Above is vertical screen.

It's a horizontal screen.

In addition to the black is the uilable and a Clicke me button, each color represents a uipanel,panel inside the nested other panel is composed of the layout interface. When you click the button, you can see how the layout will change as the property changes.

Here I introduce the usage of each panel in the form of code.

• The first is Gridpanel.

 gridpanel=[[uigridpanel alloc] init];    Gridpanel.rows  =3  ;    Gridpanel.colums  =3  ;    Gridpanel.isbindsizetosuperview  =yes; Gridpanel.margin  =uiedgeinsetsmake (20 , 0 , 0 , 0     );    Gridpanel.backgroundcolor  =[uicolor Graycolor];    [Self.view Addsubview:gridpanel]; Currentpanle  =gridpanel; 

The rows and Colums properties specify that the Gridpanel has three rows and three columns. The Isbindsizetosuperview property specifies whether the panel's aspect is bound to the high width of the parent view. If bound, the aspect of the child view is changed as long as the aspect of the parent view changes. The margin property specifies the distance between the top and bottom four directions of the view, which specifies that the gridpanel is always 20 pixels from the front. Now that the Gridpanel has been initialized, the following is the addition of the individual sub-views. Since it's gridpanel, I might want the child views to be diagonally arranged. Which means we need three sub-views. The code is as follows:

UILabel *label =[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label1"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); Label.row=0;//First linelabel.colum=0;//first column[Currentpanle Addsubview:label]; Label=[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label2"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); Label.row=1;//Second Linelabel.colum=1;//second column[Currentpanle Addsubview:label]; Label=[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label3"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); Label.row=2;//Third linelabel.colum=2;//third column[Currentpanle Addsubview:label];

The effect is as follows:

If I want to change the lable2 to span two columns, and the bottom spacing is 5, then the code is as follows:

Label =[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label2"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); Label.row=1;//Second Linelabel.colum=1;//second columnlabel.columspan=2;//across two columnsLabel.margin=uiedgeinsetsmake (0,0,5,0); [Currentpanle Addsubview:label];

The effect is as follows:

The following describes the usage of StackPanel

First look at the initialized code:

UILabel *label =[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label1"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -);            [Currentpanle Addsubview:label]; Label=[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label2"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); Label.margin=uiedgeinsetsmake (5,0,5,0);            [Currentpanle Addsubview:label]; Label=[[UILabel alloc] init]; Label.backgroundcolor=[Uicolor Blackcolor]; Label.textcolor=[Uicolor Whitecolor]; Label.font=[uifont systemfontofsize: A]; Label.text=@"Label3"; Label.textalignment=Nstextalignmentcenter; Label.size=cgsizemake ( -, -); [Currentpanle Addsubview:label];

This is arranged vertically, and if it is arranged horizontally, simply set the IsHorizontal property of the StackPanel to Yes.

The above layout can be laid out in both horizontal and vertical screens. and self-adapting.

and to achieve the first picture of the complex layout, directly to see my demo on it.

Click I download demo

IOS Auto Layout-uistackpanel and Uigridpanel