Sagit.Framework For IOS automatic layout tutorial: 2. Main interface: relative parent form uiview layout.

Time:2020-10-30

preface:

The interface of IOS is divided into status bar, navigation bar, main interface and bottom status bar.

This article describes the relative layout of the main interface, the operation of the other three, in other articles independently.

1. Basic syntax of relative layout:

Basic method definition:

//! the layout xylocation of the parent view relative to the current UI determines the relative position
-(UIView*)relate:(XYLocation)location v:(CGFloat)value;
-(UIView*)relate:(XYLocation)location v:(CGFloat)value v2:(CGFloat)value2;
-(UIView*)relate:(XYLocation)location v:(CGFloat)value v2:(CGFloat)value2 v3:(CGFloat)value3;
-(UIView*)relate:(XYLocation)location v:(CGFloat)value v2:(CGFloat)value2 v3:(CGFloat)value3 v4:(CGFloat)value4;

Enumeration definition of xylocation:

//! relative position in layout (values are based on: Left:1 Top 2 Ritht:3 Bottom : 4 the relative position can be detected according to the value)
typedef NS_ENUM(NSUInteger,XYLocation)  {
    Left = 1,
    LeftTop = 12,
    LeftTopRight = 123,
    LeftTopBottom = 124,
    LeftRight = 13,
    LeftBottom = 14,
    LeftBottomRight = 143,
    
    Top = 2,
    TopRight = 23,
    TopBottom = 24,
    TopRightBottom = 234,
    
    Right = 3,
    RightBottom = 34,
    
    Bottom = 4,
    //Relative quadrilateral
    LeftTopRightBottom = 1234
};

2. Layout example:

The starting method of layout:

If in xxxuiview: start with self
If in xxxcontroller: start with lowercase SAGIT (macro defined as self.view )

Example:

 

Add layout of Logo Icon:

Writing method 1: fix three positions relative to the upper left and right.

[[[sagit addImageView:@"logo" img:@"logo"] width:170 height:170] relate:LeftTopRight v:290 v2:200 v3:290];

Writing method 2: relative to the top position, and then in the middle.

[[[[sagit addImageView:@"logo" img:@"logo"] width:170 height:170] relate:Top v:200] toCenter:X];

 

3. Define to set XY coordinate when adding control (i.e. relative layout relative to lefttop by default)

For example: add logo image and define width, height and initial coordinates (relative to parent UI)

[[sagit addImageView:nil img:@"logo"] width:170 height:170 x:290 y:200];

Consistent with the following code functions:

 [[[sagit addImageView:nil img:@"logo"] width:170 height:170] relate:LeftTop v:290 v2:200];

 

Summary:

The layout of SAGIT is relatively simple, just look at the marked diagram and write code.

Relative layout refers to the usage of relative layout relative to the parent UI and the next article introduces the relative layout of the same level UI.