简单记录学习斯维夫特的笔记

我们在搭建UI分界面时,有好些个时候,大家会用到iOS自带的绘图成效来形成都部队分界面包车型地铁效用,很常用也很方便。前日大家在此地就伙同探究一下iOS的绘图成效。

1.动画

简单值

  • 使用let来声称常量,使用var来声称变量。

  • 常量只怕变量的门类,必需和您赋给它们的值同样。然则,不用明显地声称类型,评释的还要赋值的话,编写翻译器会自动测算类型。

  • 即便最早值未有提供丰富的新闻,那您供给在变量前面注明类型,用冒号分割。

  • 值永恒不会被隐式调换为别的门类。假如您须求把贰个值调换来别的项目,请显式转变。

例如

let label = "The width is"let width = 94let widthLabel = label + String
  • 有一种更简便易行的把值转变来字符串的方法:把值写到括号中,並且在括号从前写二个反斜杠。

let firstWord = "Lin"let secondWord = "i love \(firstWord)"
  • 行使方括号[]来成立数组和字典,并使用下标大概键来访谈成分。最终五个要素后边允许有个逗号。

var shoppingList = ["catfish", "water", "tulips", "blue paint"]shoppingList[1]var occupations = [ "Malcolm": "Captain", "Kaylee": "Mechanic",]occupations["Jayne"] = "Public Relations"
  • 要创设八个空数组大概字典,使用最初化语法。

let emptyArray = [String]()let emptyDictionary = [String: String]()
  • 假使类型新闻能够被预计出来,你能够用[][:]来创制空数组和空字典——就好像你表明变量恐怕给函数字传送参数的时候一样。

shoppingList = []occupations = [:]
  • CoreGraphics也称之为Quartz 2D
    是UIKit下的主要绘图系统,频仍的用于绘制自定义视图。Core
    Graphics是莫斯科大学集成于UIView和别的UIKit部分的。Core
    Graphics数据结构和函数能够透过前缀CG来甄别。

  • 视图能够因此子视图、图层或达成drawRect:方法来呈现内容,假使说实现了drawRect:方法,那么最佳就无须混用其他办法了,如图层和子视图。自定义绘图当先1/3是由UIKit或许Core
    Graphics来贯彻的。

  • 由于像素是依据于指标的,所以2D绘制并不能够操作单独的像素,大家能够从上下文读取它。绘图就好比在画布上拿着画笔机械的进行写生,通过拟定差异的参数来进展分化的绘图。

Core Animation笔记,基本的应用格局– Core
Animation笔记,基本的利用方法:1.基本动画,2.多步动画,3.沿路线的卡通片,4.岁月函数,5.动画组。

控制流

  • 使用ifswitch来进展标准操作,使用for-inforwhilerepeat-while来展开巡回。

  • 包裹条件和循环变量括号能够省略,可是语句体的大括号是必需的。

let individualScores = [75, 43, 103, 87, 12]var teamScore = 0for score in individualScores { if score > 50 { teamScore += 3 } else { teamScore += 1 }}print(teamScore)
  • if语句中,条件必得是贰个布尔表明式

  • 你能够一并使用iflet来处理值缺点和失误的状态。那几个值可由可选值来表示。三个可选的值是三个现实的值恐怕是nil以象征值缺点和失误。在类型前边加贰个问号来标志这一个变量的值是可选的。

var optionalString: String? = "Hello"print(optionalString == nil)var optionalName: String? = "Lin"var greeting = "Hello!"optionalName = nilif optionalName == nil { greeting = "Lix love Lin 🙄"}else{ let name = optionalName greeting = "\ love Lix 🌚"}
  • 假如变量的可选值是nil,条件会咬定为false,大括号中的代码会被跳过。假如不是nil,会将值赋给let后面包车型大巴常量,那样代码块中就足以行使这么些值了。

  • 另一种管理可选值的格局是通过使用??操作符来提供二个私下认可值。假如可选值缺点和失误的话,能够运用暗中认可值来代替。

let nickName: String? = "球球 🤗"let fullName: String? = "LinHong"let informalGreeting = "Hi \(nickName ?? fullName)"
  • switch支撑肆意档期的顺序的多寡以及种种相比较操作——不止是整数以及测验相当。

let sport = "basketball"switch sport {case "football": print("this is the first sport") case "running": print("Lin was running everyday") case let x where x.hasSuffix: print("Lix play \ everyday") default: print("keep moving")}
  • 运行switch中相称到的子句之后,程序会退出switch讲话,并不会一而再向下运行,所以不必要在每种子句结尾写break

  • 您能够应用for-in来遍历字典,供给四个变量来代表各样键值对。字典是三个冬天的集纳,所以他们的键和值以自由顺序迭代停止。

let interestingNumbers = [ "Prime": [2,3,5,7,11], "Fibonacci": [1,1,2,3,5,8,13], "Square": [1,4,9,16]]var largest = 0var numberClass = "number"for (kind, numbers) in interestingNumbers { for number in numbers { if number > largest { largest = number numberClass = kind } }}printprint(numberClass)
  • 使用while来再一次运转一段代码直到不满意条件。循环条件也足以在终极,保证能至少循环三回。

