4个按钮等宽等高布局 ios

2019-04-22 09:26:18 u013222122 阅读数 750

 

三等分思路:

1,先设置好第一个左上约束,和第一个高度。

2,设置中间第二个左约束,等高,中心对齐

3,设置第三个右约束,等高,中心对其

4,全选3个,等宽。即可。

 

四等分同理

 

2019-08-27 14:29:02 ForeverMyheart 阅读数 163

masonry 目前提供了相应的接口,直接使用即可,这里记录或许可以提醒某些不知道的人罢了!

一、先解释相关API

/**
 *  distribute with fixed spacing
 *
 *  @param axisType     横排还是竖排
 *  @param fixedSpacing 两个控件间隔
 *  @param leadSpacing  第一个控件与边缘的间隔
 *  @param tailSpacing  最后一个控件与边缘的间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
/**
 *  distribute with fixed item size
 *
 *  @param axisType        横排还是竖排
 *  @param fixedItemLength 控件的宽或高
 *  @param leadSpacing     第一个控件与边缘的间隔
 *  @param tailSpacing     最后一个控件与边缘的间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

两个API,分为固定间隔不固定宽高,固定宽高不固定间隔,根据具体需求使用相应的即可。

需要注意的是: 横排的时候要相应设置控件数组的垂直约束,竖排的时候要相应设置控件数字的水平约束。

二、具体实践测试

首先做准备工作,先生成四个View(需要被排列的),代码如下:

- (NSMutableArray *)masonryViewArray {
    if (!_masonryViewArray) {
        
        _masonryViewArray = [NSMutableArray array];
        for (int i = 0; i < 4; i ++) {
            
            UIView *view = [[UIView alloc] init];
            view.backgroundColor = [UIColor redColor];
            [self.view addSubview:view];
            [_masonryViewArray addObject:view];
        }
    }
    
    return _masonryViewArray;
}

1、水平方向排列、固定控件间隔、控件长度不定

测试代码如下

- (void)test_masonry_horizontal_fixSpace {
    // 实现masonry水平固定间隔方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:30 leadSpacing:10 tailSpacing:10];
    
    // 设置array的垂直方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
    
        make.top.equalTo(150);
        make.height.equalTo(80);
    }];
}

测试结果如下:

1.png

2、水平方向排列、固定控件长度、控件间隔不定

代码如下:

- (void)test_masonry_horizontal_fixItemWidth {
    
    // 实现masonry水平固定控件宽度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:80 leadSpacing:10 tailSpacing:10];
    
    // 设置array的垂直方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(150);
        make.height.equalTo(80);
    }];
}

测试结果如下:

1.png

3、垂直方向排列、固定控件间隔、控件高度不定

代码如下:

- (void)test_masonry_vertical_fixSpace {
    
    // 实现masonry垂直固定控件高度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:30 leadSpacing:10 tailSpacing:10];
    
    // 设置array的水平方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.left.equalTo(150);
        make.width.equalTo(80);
    }];
}

结果如下:

1.png

4、垂直方向排列、固定控件高度、控件间隔不定

- (void)test_masonry_vertical_fixItemWidth {
    
    // 实现masonry垂直方向固定控件高度方法
    [self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:80 leadSpacing:10 tailSpacing:10];
    
    // 设置array的水平方向的约束
    [self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.left.equalTo(150);
        make.width.equalTo(80);
    }];
}

结果如下:

1.png

 

2015-09-30 14:34:44 u013705509 阅读数 353

前面讲到了一些关于边界约束的知识,但那些基础知识来解决一些实际问题还是会有点力不从心的;所以我们需要更高级的设置约束的办法,设置等高等宽等中心:

见下图:



图中有3个button按钮, 现在要求3个button等宽,等高 , 且 垂直中心在一条线上,这该如何设置?

按照前面的说法,约束其实是一次方程组的求解,那么 通过观察可以得之,如果我们设置好了button之间的左右边界约束,然后再让3个button等宽就可以;

那么就会有  3x  = 宽度; 所以 每一个Button的宽度就可以计算出来了给button1添加  top约束

具体做法:

首先设置好 Button之间的边界约束(先不要update Frames),假设都为20, 


等宽 设法:

选中button2 ,按住 control  鼠标拖拽一条线到 button1上会出现如下 选项:



选择Equal Widths等宽, Equal Heights等高,  center Y垂直中心 相等  (可能会 略有 偏差, centerY 的值是可以调节的! 默认的  center Y就是决定你当前的在的位置 )

 button 3 的操作类似, 那么可以 想向  button1,2,3都会在 同一水平线上了,宽度高度也都相等了!

效果如下:



大家可以看到,出现了宽度高度都相等的 按钮,但是  button 3为什么 不和其他两个 button 在一条水平线上呢?

这是因为  center Y默认 值会根据你的实际位置 进行调整,所以如果你需要 水平齐,需要  修改  centerY 的值为0即可!

修改  center Y的值即可

可以看出,这个设置的关键点是  :从一个  视图 按住 control 拖拽到另一个 视图(包括父视图)来产生 ,宽高,中心,边界的关系!

我们需要根据实际情况进行调整  其值!

即使是刚才设置的  约束 是  等宽的也是可以 随意调节 每一个  按钮的宽度的  ,如下图


可以改变其值,原理  类似 于    从   3x  = K  ,变为了  1x +1.5x +2x  =K是一样的道理,那么每一个视图的宽度就算出来了!

总结一下:

我们通过  按住 选中一个  视图后  ,按住  control 拖拽到另外一个视图上 ,那么就可以设置两个 视图的关系!

补充:

center  X可以设置,两个  视图(包括子视图和父视图)之间的 水平中心在一条线上:

如下图是  center X相等的  一些视图,大家可以看到 一条很长的线的提示!

从Button4 拖拽到  他的父视图 view上可以见到如下的选项,也可以拖拽到 左边的 视图列表(选项更多!)


拖拽松手看到如下选项:



我们选择  Center  Horizontally ...就可以设置  button4的中心与 父视图(或其他视图)的水平中心是在一条线上了!

Center  Vert...就是   Center  Y,垂直中心相等

ps:如果你需要 左右移动,或者  上线移动,只需改变  Center X或  Center Y的值即可!



把 所有的 center X和 center Y改为 0即可看到如下效果:

2016-03-23 13:31:59 forzhouwei 阅读数 9512

      使用Xib可以实现控件的屏幕适配,但是并不是十全十美。因为我们使用Xib添加约束的时候,比如说距离左边多少距离,这是设置的一个确定的阿拉伯数字,是绝对的,并不是设置的一个比例,在不同的机型上面,设备的尺寸宽高不一定,Xib以绝对的阿拉伯数字添加约束并不能做到完美的屏幕适配,但是!!!大体还是可以的。

     功能按钮介绍:

  

     这四个按钮对你的添加约束至关重要。

      第一个图标: 这是xcode7在iOS9中新加入的功能——stack view,相当于一个容器view用来统一管理他所有subView的约束,其实普通的UIView也可以作为容器view来管理其subView的约束,我们之前做复杂UI显示逻辑的时候往往也会放一个背景的容器view,stack view就是起到这个作用,意义不是很大,它做的事情UIView也可以做,但 他的优势在于:可以通过设置属性的方式让系统自动添加对其subView的约束,而且该view是不渲染在页面上的,对它设置背景色等属性是无效的。

     

      第二个图标:这是一个关于控件对齐的选项,我们可以在里面添加对齐约束条件。如下图:


   
虽然是老版本图,但是是一样的。
从上到下依次是左对齐、右对齐、上对齐、下对齐、水平对齐、竖直对齐,这些现在都是灰色的不能选择,只有同时选中多个控件,他们才是可用的,或者先选择一个控件,然后按住control拖动到另一个控件上,就会弹出一个控件对齐的窗口,可以在里面设置两个控件的对齐关系。

下图就是先选择一个控件,然后按住control拖动到另一个控件上,就会弹出一个控件对齐的窗口,可以在里面设置两个控件的对齐关系的方法:



下面的Equal Withs 和Equal Hights就是指让两个视图等高或者等宽。

第三个图标:更多用来添加单个控件的约束。

Add New Constrains 设置单个控件的约束能设置很多约束,详解见图


在约束上、下、左、右的时候,右边有个下箭头,你点击可以选择(比如说你点击左边的下箭头)就会让你选择左边是距离父视图多远,还是距离左边子视图多远(假设在你设置的这个视图的左边还有一个与你设置的视图平级的视图)。

值得一提的是,在最新的Xcode中,本栏目多出这么一个选项:
      它是在宽高的栏目里,意思是一个宽高的比例,根据比例来确定或者叫约束你的控件的宽高大小。比如说你拖了控件过后,约束这个控件距离上下多远,然后勾选这个选项。那么这个控件在下个模拟器中确定大小的原理是,同样的距离上下多远,那么它的高就确定下来,宽是多少呢?就是你最初在Xib文件中约束的时候,那个时候有一个当时的宽高之比,我在当前的模拟器中就根据这个比例来确定宽。

第四个图标:更新约束、更新尺寸、去掉约束、添加需要的约束等功能


红色勾选的就是去掉约束的方法,不同的是,上面的是你选中某一个控件的时候,删除单个空间的所有约束。下面的是删除整个Xib文件中所有控件的所有约束。其实还有一个比较简略的添加全局约束的方法,就是你在Xib文件中将控件拖好后,在下面的一栏(因为下面的一栏是添加全局的)选择Add Missing Constraints 选项,系统自动就将全局的约束给你添加好了。不过,这个约束比较粗略,最好还是自己动手,丰衣足食吧。

#pramg  mark - 
在二和三两个图标按钮里面,会有这么一个选项:





        默认是None在约束后不会有位置发生变化,但会出现一个黄色的框框,就是你新约束的frame,并且这个时候会有个黄色警告箭头表示当前view的frame不匹配,需要更新frame。

        点击黄色尖头后会告诉你警告的原因.




    黄色的警报就是给你说你的约束和以前不一样了,这时候你就选中那个控件,点击第4个图标,然后选择更新尺寸就可以了。(Update  Frame)

     还有个红色的警报就比较严重,表示当前有错误约束:1.约束冲突,需要删除冲突的部分条件。2.约束条件不完善,需要添加完善约束(就是让编译器明确view的frame),需要仔细体会,怎么样加约束才能让控件的大小和位置在屏幕中固定下来,多加或者少了都不好。

    查看你的约束:约束添加好了过后,必要的时候可以去查看或者修改他们。如图:

    
   这就是你添加好了控件的约束情况,你还可以点击Edit去再次修改它。

   修改约束的优先级:约束添加好了过后,必要的时候可以去修改他们的优先级。如图:


其中的Priority就是本约束的优先级,默认为1000,你可以自己改,程序会优先执行优先级高的约束。

   其他的话,多练习就会了。用Xib实现表格视图单元格的高度动态返回,就只需要一句话就够了,好强大。

_TestTableView.estimatedRowHeight = 200;

 写上上面这句话,然后将表格视图的heightforrowatindexpath协议方法屏蔽掉就可以了,自己去试试吧!

2016-06-01 09:38:49 mscinsidious 阅读数 1204

      在storyboard/xib中添加约束实现如下效果:



    绿色视图为间距等宽,橙色为视图等宽。

    1.视图等宽


    添加左边距与右边距为30,视图之间宽度20,视图高度固定为75,垂直中心位于0.6倍屏幕高度处。最后将三个视图等宽设置即可。


    2.间距等宽

    需要添加4个辅助间距视图,在实际项目中可将其hidden设置为Yes

    将视图与辅助间距视图的垂直中心位于0.35倍屏幕高度处,将四个辅助视图高度固定(此图为50),将视图的宽高固定(此图为75),将相邻视图的间距均设为0。最后将四个辅助视图等宽设置即可。

iOS Xib 自动布局

阅读数 464

iOS 自动布局教程

阅读数 1669