iOS 基础UI

课程就要接近尾声了所以我总结了一些关于iOS UI的一些基本知识点和属性

DAY_01 UIKit框架-UIKit-UIView

创建window

在AppDelegate.m文件内实现

1.创建window对象

[UIScreen mainScreen]是一个单例，代表屏幕大小的一个单例

self.window = [[UIWindow alloc]initWithFrame:[UIScreenmainScreen].bounds];

2.设置window属性

self.window.backgroundColor = [UIColor brownColor];

3.使创建的window对象成为主窗口且可见（一般来说一个应用程序只有一个主窗口）

[self.window makeKeyAndVisible];

4.创建视图控制器

创建一个MainViewController类

MainViewController *mainVC = [[MainViewController alloc]init];

self.window.rootViewController = mainVC;

 

操控模拟器

回到主界面：shift+command+h

横竖屏切换：command+方向键（左右）

缩放：optional+鼠标左键

 

每一个视图控制器自带一个视图（view）

给视图控制器的视图设置属性

self.view.backgroundColor = [UIColor whiteColor];

 

UI中所有可见的视图都是UIView或者UIView的子类

视图展示三部曲

1.创建对象

2.设置属性

3.添加到父视图上

 

1.创建对象

UIView *blackV = [[UIViewalloc]initWithFrame:CGRectMake(100,100,200,200)];

2.设置属性

blackV.backgroundC-olor = [UIColor blackColor];

3.添加到父视图上

[self.view addSubview:view];

 

view的属性设置

a.设置背景颜色

blackV.backgroundColor = [UIColor blackColor];

b.设置透明度（0~1之间）

blackV.alpha = 0.8;

c.设置tag值（默认为0）

blackV.tag = 10;

d.根据tag值获取相应的视图

UIView *v = [self.view viewWithTag:10];

e.获取子视图

NSArray *arr = [self.view subviews];

f.获取父视图

UIView *superV = [view superview];

g.视图的显隐

blackV.hidden = YES;

 

frame，center，bounds的不同

frame既可以改变当前视图的大小，也可以改变当前视图的位置，它是相对于父视图而言

 

center是改变当前视图的位置

 

bounds可以改变当前视图的大小和子视图的位置，默认原点是（0，0）

bounds的point描述的就是当前视图左上角点和原点的距离

point设置为整数那么原点往左上角偏移

简单来说就是将point看作是描述左上角点的坐标

 

 

视图的添加和删除

创建视图redV和yellowV

视图插入

a.将redV放在blackV下面

[self.view insertSubview:redV belowSubview:blackV];

b.将yellowV放在redV和blackV的中间(把yellowV放到redV上面)

[self.view insertSubview:yellowV aboveSubview:redV];

c.将yellowV通过下标插入到redV下面（把yellowV方法第一层）

[self.view insertSubview:yellowV atIndex:0];

 

将redV视图放到最前面

[self.view bringSubViewToFront:redV];

 

将blackV视图放到最后面

[self.view bringSubviewToBack:blackV];

 

将视图从父视图上移除

[yellow removeFromSuperview];

DAY_02 UILabel、UIButton、UITextField、UIImageView

 

一、UILabel：文本视图

text：设置文本

textColor：文本颜色

numberOfLines：设置行数（设置为0自动换行）

font：文本字体

systemFontOfSize：文本字体颜色

textAlignment：文本对齐方式

shadowOffset：阴影偏移量

shadowColor：阴影颜色

layer.borderWidth：文本边框宽度

layer.borderColor：文本边框颜色

layer.cornerRadius：设置圆角

layer.masksToBounds：是否裁剪边缘

 

二、UITextField：文本输入框

placeholder：占位符

borderStyle：边框风格(UITextBorderStyleRoundedRect：圆角)

clearButtonMode：清除按钮显示状态

clearsOnBeginEditing：是否开始编辑的时候清除

leftView：左视图

leftViewMode：左视图模式

secureTextEntry：密文输入

keyboardType：键盘样式

 

设置代理

textField.delegate = self;

textField协议重写方法

文本输入框协议里的方法

1、文本输入框能否开始编辑

-   (BOOL)textFieldShouldEndEditing:(UITextField *)textField;

2、文本输入框已完成编辑（完成编译时实现的方法写在这里）

-   (void)textFieldDidEndEditing:(UITextField*)textField{

    例如判断输入是否正确

}

 

3、文本输入框是否按回车键

