iOS 编程：视图与手势

UIView

1. UIView视图的基本使用

在根视图里添加两个子视图；

CGRect rect1 = CGRectMake(30, 50, 200, 200);
UIView *view1 = [[UIView alloc] initWithFrame:rect1];
[view1 setBackgroundColor:[UIColor brownColor]];

CGRect rect2 = CGRectMake(60, 90, 200, 200);
UIView *view2 = [[UIView alloc] initWithFrame:rect2];
[view2 setBackgroundColor:[UIColor purpleColor]];
[view2 setAlpha:0.5];

[self.view addSubview:view1];
[self.view addSubview:view2];

2. UIView视图的层次关系

创建三个UIView视图，第一个视图是第二个视图的父视图，第二个视图是第三个视图的父视图：

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(20, 80, 280, 280)];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];

UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
// setBounds 方法，用来设置视图本地坐标系统中的位置和大小，他会影响子视图的位置和显示
[view2 setBounds:CGRectMake(-40, -20, 200, 200)];
view2.backgroundColor = [UIColor yellowColor];
[view1 addSubview:view2];

UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view3.backgroundColor = [UIColor blueColor];
[view2 addSubview:view3];

3. UIView视图的基本操作

实现视图的添加与删除，以及切换视图在父视图中的层次：
💡💡💡

  • bringSubviewToFront:
  • sendSubviewToBack:
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 3.UIView视图的基本操作
    CGRect rect = CGRectMake(30, 50, 200, 200);
    UIView *view = [[UIView alloc] initWithFrame:rect];
    [view setBackgroundColor:[UIColor brownColor]];
    [self.view addSubview:view];
    
    // 创建一个按钮，当点击按钮时，将动态添加另一个视图
    UIButton *btAdd = [[UIButton alloc] initWithFrame:CGRectMake(30, 350, 80, 30)];
    [btAdd setBackgroundColor:[UIColor grayColor]];
    [btAdd setTitle:@"Add" forState:UIControlStateNormal];
    [btAdd addTarget:self action:@selector(addView) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btAdd];
    
    // 创建第二个按钮，当点击这个按钮时，将切换根视图中，两个视图的层次结构
    UIButton *btBack = [[UIButton alloc] initWithFrame:CGRectMake(120, 350, 80, 30)];
    [btBack setBackgroundColor:[UIColor grayColor]];
    [btBack setTitle:@"Switch" forState:UIControlStateNormal];
    [btBack addTarget:self action:@selector(bringViewToBack) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btBack];
    
    // 创建第三个按钮，当点击这个按钮时，将从前窗口的根视图中，删除新添加的视图。
    UIButton *btRemove = [[UIButton alloc] initWithFrame:CGRectMake(210, 350, 80, 30)];
    [btRemove setBackgroundColor:[UIColor grayColor]];
    [btRemove setTitle:@"Remove" forState:UIControlStateNormal];
    [btRemove addTarget:self action:@selector(removeView) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btRemove];
}

#pragma mark - IBAction
#pragma mark 按钮1
- (void)addView {
    CGRect rect = CGRectMake(60, 90, 200, 200);
    UIView *view = [[UIView alloc] initWithFrame:rect];
    [view setBackgroundColor:[UIColor purpleColor]];
    [view setTag:1];
    
    [self.view addSubview:view];
}

#pragma mark 按钮2
- (void)bringViewToBack {
    // 通过标签值，找到新添加的视图
    UIView *view =[self.view viewWithTag:1];
    // 将当前的视图，移到所有兄弟视图的下方
    [self.view sendSubviewToBack:view];
}

#pragma mark 按钮3
- (void)removeView {
    UIView *view = [self.view viewWithTag:1];
    [view removeFromSuperview];
}

4. UIView视图添加边框效果

视图本身，更像是一个图层的管理器，访问它的跟绘图和坐标有关的属性，实际上都是在访问它所包含的图层的相关属性。

给一张图片添加一个彩色相框：

