一个Demo展示Storyboard的强大
本文转载至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的强大的更多相关文章
- 通过写一个Demo展示C#中多种常用的集合排序方法
不多说,程序很简单,就是将集合中的数据进行排序,但使用到的知识点还是比较多的,大牛勿喷,谨献给初学者!直接上程序吧! namespace Demo { /// <summary> /// ...
- 白盒测试之gtest第一个demo
认识gtest工具后,关于它的使用,下面将用一个demo程序演示一下gtest的用法以及成果展示. 一.需要测试的C++代码: #include "myfunction.h" // ...
- angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- lesson5:Condition的原理分析及demo展示
Condition 将 Object 监视器方法(wait,notify,和notifyAll)分解成截然不同的对象,以便通过将这些对象与任意Lock实现组合使用,为每个对象提供多个等待 set(wa ...
- Android Studio精彩案例(六)《使用一个Demo涵盖补间动画所有知识》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 元旦假期里,闲的无事,看到美团加载数据的动画,就突想写个Demo把动画知识集成一下.后来想了想,还是直接用一个Demo来把所有动画知识 ...
- (1)shiro简介和第一个demo
之前一直在用shiro开发,不过只是会使用,并没有深入了解,最近有时间学习了一下,把最近学习所得分享一下. shiro简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授 ...
- 分享知识-快乐自己:初始 Struts2 (基本概念)及 搭建第一个Demo
1):struts2 的基本概念: 1-1):Struts2 是什么? 1.Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2 ...
- Android中Service的一个Demo例子
Android中Service的一个Demo例子 Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding. 本文,主要贴代码,不对Servic ...
- 初识nginx之第一个demo
商城项目做了一个多月了,想到必须用到负载均衡,简单了解了一下nginx,首先分享第一个demo,五月份上线后,会继续分享一系列相关知识. 在nginx根目录下,用了一个园友的批处理文件nginx.ba ...
随机推荐
- 【BIEE】MDS-01377:无法从使用 JNDI 名称 “jdbc/mds/owsm” 配置的数据源获取数据库连接
这是一次意外关机情况,BIEE环境是window server2008,但是一次意外情况,BIEE自动关机了,造成开启成功新启动BIEE产生如下错误: 错误产生后,倒腾了半天,并没发现什么问题,只是通 ...
- WebSphere监控软件 TPV(Tivoli Performance Viewer)的缺点
TPV的缺点 大家都知道 IBM 的 WebSphere Application Server(WAS)在v5之后自带有TPV(Tivoli Performance Viewer) 用来监控W ...
- C++14系列(1):Linux下C++14开发环境配置
g++安装 參考地址: http://sysads.co.uk/2014/07/install-gcc-gnu-4-9-1-on-ubuntu-14-04/ 当前Ubuntu的LTS版本号为14.04 ...
- android 关于setWidth()和setHeight()没反应的问题
在android开发过程中,对于控件的高度,宽度,虽然在xml中用android:layout_height="match_parent"设置了 高度(match_parent ...
- linux任务计划cron
linux任务计划cron 1.crontab命令任务计划配置文件 [root@bogon ~]# cat /etc/crontab SHELL=/bin/bash PATH=/sbin:/bin:/ ...
- POI操作Excel导入和导出
Apache的POI组件是Java操作Microsoft Office办公套件的强大API,当中对Word,Excel和PowperPoint都有支持,当然使用较多的还是Excel.由于Word和Po ...
- .Net MVC ViewBag
ViewBag用来做视图的值绑定,我不清楚是不是这么称呼.之前看过安卓的值绑定做法,mvc直接动态类型,瞬间逼格满满 Controller: public class HomeController : ...
- www--摘录图解TCP/IP
万维网,www,world wide web,也称web.将互联网中的信息以超文本的形式展现的系统.可以显示www信息的客户端软件叫做web浏览器. www内容 www定义了3个重要的概念,它们分别是 ...
- Pyspider学习
简介 国人编写的强大的网络爬虫系统并自带强大的WebUI,采用Python语言编写吗,分布式架构.支持多种数据库后端 pyspider中文网站:http://www.pyspider.cn/ 源码网址 ...
- 理解Java中字符流与字节流
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个"流动的方向",通常可 ...