-   (BOOL)textFieldShouldReturn:(UITextField *)textField;

（取消第一响应者，即光标移除）

resignFirstResponder

 

 

 

 

4、文本框限制输入字数长度

-   (BOOL)textField:(UITextField *)textFieldshouldChangeCharactersInRange:(NSRange)range replacementString:(NSString*)string{

 

将每一次输入的字符进行拼接

判断每一次拼接之后的字符是否超过限制

如果超过{

    把拼接后的字符传到textField里

    返回NO，表示文本输入框内容不允许被添加

    }

不超过就返回YES，表示文本输入框内容可以添加

}

 

三、UIButton：按钮控件

初始化方法：

buttonWithType

设置按钮标题

setTitle:(NSString *) forState:(UIControlState)

设置按钮标题颜色

setTitleColor:(NSString *) forState:(UIControlState)

点击高亮

showsTouchWhenHighlighted = YES

背景图片（按钮的背景图片）

setBackgroundImage:(UIImage *) forState:(UIControlState)

前景图片（点击前按钮的背景图片）

setImage:(UIImage *) forState:(UIControlState)

设置图片位置

setImageEdgeInsets

setTitleEdgeInsets

 

四、UIImageView：图片视图

创建一张图片

如果不是png格式就必须加后缀名

UIImage *image = [UIImage imageNamed:(NSString *)];

创建一个图片视图

添加图片

imageView.image = image;

动画效果

用一个数组把连续的图片存储起来(for)

添加动画图片

animationImages = (NSArray *);

动画播放时间

animationDuration

动画播放次数

animationRepeatCount

动画开始

startAnimating

 

DAY_03 UIViewController、CustomView

customView：自定义视图

 

视图的横竖屏

-   (void)layoutSubviews{

    获取屏幕当前方向

    UIInterfaceOrientation ori= [UIApplication sharedApplication].statusBarOrientation;

}

 

视图控制器的跳转（用按钮实现）

创建视图控制器对象

模态出一个控制器

presentViewController:视图控制器对象animated:是否开启动画效果completion:^{完成之后要实现的步骤（没有直接写nil）};

 

返回上一个控制器

[self dismissViewControllerAnimated：是否开启动画效果completion:nil];

 

 

 

DAY_04  UIEvent 事件手势

一、触摸响应

触摸事件的四个方法

touchesBegan:触摸开始(触摸点下去未松开的时候触发)

touchesCancelled:触摸取消(除非有电话打来强制取消触摸)

touchesEnded:触摸结束(触摸松开的时候触发)

touchesMoved:触摸移动(触摸移动的时候触发)

 

//封装的类

模仿button实现target action设计模式

@property (nonatomic,assign)id target;

@property (nonatomic,assign)SEL selector;

方法

[self.target performSelector:self.selector withObject:selfafterDelay:4];

 

二、响应者链

用户交互开关

是一个属性，BOOL值：userInteractionEnabled

事件检测顺序

application -> appDelegate -> window ->rootVC ->btn1-> btn2 -> btn3

事件响应顺序

和检测顺序相反，一旦某个子视图对视图做出响应就不再传递

响应区域是子视图在父视图的区域

 

三、手势

添加方法

addGestureRecognizer:

设置时应打开用户交互

 

UITapGustureRecognizer：点击手势

numberOfTapsRequired：点击次数

numberOfTouchesRequired：手指同时触摸的数字

 

UIPinchGestureRecognizer：捏合手势

scale：两个手指之间的距离

改变大小（应该设置为每次放大缩小都是基于上一次的基础作变化）

image.transform = CGAffineTransformScale(image.transform,pinch.scale, pinch.scale);

//偏移量重置

pinch.scale = 1;

 

UIRotationGestureRecognizer：旋转手势

rotation = 旋转的弧度

image.transform = CGAffineTransformScale(image.transform,rotation.rotation);

//重置比例系数（弧度）

rotation.rotation = 0;

 

UISwipeGestureRecognizer：滑动手势

direction：滑动的方向

判断滑动方向以此执行相对应的方法

 

UIPanGestureRecognizer：拖动手势

pan.view就是手势所在的视图

//根据拖动的偏移量重新设置视图的位置

imageV.transform =CGAffineTransformTranslate(imageV.transform, [pantranslationInView:pan.view].x, [pan translationInView:pan.view].y);

//偏移量重新设置为0（CGPointZero）

[pan setTranslation:CGPointZero inView:pan.view];

 

