解決xib、storyboard用自動布局(Auto Layout)使用UIBezierPath時出現(xiàn)位置錯誤的問題

Auto Layout使布局變得簡單、方便、從iOS12開始變得更加高效,目前來看Auto Layout已經(jīng)非常的完善了,簡書一搜,一大堆的教程,各種花式的教程,我就不在這里貼出了,主要是解決一些關(guān)于Auto Layoutbug。
今天說的是在使用Auto Layout布局完成以后,因為原型圖圖內(nèi)有個虛線的邊框,所以直接將view拖拽為屬性,使用UIBezierPath進(jìn)行代碼編寫,虛線很簡單,代碼如下:

/// 增加虛線
/// @param pDottedLine addview  原文虛線方法轉(zhuǎn)自:http://www.itdecent.cn/p/12b439443b3b
/// @param pStrokeColor 虛線的顏色
/// @param pFillColor 填充的顏色
/// @param pCornerRadius 設(shè)置圓角
- (void)addDottedLine:(UIView *)pDottedLine withStrokeColor:(CGColorRef)pStrokeColor withFillColor:(CGColorRef)pFillColor withCornerRadius:(CGFloat)pCornerRadius{
    CAShapeLayer *border = [CAShapeLayer layer];
      
       //虛線的顏色
       border.strokeColor = pStrokeColor;
       //填充的顏色
       border.fillColor = pFillColor;
       //要是設(shè)置圓角則 cornerRadius: x
       UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:pDottedLine.bounds cornerRadius:pCornerRadius];
       
       //設(shè)置路徑
       border.path = path.CGPath;
       
       border.frame = pDottedLine.bounds;
       //虛線的寬度
       border.lineWidth = 1.f;
      
       //設(shè)置線條的樣式
       //    border.lineCap = @"square";
       //虛線的間隔
       border.lineDashPattern = @[@4, @2];
       
       //self.lineButton.layer.cornerRadius = 5.f;
       //self.lineButton.layer.masksToBounds = YES;
       
       [pDottedLine.layer addSublayer:border];

}

但是在使用的時候發(fā)現(xiàn)設(shè)置的虛線運(yùn)行的時候竟然僅僅是xibframe的大小,而Auto Layout并沒有出現(xiàn)效果,在不同的設(shè)備上切換,發(fā)現(xiàn)了這一個bug,除非將此方法放到viewDidAppear:方法內(nèi),但是放到viewDidAppear:根據(jù)控制器的生命周期來看,會出現(xiàn)閃爍,原因也是很簡單,因為在viewDidAppear:UI已經(jīng)完成,再要使用UIBezierPath肯定會出現(xiàn)閃爍,后來想Auto Layout應(yīng)該是有一個立即更新UI的方法,后來看UIView的頭文件,發(fā)現(xiàn)了setNeedsLayout、layoutIfNeeded這2個方法,api中如下:

// Allows you to perform layout before the drawing cycle happens. -layoutIfNeeded forces layout early
- (void)setNeedsLayout;
- (void)layoutIfNeeded;

又在 stackoverflow 中找到了更加詳細(xì)的說明,故在使用Auto Layout布局時,要有后期使用代碼修改UI的時候,要先調(diào)用layoutIfNeeded方法。在進(jìn)行修改UI則運(yùn)行以后就會遵守Auto Layout了,不會出現(xiàn)在不同設(shè)備上出現(xiàn)偏移的問題,當(dāng)然在切圓角時也發(fā)現(xiàn)了同樣的問題,提前調(diào)用layoutIfNeeded在進(jìn)行切圓角,即[self.xxx layoutIfNeeded];即可。

本文引用如下文章:

stackoverflow - How is layoutIfNeeded used?

setNeedsLayout和layoutIfNeeded看我就懂!

bug效果圖如下:

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

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

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