Sagit.Framework For IOS automatic layout tutorial: 10, get the width and height coordinates of PX, element movement, refresh layout, adaptive size, chat message background image stretching.

Time:2020-10-23

preface:

This article introduces some common properties or methods of the remaining one in the layout.

1. Get the width and height coordinates of PX

Basic definition

//! get x value (PX) of current UI
-(CGFloat)stX;
//! get the relative screen x value (PX) of the current UI
-(CGFloat)stScreenX;
//! get y value (PX) of current UI
-(CGFloat)stY;
//! get the relative screen y value (PX) of the current UI
-(CGFloat)stScreenY;
//! get the width value (PX) of the current UI
-(CGFloat)stWidth;
//! get the height value (PX) of the current UI
-(CGFloat)stHeight;

The frameworks write code relative to PX. Therefore, when you need to calculate some width and height coordinates, you need to get the PX value,

Therefore, there are several attributes (st prefix is added to distinguish and avoid conflicts with third-party attributes).

2. Element movement: initial coordinate, move, restore position

Basic definition

//! move the current UI to the specified coordinates (and change the width and height as appropriate)
-(UIView*)moveTo:(CGRect)frame;

/ /! The frame set by the current UI for the first time is convenient for future homing.
  - (CGRect)OriginFrame;

/ /! Restore the first set coordinate system and width and height
  -(UIView*)backToOrigin;

These method frameworks are often used when refreshing the layout.

When cgrect is used, the macro definition inside the framework is used. You can continue to use the PX method.

#define STRectMake(x,y,width,height) CGRectMake(x*Xpt,y*Ypt,width*Xpt,height*Ypt)

3. Refresh layout

Basic definition:

//! refresh the layout and height of the current UI and subui
-(UIView*)refleshLayout;
//! refresh the layout of the current UI and sub UI and [width (controllable)] withwidthheight: whether to change the width and height, the default is yes
-(UIView*)refleshLayout:(BOOL)withWidthHeight;
//! refresh [current UI (controllable)] and sub UI layout with WidthHeight: whether to change the width and height, the default is yes ignoreself: ignore itself, the default is No
-(UIView*)refleshLayout:(BOOL)withWidthHeight ignoreSelf:(BOOL)ignoreSelf;

Example:

The overall layout is executed again from top to bottom. The use examples inside the framework are used when processing the uitextfield. Because the mobile phone keyboard pops up, the overall layout is affected, and the layout needs to be refreshed.

In terms of layout, more adaptive size is used.

4. Adaptive size

Basic definition:

//! traverse to detect its sub UI. If the sub UI part exceeds, the width and height will be expanded, but it will not be reduced.
-(UIView*)stSizeToFit;
//! traverse to detect its sub UI. If the sub UI part exceeds, the width and height will be expanded, but it will not be reduced.px参数:扩展后再追加的长度或高度,默认0
-(UIView*)stSizeToFit:(NSInteger)widthPx y:(NSInteger)heightPx;

By default, the framework has a sizetofit attribute, which is prefixed with ST for distinction.

The stsizetofit of the framework will be used more in some scenes with no fixed width and height.

Example code 1:

 

The usage here is more advanced. The UI interface can be detached from a single file and loaded as a child control.

After loading the two child controls, call stsizetofit to adapt the width and height.

Example code 2:

//Age
        [[[view addUIView:@"ageView"] width:70 height:32] onBottom:STPreView y:30];
        [[[[STLastView backgroundColor:@"#4ed2c0"] clipsToBounds:YES] layerCornerRadius:5.0f] block:nil on:^(UIView* age) {
          
            [[[age addImageView:@"sexIcon" img:@"home_icon_boy"] relate:Left v:6] toCenter:Y];
            [[[age addLabel:@"AgeText" text:user.AgeText font:22 color:@"#ffffff"] onRight:STPreView x:6] toCenter:Y];
            [age stSizeToFit:10 y:0];
        }];

For the label, use stsizetifit to empty 10 pixels left and right.

5. Chat message background picture stretch

Basic definition:

//! picture stretching (generally applicable to background stretching or chat picture stretching)
-(UIView*)stretch;
//! picture stretching (generally applicable to background stretching or chat picture stretching) x:是px值
-(UIView*)stretch:(CGFloat)x;
//! picture stretching (generally applicable to background stretching or chat picture stretching) x、y: 都是px值
-(UIView*)stretch:(CGFloat)x y:(CGFloat)y;

Example usage:

//Line break
            [[[[rowView addImageView:nil img:@"answer_type"] x:0 y:0 width:10 height:80] stretch] block:nil on:^(UIImageView* cellView)
            {

                if(rowView.subviews.count>1)
                {
                    UIView *view=STPreView;
                    [cellView onRight:view x:64];
                }
                [[[cellView addLabel:nil text:model.ConfigKey font:36 color:ColorWhite] toCenter:Y] relate:Left v:30];
                [cellView stSizeToFit:30 y:0];
                [cellView onClick:^(id view) {
                    //Pop up window
                    [self show:model.ConfigValue];
                }];
            }];

Let the picture stretch to the same size as the form.

Example usage 2. Chat message icon stretching

//Comment area
            if(topic.comment && topic.comment.count>0)
            {
                [[[[view addImageView:nil img:@"circle_comment"] onBottom:STPreView y:15] relate:LeftRight v:124 v2:30] block:nil on:^(UIImageView* commentView) {
                    [[[commentView  addLine:nil color :ColorClear]  relate:Top v :15]  width:1 height : 2]; // a hidden line to benchmark the following loop
                    for (NSInteger i=0; i stretch:45];
                }];
            }
            [view stSizeToFit:0 y:20];

The icon looks like this:

 

X Y parameter interpretation:

10: Draw a vertical line and pull it to the left and right sides for stretching. (So x can be defined anywhere after a prominent triangle)。

Y: Draw a horizontal line between the upper and lower sides and pull apart for stretching. (For the above figure is not specified, the default is to take the middle point to stretch)。

 

Summary:

Most of the attributes of the layout are explained here. The remaining one or two attributes are not enough.

 

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]