UIScreenEdgePanGuestureRecognizer：屏幕边缘轻扫手势

edges：可以滑动的屏幕边缘方向

 

UILongPressGestureRecognizer：长按手势

minimumPressDuration：长按的时间，默认是0.5

numberOfTapsRequired：点击次数,默认是0

numberOfTouchesRequired：同时触摸的手指数量

 

DAY_05 UIControl

（防止图片被渲染的方法（有时候必须写在设置图片的同时））

imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal

 

UIControl:具有控制功能的空间，例如UIButton,UISlider

 

改变值的触发状态：UIControlEventValueChanged

 

UISwitch:开关控件

on:开关状态

setOn:animated：开关初始状态和开场动画

外观：

onTintColor

tintColor

thumbTintColor

 

UISlider:滑动控件

continuous：是否停下来才确定值

minimumValue：设置最小值

maximumValue：设置最大值

 

UISegmentedControl：分段控件

initWithItems:(NSArray)items：初始化方法

momentary：是否开启选中之后的效果

tintColor

 

UIPageControl：分页空间（常和UIScrollView一起使用）

numberOfPages：分页总页数

currentPage：当前页

defersCurrentPageDisplay：当前页在控件上的显示

 

DAY_06 UIScrollView

滚动视图

在滚动视图上添加图片视图

确定滚动视图的滚动范围

contentSize

 

滚动条是否显示

横向

showsHorizontalScrollIndicator

竖向

shwosVerticalScrollIndicator

是否整页滚动

pagingEnabled

边缘弹动(设置无限循环图片时应开启)

bounces

点击状态栏回到最上面

scrollsToTop

设置偏移量（滚动视图偏移的多少）

contentOffset

实现代理<UIScrollViewDelegate>

self.delegate = self;

 

缩放：（把每一个图片视图都添加到另外新建的滚动视图，有图片的滚动视图实现缩放的方法，再把有图片的滚动视图都添加到一个滚动视图，这个滚动视图用来滚动展示图片）

设置最小最大缩放比例

minimumZoomScale

maximumZoomScale

实现缩放的方法（指定哪个视图可以被缩放）

viewForZommingInScrollView：（返回一个视图）

 

 

和UIPageControl组合

page的方法

//屏幕偏移量（想展示哪个界面就设置为多少）

scrollView.contentOffset =CGPointMake(pageControl.currentPage*self.view.frame.size.width, 0);

UIScrollView的方法（写在减速完成里）

pageControll.currentPage =scrollView.contentOffset.x/self.view.frame.size.width;

 

DAY_07 UINavigationController：导航控制器

导航控制器：管理一个或多个视图控制器

将rootVC作为导航控制器的根视图控制器

initWithRootViewControll

将导航控制器作为window的根视图控制器

rootViewController

 

设置导航栏标题

title

navigationItem.title

设置导航控制条的透明与否

如果透明，那么视图原点从屏幕左上角开始

如果不透明，那么视图原点则从导航栏左下角开始

导航栏高度：44，状态栏高度：20

self.navigationController.navigationBar.translucent = (BOOL);

bar：导航栏

设置bar的背景颜色

self.navigationController.navigationBar.barTintColor

设置bar的背景图片

如果图片高度小于44（导航栏高度），图片会填充状态栏和导航栏

如果图片高度等于44，图片则刚好设置为导航栏的背景

如果图片高度等于64，图片则刚好为导航栏和状态栏的背景

self.navigationController.navigationBar setBackgroundImage:(UIImage*) forBarMetrics:UIBarMetricsDefault];

设置bar上的空间颜色

tintColor

 

在导航栏上添加控件

1、按钮为系统样式

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@SEL];

2、自定义图片样式

添加图片时设置不被渲染

intiWithImage

3、自定义文字样式

initWithTitle

 

设置右边多个按钮

self.navigationItem.rightBarButtonItems = (NSArray *)

 

在中间添加分段空间

self.navigationItem.titleView = segmentControl

 

点击右边按钮跳转视图控制器

push跳转

导航控制器以栈的形式管理一个或者多个视图控制器，第一个被加入的控制器称之为根视图控制器，处于栈底，一般处于栈顶得控制器就是当前正在被展示的控制器

push就是将控制器加入栈中

pop就是将控制器从栈中拿出来

self.navigationController pushViewController:控制器对象 animated:YES

 

在跳转的控制器中实现返回

pop

1、返回到上一个控制器

[self.navigationController popViewControllerAnimated:YES];