var n = 2while n < 100 { n = n * 2}printvar m = 2repeat { m = m * 2} while m < 100 //循环条件可以在结尾,至少保证循环一次print
  • 你能够在循环中选择..<来表示范围。

var total = 0for i in 0..<4 { total += i}print
  • 使用..<创设的限制不分包上界,如若想包含的话需要选择...

var total = 0for i in 0...100 { total += i}print

awesome-ios-animation–iOS
Animation主流炫丽动画框架收罗整理收罗整理了下iOS平台下比较主流炫耀的六款动画框架。

  • 画线
  • 画圆、圆弧、贝塞尔曲线
  • 画矩形、椭圆形、多边形
  • 绘图图片
  • 绘制文字

2.侧滑与右滑重回击势

在绘图以前,我们先来询问一下多少个着力的概念

SloppySwiper–
iOS系统自带的UINavigationController要7.0才支撑,但可是该手势只可以从荧屏左边边缘识别,借使要扩展到全数荧屏范围如何是好?协作二个SloppySwiper无需代码就足以轻巧完毕。此库帮衬iOS5.0上述版本(另外:Nav的title滑动不明明,自己写了2个类似的控件),SloppySwiper-demo:代码格局与storyboard格局。

  • context:上下文,ios绘图的方法都亟待传七个光景文context,那些context在重写uiview的drawRect的办法里调用UIGraphicsGetCurrentContext()获取

  • path:路线,ios绘图能够想象为你拿着一支笔去画图,画几条线或多少个点进而变成一个渠道,之后能够运用通晓去填色大概描边

  • stroke,fill
    描边和填充,每种路线都亟需填写恐怕描边后技巧在视图中看见,他们都分别有非常多体裁能够设置,常见的有颜色、粗细、渐变,连接样式等等。

  • 画图能够使用暗中同意路线画,也许独立成立path画图,对应画图的api并比很小同小异,是两组名称相似的api,两组api常用的法子如下

GHSidebarNav–今后可比盛行使用侧开菜单设计。试了过多控件,以为GHSidebarNav最成熟,特别对纯代码成立的分界面包容性最佳。在Storyboard中应用GHSidebarNav侧开菜单控件。

iOS-Slide-Menu–能够类似推特(TWTR.US)和Path那样弹出左右侧栏侧滑菜单,还援帮手势。三种足以自定义的属性。

CGContextMoveToPoint //设置起点CGContextClosePath //连接起点和当前点CGPathCreateMutable //类似于 CGContextBeginPathCGPathMoveToPoint //类似于 CGContextMoveToPointCGPathAddLineToPoint //类似于 CGContextAddLineToPointCGPathAddCurveToPoint //类似于 CGContextAddCurveToPointCGPathAddEllipseInRect //类似于 CGContextAddEllipseInRectCGPathAddArc //类似于 CGContextAddArcCGPathAddRect //类似于 CGContextAddRectCGPathCloseSubpath //类似于 CGContextClosePathCGContextAddPath //函数把一个路径添加到graphics

JASidePanels–侧滑菜单,有左右菜单,有pop功用,援帮手势侧滑,本身使用中:简单。

  • 获取context
  • 设置Path
  • 填充或描边路线

animated-tab-bar–让Tabbar items能突显萌萌的动画片。

tabbarLogo动画– tabbar上海教室标的动画完结,源码推荐表达。

  • 填充笔触,正是只给路线描边
  • 据书上说路线填充颜色
  • 填充笔触和颜色

SideMenu– swift实现,一款拉动画效用可定制Slide
Menu,可以学习其动画完成思路。P.S.对于Hamburger式菜单,纵然很常用,可是,苹果并不激励施用,以致有付出小组对其破绽用作者上线应用前后数据相比较实行了抨击。

填充颜色也分为非零绕数准则和奇偶法则,那一个概念相比较复杂难以分解,大家能够百度拜望也许画多少个图试试就领会。

RESideMenu–侧开菜单,qq类似。

CGContextStrokePath; //描出路径CGContextFillPath //使用非零绕数规则填充当前路径CGContextDrawPath //两个参数决定填充规则,kCGPathFill表示用非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathFillStroke表示填充,kCGPathEOFillStroke表示描线,不是填充CGContextEOFillPath //使用奇偶规则填充当前路径CGContextFillRect //填充指定的矩形CGContextFillRects //填充指定的一些矩形CGContextFillEllipseInRect //填充指定矩形中的椭圆

JHMenuTableView德姆o–仿和讯邮箱列表侧滑菜单。

预备干活

SlideMenuView–绚烂侧滑菜单布局框架,Android版本的一模二样完毕。

  • 新建二个文件,承接UIView
  • 重写-drawRect:rect方法

QQConfiguration– swift,QQ-摩托罗拉端框架,侧边菜单栏拖出手势。

