• 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"] 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 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] 1 height:2];//一条隐藏线,为下面循环做基准定位
                        for (NSInteger i=0; i<topic.comment.count; 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:划一条横线住上下两边拉分离做拉伸。(对于上图不指定,默认是取中间点拉伸)。

    总结:

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

  • 相关阅读:
    【Loadrunner】使用LR录制HTTPS协议的三种方法
    【Loadrunner】使用LoadRunner上传及下载文件
    【Loadrunner】平台1.9环境APP成功录制并调试成功后的脚本备份
    JavaScript命令模式
    JavaScript享元模式
    JavaScript适配器模式
    安装MySQL
    idea创建web项目,springboot项目,maven项目
    spring自定义注解
    服务器访问数据库表mysql
  • 原文地址:https://www.cnblogs.com/cyq1162/p/13508039.html
Copyright © 2020-2023  润新知