自動(dòng)布局技巧篇-文字橫向擴(kuò)展父視圖跟隨橫向擴(kuò)展

項(xiàng)目需求場(chǎng)景:

現(xiàn)在有一個(gè)文字,文字背后有一個(gè)黑色半透明的背景視圖,要求文字可以橫向增長(zhǎng),但增長(zhǎng)到一定長(zhǎng)度后保持不變,即顯示點(diǎn)點(diǎn)。。而且要求文字增長(zhǎng)過(guò)程中,其后面黑色半透明背景視圖也跟隨增長(zhǎng)變化?, 類(lèi)似下面:


那么該如何實(shí)現(xiàn):

那么首先肯定是一個(gè)label,一個(gè)父視圖,那么父視圖是不是這個(gè)黑色透明視圖呢,當(dāng)然不能,如果父視圖也是透明的,label,放在父視圖里面,label肯定也變成透明了,這和我們需求不符合,因?yàn)槲覀冃枰硗饧右粋€(gè)視圖,將其設(shè)置為黑色,半透明,那么就是三個(gè)視圖,label,父視圖,背景視圖

在來(lái)看約束,也是關(guān)鍵:

父視圖:因?yàn)楦敢晥D的寬度要隨著子視圖文字的變大而變大,所以父視圖的寬度肯定不能給死,這是一個(gè)關(guān)鍵,其他簡(jiǎn)單,上面給固定值,水平居中,高度給固定值

背景視圖:它的目的是為了有一個(gè)黑色半透明背景,它和父視圖范圍是一樣的,所以它和父視圖上下左右均對(duì)齊即可(當(dāng)然有很多其他方式)

label視圖:文字視圖有兩個(gè)關(guān)鍵

1 它會(huì)將父視圖給撐大,并且是從兩邊撐大,那么肯定給label左右兩邊一個(gè)固定值約束,

2 label會(huì)隨著文字的增多而增大,但是上面的需求是label大到一定程度后,即便文字增多,它也不在增大,而是顯示點(diǎn)點(diǎn)。。所以label有一個(gè)最大寬度maxWidth,所以要給他設(shè)置一個(gè)寬度值maxWidth,但是是小于等于這個(gè)maxWidth,因?yàn)槟阍趚ib上只能設(shè)置約束的固定值(當(dāng)然可以在xib上基于屏幕設(shè)置,但是這里不好適用),而實(shí)際項(xiàng)目中這個(gè)最大值,可能是屏幕的寬度減去某個(gè)數(shù)值才在不同屏幕上合適,所以這個(gè)maxWidth的約束一般會(huì)拖出來(lái)在代碼中修改

而label的其它約束就很簡(jiǎn)單,垂直方向居中,高度固定值,

具體操作如下:


demo地址https://github.com/aszkj/KJAutoLayoutSillDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容