2、返回到指定控制器

[self navigationController viewControllers]：栈里所有的视图控制器

3、返回到根视图控制器

[self.navigationController popToRootViewControllerAnimated:YES];

 

 

DAY_09 UITabBarController：标签栏控制器

 

设置标签栏控制器：

第一步 创建视图控制器

第二步 将视图控制器加入导航栏（一个标签栏对应一个导航栏）

第三步 将导航栏加入到标签栏

viewControllers：通过数值的形式添加

第四步 将标签栏作为根视图控制器

 

设置badgeValue（消息提醒）

如果视图控制器加入了导航控制器，那么我们设置标签栏的标题和badgeValue需要通过导航控制器的属性设置，而不是通过标签控制器的属性设置

 

设置标签栏样式

a、系统样式

self.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFavoritestag:100]];

b、自定义样式

self.tabBarItem = [[UITabBarItem alloc]initWithTitle:NSString *image:UIImage * selectedImage:UIImage *];

 

设置属性

a、标签标题

通过tabBarItem.title设置标签标题

b、背景图片

标签栏的高度49，如果图片高度超出标签栏，图片不会自动压缩

 

设置默认选中的标签栏

selectedIndex：标签栏的坐标

 

设置标签栏颜色

tabBar.barTintcolor

设置工程中所有tabBar的背景颜色

[[UITabBar appearance] setBarTintColor:[UIColor *]];

[UITabBar appearance]返回工程中所有的UITabBar

设置工程中所有导航栏的背景颜色（对导航栏有用）

 

设置字体属性

NSDictionary *dic = @{NSForegroundColorAttributeName:[UIColor *],

                 NSFontAttributeName:[UIFontsystemFontOfSize:20]};

[[UITabBarItem appearance] setTitleTextAttributes:dicforState:UIControlStateNormal];

 

 

DAY_10UITableView基本使用

 

一、创建一个表视图对象

UITableView *tab = [[UITableView alloc]initWithFrame:[UIScreen mainScreen].boundsstyle:UITableViewStylePlain];

有两种风格的UITableView：

UITableViewStyleGrouped和UITableViewStylePlain

 

二、设置属性

a、设置行高

tab.rowHeight

b、设置分割线颜色

tab.separatorColor

c、设置代理（delegate提供外观设置，datasource提供数据源（主要给cell赋值））

遵循代理

<UITableViewDataSource,UITableViewDelegate>

 

三、添加到父视图

 

代理必须实现的两个方法：设置有多少分区，每个分区有多少行

tableView:cellForRowAtIndexPath:确定每个分区有多少行

tableView:numberOfRowsInSection:确定有多少个分区

 

确定有多少个分区，每个分区多少行之后，为每一行的cell配置数据

方法名：tableView:cellForRowAtIndexPath:

indexPath.section：当前显示的分区（返回NSInteger）

indexPath.row：当前显示的分区的行数（返回NSInteger）

 

1、设置重用符号

UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:@“reuse”];

2、判断如果cell为空，创建cell

if(cell == nil){

    cell = [[UITableViewCellalloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@“reuse”];

}

3、cell自带了textLabel（标题标签），detailTextLabel（详细内容标签），imageView（图片视图）

设置textLabel.text，detailTextLabel.text，imageView.image

4、返回cell

return cell；

 

代理的其他方法

1、设置分区的行的高度

tableView:heightForRowAtIndexPath:

返回CGFloat

 

2、设置分区头标题

tableView:titleForHeaderInSection:

返回一个NSString

 

3、设置分区头高度

tableView:heightForHeaderInSection:

返回一个CGFloat

 

4、设置分区头视图（可以在分区头添加View）

tableView:viewForHeaderInSection:

返回一个视图（label或者imageView等等）

 

5、设置右边栏标题（通讯录右边的A-Z，通过点击跳到对应的分区）

sectionIndexTitlesForTableView:

返回一个数组

 

6、选中某个单元格方法

tableView:didSelectRowAtIndexPath:

无返回值

用法：选中之后跳转到详细页面

 

获取plist文件的所有信息

NSString *s = [[NSBundle mainBundle]pathForResource:@“plist文件名” ofType:@“文件后缀”];

plist文件使用字典保存就用字典接收，用数组就用数组接收，使用对应的对象类型接收数据

NSDictionary *dic  =[[NSDictionary alloc]initWithContextsOfFile:s];

DAY_11 UITableView编辑

 

添加编辑按钮

self.navigationItem.rightBarButtonItem = self.editButtonItem;

 

tableView编辑分四步

1、使tableView处于编辑状态

2、确定哪些cell可以被编辑

3、确定cell的编辑模式

4、完成编辑提交

 

删除操作

先操作数据源，再操作UI

1、删除数组中某一个元素

2、操作UI

删除某一行

[self.tableView deleteRowsAtIndexPaths:@[indexPath]withRowsAnimation:UITableViewRowAnimationTop];

删除某一分区

NSIndexSet *set  = [NSIndexSetindexSetWithIndex:indexPath.section];

[self.tableView deleteSections:set withRowAnimation:2];

 

cell的移动

1、确定哪些单元格可以被移动

2、操作数据，移动完成

sourceIndexPath：起始坐标

destinationIndexPath：移动后到达的坐标

a、先添加后删除

b、刷新整个UI

[self.tableView reloadData];

 

限制跨分区移动

//a 跨分区移动

- (NSIndexPath*)tableView:(UITableView *)tableView targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath*)sourceIndexPath toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath{

    //判断目标路径和起始路径如果相同，移动，否则，不能移动

    if(相同){

        returnproposedDestinationIndexPath;

    }else{

        return sourceIndexPath;

    }

}

 

