iOS開發 使用純代碼或xib創建圓角視圖
引言:
在我們日常開發中, 很多中情況下我們需要設置UIView或者UIImageView的圓角以及邊框等,例如個人中心的用戶頭像等等。
例如 簡書:
簡書-我的界面
我們通常的做法是:
- 使用純代碼。
- 在xib下設置屬性。
純代碼創建圓角視圖:
代碼如下:
UIView *view = [[UIView alloc] initWithFrame:(CGRectMake(50, 100, 200, 200))];
view.backgroundColor = [UIColor brownColor];
// 設置圓角的角度(當view的寬和高相等, 且 圓角角度為寬的一半時 為圓形)
view.layer.cornerRadius = 20;
// 設置允許裁剪
view.layer.masksToBounds = YES;
// 設置邊框
view.layer.borderWidth = 5;
// 設置邊框顏色
view.layer.borderColor = [[UIColor redColor] CGColor];
[self.view addSubview:view];
創建imageView 和 view 的方式是一樣的, 在這里只演示view的創建。
xib下創建圓角視圖:
正常情況下, 我們在xib中使用 keyPath 來設置圓角。如圖:
這里雖然設置了, 但是我們并不能立即在xib中看到設置后圓角效果的, 只有在程序運行后才會看到效果。 所以我們要使用 IB_DESIGNABLE 和 IBInspectable 來實現實時查看圓角效果。
IB_DESIGNABLE:
這是一個宏定義, 功能就是讓XCode動態渲染出該類圖形化界面。
使用方法: 在自定義的view的.h文件中 添加該 宏定義。
IBInspectable:
IBInspectable 宏定義的功能是可以可視化顯示自定義view中相關的屬性。
如何實現實時查看圓角效果:
1.自定義view , CornerView.h:
#import <UIKit/UIKit.h>
IB_DESIGNABLE // 動態刷新
@interface CornerView : UIView
// 注意: 加上IBInspectable就可以可視化顯示相關的屬性
/** 可視化設置邊框寬度 */
@property (nonatomic, assign)IBInspectable CGFloat borderWidth;
/** 可視化設置邊框顏色 */
@property (nonatomic, strong)IBInspectable UIColor *borderColor;
/** 可視化設置圓角 */
@property (nonatomic, assign)IBInspectable CGFloat cornerRadius;
@end
CornerView.m:
@implementation CornerView.m
#pragma mark - 設置邊框寬度
- (void)setBorderWidth:(CGFloat)borderWidth {
if (borderWidth < 0) return;
self.layer.borderWidth = borderWidth;
}
#pragma mark - 設置邊框顏色
- (void)setBorderColor:(UIColor *)borderColor {
self.layer.borderColor = borderColor.CGColor;
}
#pragma mark - 設置圓角
- (void)setCornerRadius:(CGFloat)cornerRadius {
self.layer.cornerRadius = cornerRadius;
self.layer.masksToBounds = cornerRadius > 0;
}
2.在xib中拖一個view, 將view設定為 自定義view: CornerView 如圖:
注意: Designable 如果沒有這行字，說明沒有正確添加添加IB_DESIGNABLE，如果它的狀態顯示up to date,說明設置成功, 如果是updating，說明視圖在更新，案如果是build failed的話，請檢查布局代碼，可能有哪里出錯了。
3.如圖, 我們就可以看到自定義view中設置的屬性了:
4.設置好 屬性后 , 右邊的view就會立即 更新了!
該方法同樣適用于UIIamgeView ! ! ! !
效果圖:
本篇文章對應的源代碼下載地址:CornerViewDemo
該 demo 中封裝了 自定義view 和 自定義imageView , 可以將CornerTool文件夾拖入到項目中直接使用, xib下 view 繼承 CornerView類, imageView 繼承 CornerImageView即可設置屬性。
來自：https://github.com/LiCheng244/CornerViewDemo