Sagit.Framework For IOS 自动布局教程：10、获取px的宽高坐标、元素移动、刷新布局、自适应大小、聊天消息背景图片拉伸。

前言：

本篇介绍一下布局中剩下一的一些常用属性或方法。

1、获取px的宽高坐标

基本定义

//!获取当前UI的X值（px)
-(CGFloat)stX;
//!获取当前UI的相对屏幕X值（px)
-(CGFloat)stScreenX;
//!获取当前UI的Y值（px)
-(CGFloat)stY;
//!获取当前UI的相对屏幕Y值（px)
-(CGFloat)stScreenY;
//!获取当前UI的width值（px)
-(CGFloat)stWidth;
//!获取当前UI的height值（px)
-(CGFloat)stHeight;

框架都是相对px写代码的，因此，在需要计算一些宽高坐标的时候，需要获取到px值，

因此，有了几个属性（为了区分避免和第三方属性冲突，加了st前缀）。

2、元素移动：初始坐标、移动、还原位置

基本定义

//!将当前的UI移动到指定的坐标（及视情况改变宽高）
-(UIView*)moveTo:(CGRect)frame;

　　//!当前UI第一次设置的frame，方便以后归位。
　　- (CGRect)OriginFrame;

　　//!还原第一次设置的坐标系及宽高
　　-(UIView*)backToOrigin;

这几个方法框架在刷新布局的时候，会经常用到。

用到CGRect的时候，使用框架内部的宏定义，可以继续用px的方法使用。

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

3、刷新布局

基本定义：

//!刷新当前UI及子UI的布局以及宽高
-(UIView*)refleshLayout;
//!刷新当前UI及子UI的布局以及[宽高(可控制)] withWidthHeight : 是否改变宽与高，默认是YES
-(UIView*)refleshLayout:(BOOL)withWidthHeight;
//!刷新[当前UI(可控制)]及子UI的布局 withWidthHeight:是否改变宽与高，默认是YES ignoreSelf:忽略自身，默认是NO
-(UIView*)refleshLayout:(BOOL)withWidthHeight ignoreSelf:(BOOL)ignoreSelf;

示例：

整体自上而下的重新执行一遍布局，框架内部的使用示例在处理UITextField的时候用到了，因为手机键盘弹出，影响了整体布局，需要刷新重新布局。

在布局上，使用更多的是自适应大小。

4、自适应大小

基本定义：

//!遍历检测其子UI，如果子UI部分超过，则扩展宽与高，但不会缩小。
-(UIView*)stSizeToFit;
//!遍历检测其子UI，如果子UI部分超过，则扩展宽与高，但不会缩小。px参数：扩展后再追加的长度或高度，默认0
-(UIView*)stSizeToFit:(NSInteger)widthPx y:(NSInteger)heightPx;

框架默认有个sizeToFit属性，为了区分，加了st前缀。

框架的stSizeToFit，在一些不固定宽高的场景会用的比较多。

示例代码1：

 

 这里的用法比较高级，可以把UI界面抽离单独一个文件当成子控件加载。

表头，加载完两个子控件后，调用 stSizeToFit 自适应宽高。

示例代码2：

        //年龄
        [[[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];
        }];

对于Label ，用stSizeTiFit 让左右空出共10个像素。

5、聊天消息背景图片拉伸

基本定义：

//!图片拉伸（一般适用于背景拉伸或聊天图片的拉伸）
-(UIView*)stretch;
//!图片拉伸（一般适用于背景拉伸或聊天图片的拉伸） x：是px值
-(UIView*)stretch:(CGFloat)x;
//!图片拉伸（一般适用于背景拉伸或聊天图片的拉伸） x、y: 都是px值
-(UIView*)stretch:(CGFloat)x y:(CGFloat)y;

示例用法：

            //换行
            [[[[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) {
                    //弹窗
                    [self show:model.ConfigValue];
                }];
            }];

让图片拉伸到和窗体一样大小。

示例用法2、聊天消息图标拉伸

 //评论区
            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];//一条隐藏线，为下面循环做基准定位
                    for (NSInteger i=0; i) {
                        TopicComment*comment=topic.comment[i];
                        if(!comment.NickName || !comment.CommentContent){continue;}
                        NSString*text=[[comment.NickName append:@" : "] append:comment.CommentContent];
                        [[commentView addLabel:nil text:text font:24 color:@"#555555" row:0] block:nil on:^(UILabel* label)
                        {
                            [label onClick:^(id view) {
                                [self showCommentView:topic reply:comment.NickName indexPath:indexPath];
                            }];
                            [[[[label longPressCopy:YES] relate:LeftRight v:10 v2:16] onBottom:STPreView y:10]  sizeToFit];
                            [[[label addLabel:nil text:comment.NickName font:24 color:@"#576b95"] x:0 y:0] onClick:^(id view) {
                                [self showUser:comment.UserID];//点击评论的昵称
                            }];
                        }];
                    }
                    [[commentView stSizeToFit:0 y:18] stretch:45];
                }];
            }
            [view stSizeToFit:0 y:20];

图标是这样的：

 

 X Y 参数 解释 ：

X：划一条竖线往左右两边拉分离做拉伸。（所以X可以定义在突出的三角后边的任意位置都行）。

Y：划一条横线住上下两边拉分离做拉伸。（对于上图不指定，默认是取中间点拉伸）。

 

总结：

布局的大部分属性就讲解到这里了，剩余的一两个属性，不足为患。