UIImage *image = [UIImage imageNamed:@"github"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(60, 60, 200, 200);

// 设置图片视图的图层边框宽度、颜色
imageView.layer.borderWidth = 10;
imageView.layer.borderColor = [[UIColor purpleColor] CGColor];

[self.view addSubview:imageView];

5. UIView视图添加圆角效果

给矩形图片添加圆角效果：

UIImage *image = [UIImage imageNamed:@"woman"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(60, 60, 300, 170);

// 设置图像视图的层的圆角半径大小
imageView.layer.cornerRadius = 50;
// 设置图像视图的层的遮罩覆盖属性，进行边角裁切。
imageView.layer.masksToBounds = YES;

[self.view addSubview:imageView];

开发中给 Button 设置圆角也可以使用这个方法。

6. UIView视图添加阴影效果

给矩形图片添加阴影效果:

UIImage *image = [UIImage imageNamed:@"woman"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(60, 60, 300, 170);

// 设置图像视图层的阴影颜色
imageView.layer.shadowColor = [[UIColor blackColor] CGColor];
// 设置图像视图层的阴影横向和纵向的偏移量
imageView.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);
// 设置图像视图层的阴影透明度
imageView.layer.shadowOpacity = 0.75;
// 设置图像视图层的阴影半径大小
imageView.layer.shadowRadius = 10.0f;

[self.view addSubview:imageView];

7. UIView视图的渐变填充

创建一个渐变图形:

CGRect rect = CGRectMake(60, 120, 200, 200);
UIView *view = [[UIView alloc] initWithFrame:rect];
view.backgroundColor = [UIColor whiteColor];

// 新建一个渐变层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
// 设置渐变层的位置和尺寸，与视图对象一致
gradientLayer.frame = view.bounds;

// 设置渐变的起始颜色为蓝色
CGColorRef fromColor = [UIColor blueColor].CGColor;
// 设置渐变的中间颜色为红色
CGColorRef midColor = [UIColor redColor].CGColor;
// 设置渐变的结束颜色为黄色
CGColorRef toColor =[UIColor yellowColor].CGColor;
// 创建一个数组对象，存储三个颜色变量
NSArray *colorArray = [NSArray arrayWithObjects:(__bridge id)(fromColor),midColor,toColor, nil];
// 设置 【渐变层的颜色数组属性】 为 【三个渐变色构建的数组】
gradientLayer.colors = colorArray;

// 将渐变层添加到视图对象的层中
[view.layer addSublayer:gradientLayer];

[self.view addSubview:view];

8. UIView视图的纹理填充

将图片赋予颜色对象作为背景：

UIImage *image = [UIImage imageNamed:@"red-1108405__340"];
// 新建一个颜色对象，并将导入的图片赋予该对象
UIColor *background = [[UIColor alloc] initWithPatternImage:image];
//再将此颜色对象，赋值给当前窗口根视图的背景。
self.view.backgroundColor = background;

9. CGAffineTransform仿射变换

// 使用仿射变换功能，旋转视图
CGRect myImageRect = CGRectMake(50.0f, 150.0f, 200.0f, 50.0f);
UIView *myView = [[UIView alloc] initWithFrame:myImageRect];
myView.backgroundColor = [UIColor redColor];
[self.view addSubview:myView];

//创建一个仿射变换变量，仿射变换可以用于平移、旋转、缩放变换路径或者图形上下文。
//Rotate
CGAffineTransform transform = myView.transform;
transform = CGAffineTransformRotate(transform, 3.14/4);
myView.transform = transform;

10. UITapGestureRecognizer手势之单击

- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect rect = CGRectMake(100, 100, 107, 107);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:rect];
    
    UIImage *img = [UIImage imageNamed:@"lion"];
    imageView.image = img;
    
    // 开启图像视图的交互功能,default is NO
    [imageView setUserInteractionEnabled:YES];
    [self.view addSubview:imageView];
    
    // 手势识别类，用于检测发生在设备中的各种手势
    UITapGestureRecognizer *tapGuesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap)];
    // 将手势指定给图像视图
    [imageView addGestureRecognizer:tapGuesture];
}

- (void)singleTap {
    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Information" message:@"single Tap" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    [alertView show];
}

11. UITapGestureRecognizer手势之长按

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGRect rect = CGRectMake(100, 100, 107, 107);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:rect];
    
    UIImage *img = [UIImage imageNamed:@"lion"];
    imageView.image = img;
    
    // 开启图像视图的交互功能,default is NO
    [imageView setUserInteractionEnabled:YES];
    [self.view addSubview:imageView];
        
    // 创建一个长按手势识别对象
    UILongPressGestureRecognizer *longPressGuesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)];
    [imageView addGestureRecognizer:longPressGuesture];
}

- (void)longPress:(UILongPressGestureRecognizer *)guesture {
    // 检测手势事件的阶段
    if (guesture.state == UIGestureRecognizerStateBegan) {
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Information" message:@"long Tap" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [alertView show];
    }
}

12. UITapGestureRecognizer手势之双击

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGRect rect = CGRectMake(100, 100, 107, 107);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:rect];
    
    UIImage *img = [UIImage imageNamed:@"lion"];
    imageView.image = img;
    
    // 开启图像视图的交互功能,default is NO
    [imageView setUserInteractionEnabled:YES];
    [self.view addSubview:imageView];
    
    // 手势识别类，用于检测发生在设备中的各种手势
    UITapGestureRecognizer *tapGuesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTap)];
    
    // 设置点击次数为2，模拟双击事件。Default is 1. <-需要匹配的点击次数
    [tapGuesture setNumberOfTapsRequired:2];
    //  设置为单次双击事件。Default is 1.<-需要匹配的手指数
    [tapGuesture setNumberOfTouchesRequired:1];
    
    // 将手势指定给图像视图
    [imageView addGestureRecognizer:tapGuesture];
}    

- (void)doubleTap {
    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Information" message:@"double Tap" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    [alertView show];

}

参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,539评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,911评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,337评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,723评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,795评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,762评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,742评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,508评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,954评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,104评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,736评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2赞 352

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,089评论 4赞 62
  • iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
    -- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能，乔布斯让人们认识到手机其实...
    翘楚iOS9阅读 2,955评论 0赞 13
  • 想把我唱给你听
    休假，可以远离办公桌，也可以没有办公室，就有了这样一个下午，在大友茶馆的硬板凳上闲着，倦怠了自己的身体，便也让思想...
    吉林市权红阅读 432评论 0赞 0
  • 关于28岁。
    还记得22、23、24岁，这三个年龄段的自己。 22岁，本来大学毕业，应该是好好找一份工作，不管有无经验不管会与不...
    仙女阿珂阅读 359评论 3赞 2
  • 晨见南山
    露珠未醒 晨雾远走 东篱墙边 采菊姑娘 回眸一望 南山正好
    酸糖与甜橙阅读 203评论 0赞 1