欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS 基础UI

程序员文章站 2022-04-26 18:02:00
课程就要接近尾声了所以我总结了一些关于ios ui的一些基本知识点和属性 day_01 uikit框架-uikit-uiview 创建window 在appdelegate.m文件内实现 1.创建w...

课程就要接近尾声了所以我总结了一些关于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_05uicontrol

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

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

实现代理

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赋值))

遵循代理

,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"]