一个Demo展示Storyboard的强大.docx
- 文档编号:6865930
- 上传时间:2023-01-11
- 格式:DOCX
- 页数:12
- 大小:2.22MB
一个Demo展示Storyboard的强大.docx
《一个Demo展示Storyboard的强大.docx》由会员分享,可在线阅读,更多相关《一个Demo展示Storyboard的强大.docx(12页珍藏版)》请在冰豆网上搜索。
一个Demo展示Storyboard的强大
一个Demo展示Storyboard的强大
删除动画
废话不多说,新建一个SingleViewApplication.
到storyboard选中我们唯一一个的viewcontroller,找到xcode的菜单栏,Edit->EmbedIn->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专门来显示阴影不懂的自行XX).而且第一个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按如下位置放置.
这里不用carelabel的约束,需要注意的只有imageView,先给imageView加如下约束.
意思就是上下与容器viewpadding为0,左边距为0,然后右键选中imageview,拉一根线到我们的容器view.出现这个菜单
选中equalWidth,然后去右边找到我们的这个约束,双击,内容改为.
这个约束的意思就是imageView的宽度适中保持为父view宽度的十分之三.
现在我们的cell的.h文件是这样的.
那个block是我用来回调的,你们这里也可以用delegate.
.m文件是这样的.
除了手势的那个方法不太好懂以外,其他的很简单,就是设置阴影的一些属性,加给cell的contentview设置一个长按手势.
长安手势方法里的意思其实就是当用户长按cell之后做一个截图,当用户右移一定程度时,做一个回调.
我们的viewcontroller里的代码是这样的.
ok,到这里,我们的所有代码搞定了。
如果这里让你全部使用代码写,你要花多久呢?
demo的地址.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 一个 Demo 展示 Storyboard 强大
![提示](https://static.bdocx.com/images/bang_tan.gif)