DAY_12 UITableViewCell

数组里面是字典，可以创建一个类作为model存储数据，通过KVC赋值

步骤：

model里面应实现setValue:forUndefinedKey:方法

1、遍历数组

for (NSDictionary *dic in self.array)

2、创建类对象

Student *s = [[Student alloc]init];

3、给对象赋值

[s setValuesForKeysWithDictionary:dic];

 

创建一个类继承于UITableViewCell（自定义Cell用来展示数据）

给类里面的属性实例化的时候把frame写在layoutSubviews里面

这个方法用来布局子视图

方法被触发的时机：

a、当子视图被添加到父视图上

b、屏幕做旋转

c、滚动视图

 

动态计算图片高度（等比例缩放）

缩放比例：用图片的宽度除以100（1比1的比例）

图片视图的高度：用图片的高度除以缩放比例

 

影响文本高度的几个因素：

文本内容的多少，文本所占宽度，文本字体的大小

NSDictionary *dic = @{UIFontAttributeName:[UIFontsystemFontOfSize:17]};

//17号字体

文本高度：

CGFloat h = [text boundingRectWithSize:CGSizeMake(200,10000)options:NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil].size.height;

 

DAY_13 UIKit-xib

找到对应的nib文件，利用nib文件注册cell

UINib *nib = [UINibnibWithNibName:@“文件名" bundle:nil];

[self.tableView  registerNib:nib forCellReuseIdentifier:@“重用标示符”];

视图与视图之间的对齐

Leading Edges:左对齐

Trailing Edges:右对齐

Top Edges:上对齐

Bottom Edges:下对齐

Horizontal Centers:纵向中心对齐

Vertical Centers:横向中心对齐

BaseLines:基线对齐

 

视图本身的位置

Horizontally in Container:以屏幕的纵向中心线对齐

Vertically in Container:以屏幕的横向中心对齐

两者结合就可以让View以屏幕的中心点对齐

 

视图的大小

Width:视图的宽度

Height:视图的高度

 

选中两个视图

Equal Width:两个视图等宽

Equal Height:两个视图等高

Aspect Ratio:设置宽高比

 

DAY_14 storyboard

sizeClass

iPhone4S,iPhone5/5s,iPhone6

 

竖屏：(w:Compacth:Regular)

 

横屏：(w:Compact h:Compact)

 

iPhone6 Plus

 

竖屏：(w:Compacth:Regular)

 

横屏：(w:Regular h:Compact)

 

iPad

 

竖屏：(w:Regular h:Regular)

 

横屏：(w:Regular h:Regular)

 

 

DAY_15 UICollectionView

 

1、创建layout对象

2、创建UICollectionView

3、遵循代理

4、实现代理方法

5、注册自定义cell类

registerClass

6、添加到父视图上

 

DAY_16 UIImagePickerController

1、创建按钮用来进入相册

2、初始化UIImagePickerController

3、选择调用相册还是摄像头

4、设置代理

5、allowEditing：允许编辑

6、用present方法弹出pick控制器

 

实现选中图片后执行的方法

imagePickerController:didFinishPickimgMediaWithInfo:

用dismiss返回

编辑后的图片

info[@“UIImagePickerControllerEditedImage"]