码迷,mamicode.com
首页 > 其他好文 > 详细

一个Demo展示Storyboard的强大

时间:2015-03-30 18:20:12      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

本文转载至http://www.cocoachina.com/ios/20150330/11440.html

今天我通过完成一个长按cell删除的Demo,向你们展示熟练运用storyboard和Autolayout能给你的开发速度和效率带来多大的提升.

技术分享

删除动画

废话不多说,新建一个Single View Application.

到storyboard选中我们唯一一个的viewcontroller,找到xcode的菜单栏,Edit->Embed In->NavigationController.这时候storyboard会自动为你生成一个navigationController,并且讲viewcontroller当做rootViewcontroller.

技术分享

点击Viewcontroller里的navigationbar.右边面板找到这些属性

技术分享

找到title

把title改成City.

技术分享

navigationbar的title

已经显示为City.

拉一个tableview到viewcontroller上,并且约束改为这样.

技术分享

tableview的约束

右键单击我们的tableview,把delegate和datasource设置成我们的viewcontroller.

技术分享

右键单击tableview

技术分享

设置代理和数据源

现在,既然设置了delegate和datasource,一些必须实现的方法就必须要在viewcontroller里写了.

这时候我们还少一个cell,选中tableview,找到右边面板.

技术分享

添加一个cell原形

这时候我们的tableview里会出现一个空白cell,我们这时候先用系统自定义的basic款式就行了.改identifier为basicCell

技术分享

basicCell

然后,我们要实现tableview的代理方法

技术分享

运行.

技术分享

运行效果

总耗时不超过2分钟.全部手写代码要花多久?

为了实现第一张图的那种cell,我们需要做这么几件事.

1.在cell里添加一个两个view,最底层的一个view专门用来显示阴影,第二个view在上面,有圆角.(为什么要有一个view专门来显示阴影不懂的自行百度).而且第一个view宽高要比第二个view小一些.

2.第二个view上要有一个imageView和两个label,这个很简单拉线搞约束就行了.

直接上图.

先把我们的cell的类型改为custom.然后把identifier改为"customCell".新建一个类,继承自UITableViewCell,起名叫CustomTableViewCell.和我们的storyboard里的cell关联起来.(这些操作相信大家都会把.)

技术分享

先添加阴影view(shadowView).直接把一个view拖到我们的cell上.

技术分享

再添加一个容器view(containerView),用来放我们的imageview和两个label.

技术分享

通过这个约束你可以看到我们的容器view明显比阴影view大.

然后把我们的图片和两个label按如下位置放置.

技术分享

这里不用care label的约束,需要注意的只有imageView,先给imageView加如下约束.

技术分享

意思就是上下与容器viewpadding为0,左边距为0,然后右键选中imageview,拉一根线到我们的容器view.出现这个菜单

技术分享

选中equal Width,然后去右边找到我们的这个约束,双击,内容改为.

技术分享

这个约束的意思就是imageView的宽度适中保持为父view宽度的十分之三.

现在我们的cell的.h文件是这样的.

技术分享

那个block是我用来回调的,你们这里也可以用delegate.

.m文件是这样的.

技术分享

技术分享

除了手势的那个方法不太好懂以外,其他的很简单,就是设置阴影的一些属性,加给cell的contentview设置一个长按手势.

长安手势方法里的意思其实就是当用户长按cell之后做一个截图,当用户右移一定程度时,做一个回调.

我们的viewcontroller里的代码是这样的.

技术分享

技术分享

技术分享

ok,到这里,我们的所有代码搞定了。如果这里让你全部使用代码写,你要花多久呢?

demo的地址.

 
 

一个Demo展示Storyboard的强大

标签:

原文地址:http://www.cnblogs.com/Camier-myNiuer/p/4378572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!