一个Demo展示Storyboard的强大
一个Demo展示Storyboard的强大
今天我通过完成一个长按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的地址.