iOS开发之UI篇(1)—— UIView

版本

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
效果图

二、使用XIB

假如新建了一个Single View App,接着创建一个XIB文件:

1.jpg
2.png
3.jpg

然后在Xcode右侧编辑栏可以直接编辑view的属性和id,例如设置view的frame、边框、阴影等:

属性栏.jpg
id栏.jpg

可以在xib里面创建多个view,等下代码调用的时候会用到:

一个xib里创建了两个view.jpg

然后使用代码调用:

    // 从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中:

然后就可以向xib中那样设置属性和id了

设置尺寸.jpg
设置属性.jpg
设置其他属性.jpg

我们可以把在storyboard里面创建的view关联到代码中,以便使用代码编辑:

因为是在storyboard的viewController里面创建的view,而程序启动时,窗口显示的view就是我们所编辑的viewController的root view(根视图),所以不用addSubview操作。

用代码编辑关联过去的view:

    // 编辑从storyboard创建的myView
    self.myView.layer.borderColor = [UIColor yellowColor].CGColor;

效果图:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,273评论 30 472
  • iOS 实战开发课程笔记 本贴旨在作为对极客班 《iOS 开发实战》第五期期课程视频重新学习的笔记。目标是建立一个...
    黄穆斌阅读 3,136评论 12 57
  • 7、不使用IB是,下面这样做有什么问题? 6、请说说Layer和View的关系,以及你是如何使用它们的。 1.首先...
    AlanGe阅读 751评论 0 1
  • 有人说,即将步入婚姻的人不要看这部电影,情侣更是要慎点。看过的人都说它很残酷,故事进行的下一秒,你永远都不知道谁的...
    菜菜的光影世界阅读 4,222评论 2 6
  • 人物:麻麻、滴滴…还有立哥彬娴闵瑞还有辉哥 地点:拥有现代房子样式的村庄_家乡 时间:古代视角…… 某某年间,在某...
    拾叶姑娘阅读 134评论 0 0