版本
Xcode 9.1
一、纯代码创建
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 实例化一个UIView
UIView *view = [[UIView alloc] init];
/* ----- 基本设置 ----- */
// 设置尺寸大小及位置 (frame)
view.frame = CGRectMake(50, 50, 200, 200);
// 设置背景颜色
view.backgroundColor = [UIColor redColor];
// 设置透明度
view.alpha = 1; // 透明度0~1
/* ----- layout设置 ----- */
//设置view自带CALayer图层的颜色(给CALayer设置的颜色,都要变成CGColor)
// view.layer.backgroundColor = [UIColor orangeColor].CGColor;
// 设置边框宽度
view.layer.borderWidth = 3;
// 设置边框颜色
view.layer.borderColor = [UIColor blackColor].CGColor;
// 设置圆角半径
view.layer.cornerRadius = 20;
/* 设置图片 */
// // 设置图片与设置阴影只能二选一,如果二者都要,只能再添加一个子layer (见下面代码)
// // 设置Layer渲染的内容
// view.layer.contents = (id)[UIImage imageNamed:@"23.jpg"].CGImage;
// // 切除超出父layer的部分
// view.layer.masksToBounds = YES;
/* 设置阴影 */
// 设置layer的阴影
view.layer.shadowOffset = CGSizeMake(20, 20);
// 设置layer颜色
view.layer.shadowColor = [UIColor lightGrayColor].CGColor;
// 设置layer阴影透明度
view.layer.shadowOpacity = 0.5;
/* ----- 添加一层子layer ----- */
// 实例化子layer
CALayer *subLayer = [[CALayer alloc]init];
// 设置frame
subLayer.frame = view.layer.bounds;
// 设置圆角
subLayer.cornerRadius = 100;
// 设置subLayer的渲染内容
subLayer.contents = (id)[UIImage imageNamed:@"23.jpg"].CGImage;
// 切除超出父layer的部分
subLayer.masksToBounds = YES;
// 添加到view.layer之上
[view.layer addSublayer:subLayer];
// 添加子视图到self.view上
[self.view addSubview:view];
}
@end
![效果图](https://i-blog.csdnimg.cn/blog_migrate/93c24de661619efb058c88642a7022d1.webp?x-image-process=image/format,png)
效果图
二、使用XIB
假如新建了一个Single View App,接着创建一个XIB文件:
![1](https://i-blog.csdnimg.cn/blog_migrate/6df2e9aa5dfaaf466cad5410c4e0e019.webp?x-image-process=image/format,png)
1
![2](https://i-blog.csdnimg.cn/blog_migrate/96d38569a50582dfd976b760ab08d983.webp?x-image-process=image/format,png)
2
![3](https://i-blog.csdnimg.cn/blog_migrate/d7dd7378de2993e26b7982a7f5646020.webp?x-image-process=image/format,png)
3
然后在Xcode右侧编辑栏可以直接编辑view的属性和id,例如设置view的frame、边框、阴影等:
![属性栏](https://i-blog.csdnimg.cn/blog_migrate/40c1f3f715dd4d33ad22959ffb0ebb31.webp?x-image-process=image/format,png)
属性栏
![id栏](https://i-blog.csdnimg.cn/blog_migrate/27dcf05a23d5342b729633d325d2ef73.webp?x-image-process=image/format,png)
id栏
可以在xib里面创建多个view,等下代码调用的时候会用到:
![一个xib里创建了两个view](https://i-blog.csdnimg.cn/blog_migrate/9c3e12616fc07a9535aae62ca5a85cf9.webp?x-image-process=image/format,png)
一个xib里创建了两个view
然后使用代码调用:
// 从xib(名称为View)实例化view
UIView *view1 = [[[NSBundle mainBundle] loadNibNamed:@"View" owner:self options:nil] firstObject];
UIView *view2 = [[[NSBundle mainBundle] loadNibNamed:@"View" owner:self options:nil] objectAtIndex:1];
// 添加view到self.view
[self.view addSubview:view1];
[self.view addSubview:view2];
- loadNibNamed: owner: options: 方法返回来的是一个NSArray数组,因为之前创建了两个view,所以数组里面有两个对象元素。
- 因为使用了Single View App模板,所以controller自带了一个view(self.view),所以我们创建的view要添加上去(addSubview)。
三、使用storyboard
因为使用了Single View App模板,所以工程里默认包含有一个main.storyboard,点击之。
在右侧编辑栏底部搜索UIView,找到UIView并拖入self.view中:
![](https://i-blog.csdnimg.cn/blog_migrate/3fe72b61cbeab760cec833dd4830e67c.webp?x-image-process=image/format,png)
然后就可以向xib中那样设置属性和id了
![设置尺寸](https://i-blog.csdnimg.cn/blog_migrate/893504b296653ed80d1adebc2829527e.webp?x-image-process=image/format,png)
设置尺寸
![设置属性](https://i-blog.csdnimg.cn/blog_migrate/1d2c0d4d3faa81979f43410e60d7f0c1.webp?x-image-process=image/format,png)
设置属性
![设置其他属性](https://i-blog.csdnimg.cn/blog_migrate/a9a4334a20fcf530363d7964ef7436bd.webp?x-image-process=image/format,png)
设置其他属性
我们可以把在storyboard里面创建的view关联到代码中,以便使用代码编辑:
![](https://i-blog.csdnimg.cn/blog_migrate/78b7c2b8b5e2275c6e151c98613ac2f8.webp?x-image-process=image/format,png)
因为是在storyboard的viewController里面创建的view,而程序启动时,窗口显示的view就是我们所编辑的viewController的root view(根视图),所以不用addSubview操作。
用代码编辑关联过去的view:
// 编辑从storyboard创建的myView
self.myView.layer.borderColor = [UIColor yellowColor].CGColor;
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/7cce9f311a0b285f1dfd09ab86e579db.webp?x-image-process=image/format,png)