项目需求场景:
现在有一个文字,文字背后有一个黑色半透明的背景视图,要求文字可以横向增长,但增长到一定长度后保持不变,即显示点点。。而且要求文字增长过程中,其后面黑色半透明背景视图也跟随增长变化 , 类似下面:
那么该如何实现:
那么首先肯定是一个label,一个父视图,那么父视图是不是这个黑色透明视图呢,当然不能,如果父视图也是透明的,label,放在父视图里面,label肯定也变成透明了,这和我们需求不符合,因为我们需要另外加一个视图,将其设置为黑色,半透明,那么就是三个视图,label,父视图,背景视图
在来看约束,也是关键:
父视图:因为父视图的宽度要随着子视图文字的变大而变大,所以父视图的宽度肯定不能给死,这是一个关键,其他简单,上面给固定值,水平居中,高度给固定值
背景视图:它的目的是为了有一个黑色半透明背景,它和父视图范围是一样的,所以它和父视图上下左右均对齐即可(当然有很多其他方式)
label视图:文字视图有两个关键
1 它会将父视图给撑大,并且是从两边撑大,那么肯定给label左右两边一个固定值约束,
2 label会随着文字的增多而增大,但是上面的需求是label大到一定程度后,即便文字增多,它也不在增大,而是显示点点。。所以label有一个最大宽度maxWidth,所以要给他设置一个宽度值maxWidth,但是是小于等于这个maxWidth,因为你在xib上只能设置约束的固定值(当然可以在xib上基于屏幕设置,但是这里不好适用),而实际项目中这个最大值,可能是屏幕的宽度减去某个数值才在不同屏幕上合适,所以这个maxWidth的约束一般会拖出来在代码中修改
而label的其它约束就很简单,垂直方向居中,高度固定值,
具体操作如下: