当前位置: 首页 > 科技观察

一个Demo展示Storyboard的威力

时间:2023-03-12 09:29:37 科技观察

今天,我完成了一个长按删除单元格的Demo,让大家看看熟练使用storyboard和Autolayout,可以提高你的开发速度和效率。废话不多说删除动画,新建一个SingleViewApplication。进入storyboard,选择我们唯一的viewcontroller,找到xcode的菜单栏,Edit->EmbedIn->NavigationController。这时候storyboard会自动为你生成一个navigationController,把viewcontroller说成rootViewcontroller。单击视图控制器中的导航栏。在右侧面板中找到这些属性,找到标题并将标题更改为City。导航栏的标题已显示为城市。将tableview拉到viewcontroller,并将约束更改为此。右键单击表视图的约束对于我们的表视图,将委托和数据源设置为我们的视图控制器。右击tableview设置proxy和datasource现在,既然设置了delegate和datasource,那么一些必须实现的方法就必须写在viewcontroller中。#p#这时候我们还少了一个cell,选中tableview,找到右边的panel。添加单元格原型这时候我们的tableview中会出现一个空白的单元格。我们这时候就可以使用系统自定义的基础样式了。将identifier改为basicCellbasicCell,然后我们需要实现tableview的代理方法才能运行。运行效果总是耗时不超过2分钟。手写所有代码需要多长时间?为了实现第一张图片中的单元格,我们需要做一些事情。1.给cell添加两个view,bottomview专门用来显示阴影,第二个view在上面,圆角。(为什么要有专门显示阴影的view,百度不明白)。并且第一个视图的宽度和高度小于第二个视图。2、两个view上必须有一个imageView和两个label。这个拉线做约束很简单。上图就行了。首先将我们的单元格的类型更改为自定义。然后将标识符更改为“customCell”。创建一个新类,继承自UITableViewCell,命名为CustomTableViewCell。与我们故事板中的单元相关联。(这些操作相信大家都会)首先添加一个阴影视图(shadowView)。将视图直接拖到我们的单元格中。然后添加一个容器视图(containerView),用来放置我们的imageview和两个标签。通过这个约束,可以看到我们的containerview明显比shadowview大。#p#然后把我们的图片和两个标签放在下面的位置。这里没有carelabel约束,只需要注意imageView,先给imageView添加如下约束。意思是top和bottom以及containerviewpadding为0,leftmargin为0,然后右键选择imageview,拉一条线到我们的containerview。出现这个菜单里面选择equalWidth,然后到右边找到我们的constraint,双击,更改内容。这个约束的意思是imageView的宽度适度的保持在父view宽度的十分之三。现在我们的cell.h文件就是这样了。那个block就是我用来回调的,这里也可以用delegate。m文件是这样的。除了手势的方法不太好理解,其他的都很简单,就是设置阴影的一些属性,为cell的contentview添加设置一个长按手势。长安手势法中的意思其实就是用户长按cell之后进行截图,当用户向右移动到一定程度时,进行回调。我们的viewcontroller中的代码是这样的。好了,到这里,我们所有的代码都搞定了。如果让你把所有的代码都写在这里,你要花多长时间?演示地址。