KGFloatingDrawer–侧滑菜单,qq类似,KyleGoddard/KGFloatingDrawer:一款适合于大屏手提式有线电话机或平板的变通抽屉式导航分界面组件。效果十分赞-侧开菜单,qq类似(与RESideMenu类似)。

-drawRect:rect{ [super drawRect:rect]; //获取ctx CGContextRef ctx = UIGraphicsGetCurrentContext(); //设置画图相关样式参数 //设置笔触颜色 CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);//设置颜色有很多方法,我觉得这个方法最好用 //设置笔触宽度 CGContextSetLineWidth; //设置填充色 CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor); //设置拐点样式 // enum CGLineJoin { // kCGLineJoinMiter, //尖的,斜接 // kCGLineJoinRound, //圆 // kCGLineJoinBevel //斜面 // }; CGContextSetLineJoin(ctx, kCGLineJoinRound); //Line cap 线的两端的样式 // enum CGLineCap { // kCGLineCapButt, // kCGLineCapRound, // kCGLineCapSquare // }; CGContextSetLineCap(ctx, kCGLineCapRound); //虚线线条样式 //CGFloat lengths[] = {10,10}; //画线 [self drawLine:ctx]; //画圆、圆弧 [self drawCircle:ctx]; //画矩形,画椭圆,多边形 [self drawShape:ctx]; //画图片 [self drawPicture:ctx]; //画文字 [self drawText:ctx]; }

JHChainableAnimations–在应用中应用链式写出酷炫的卡通效果,使代码特别显然易读,利用block实现的链式编制程序。

先是个主意本身写的相比较详细,写了动用path的点子和一贯画线的点子。推荐应用path的主意画线。
另外,第三个艺术也写了活动笔触画线和用点集结画线。前边方法只会涉及其中一种,因为方法都比较接近。

WXGSlideMenu德姆o–个简易达成侧拉菜单的小demo,供初学者一同学习、练习使用。

 //画线 -drawLine:(CGContextRef)ctx{ //画一条简单的线 CGPoint points1[] = {CGPointMake,CGPointMake}; CGContextAddLines(ctx,points1, 2); //画线方法1,使用CGContextAddLineToPoint画线,需要先设置一个起始点 //设置起始点 CGContextMoveToPoint(ctx, 50, 50); //添加一个点 CGContextAddLineToPoint(ctx, 100,50); //在添加一个点,变成折线 CGContextAddLineToPoint(ctx, 150, 100); //画线方法2 //构造线路径的点数组 CGPoint points2[] = {CGPointMake,CGPointMake,CGPointMake}; CGContextAddLines(ctx,points2, 3); //利用路径去画一组点(推荐使用路径的方式,虽然多了几行代码,但是逻辑更清晰了) //第一个路径 CGMutablePathRef path1 = CGPathCreateMutable(); CGPathMoveToPoint(path1, &CGAffineTransformIdentity, 0, 200); //CGAffineTransformIdentity 类似于初始化一些参数 CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 100, 250); CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 310, 210); //路径1加入context CGContextAddPath(ctx, path1); //path同样有方法CGPathAddLines(),和CGContextAddLines()差不多用户,可以自己试下 //描出笔触 CGContextStrokePath; } 

//画矩形,画椭圆,多边形-drawSharp:(CGContextRef)ctx{ CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor); //画椭圆,如果长宽相等就是圆 CGContextAddEllipseInRect(ctx, CGRectMake(0, 250, 50, 50)); //画矩形,长宽相等就是正方形 CGContextAddRect(ctx, CGRectMake(70, 250, 50, 50)); //画多边形,多边形是通过path完成的 CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, &CGAffineTransformIdentity, 120, 250); CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 200, 250); CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 180, 300); CGPathCloseSubpath; CGContextAddPath(ctx, path); //填充 CGContextFillPath;}

 //画图片 -drawPicture:(CGContextRef)context{ /*图片*/ UIImage *image = [UIImage imageNamed:@"head.jpeg"]; [image drawInRect:CGRectMake(10, 300, 100, 100)];//在坐标中画出图片 }

 //画文字 -drawText:(CGContextRef)ctx{ //文字样式 UIFont *font = [UIFont systemFontOfSize:18]; NSDictionary *dict = @{NSFontAttributeName:font, NSForegroundColorAttributeName:[UIColor whiteColor]}; [@"hello world" drawInRect:CGRectMake(120 , 350, 500, 50) withAttributes:dict]; }

斯维夫特Pages–高可定制类似Facebook视图滑动切换到效类库。API不难、易用。

**
画圆和圆弧是贰遍事,只是起源和关键岗位不一致,画圆画弧线首要借助于那多少个章程
CGContextAddArc, CGContextAddArcToPoint, CGContextAddCurveToPoint,
CGContextAddQuadCurveToPoint 前边七个格局是贝塞尔三遍曲线和三次曲线
**

MMDrawerController–最多少人用的三个关于左边“抽屉”导航框架,里面还应该有相当多你想不到的互相功效,侧滑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注