UI实战
CG-L
Stay Hungry,Stay Foolish.
展开
-
简单的加法计算器
原创 2016-03-21 17:36:43 · 884 阅读 · 0 评论 -
简单的登陆界面
原创 2016-03-21 17:36:45 · 292 阅读 · 0 评论 -
图片的移动和缩放
原创 2016-03-21 17:36:48 · 390 阅读 · 0 评论 -
应用:汤姆猫
今日笔者做了一个汤姆猫的小 demon,发现了其中不少的问题。因为也是初次做 UI,所以很多东西都懂得比较慢,也觉得知识点很多很碎。以下是笔者的一些代码截图,仅供参考。 有一个注意点:以下两图要说明的是 JPG 文件如果直接拖到 assets 文件中使用的话,在优化内存时候会出现对象变空的现象,换句话说就是不能通过路径访问的方法来获取到图片,但是可以用文件名的方法来获取(此事我也搞不懂,也不知原创 2016-03-21 17:36:56 · 810 阅读 · 0 评论 -
strong&weak 的一些注意点
原创 2016-03-21 17:36:59 · 270 阅读 · 0 评论 -
应用:搭建九宫格界面(框架搭建)
首先是添加必要的素材文件 效果图(比较粗糙,下一篇文章优化)原创 2016-03-21 17:37:02 · 567 阅读 · 0 评论 -
应用:九宫格界面(实化内容)
原创 2016-03-21 17:37:04 · 478 阅读 · 0 评论 -
应用:九宫格界面(块动画实现)
效果图:文字弹出并且逐步消失原创 2016-03-21 17:37:07 · 488 阅读 · 0 评论 -
应用:九宫格界面(字典转模型)
新建一个类文件,将字典的内容转化成一个模型,便于写代码时能够直接提示出选项,不容易手动敲错。建立工厂方法可以让代码看起来更加简洁。原创 2016-03-21 17:37:18 · 333 阅读 · 0 评论 -
应用:九宫格界面(XIB)
通过创建 XIB 文件,在 XIB 文件中对每个View进行设计,添加控件,构建出一个 View 的模型。然后通过调用函数将 XIB 加载,用一个 View 对象进行接收,再添加到界面中即可实现。XIB 多用于一些画面结构重复的情况,从而快速的构建出一个 View,不用手动敲写添加。同时,使用了 XIB 来控制界面的视图也是对主代码的一次简化。原创 2016-03-21 17:37:20 · 362 阅读 · 0 评论 -
应用:九宫格界面(优化)
新建一个 View 的文件,把 XIB 中的 Class 与这个文件进行关联。用“连线”的方法,在新建的 View 文件中创建出三个属性变量。回到主代码中,导入头文件后就可以直接创建 View 对象,通过访问对象属性,从而实现界面想要的内容。原创 2016-03-21 17:37:23 · 492 阅读 · 0 评论 -
应用:九宫格界面(进一步优化)
将新建 View 文件中.h 里面的属性转化到.m 中,变成私有属性。导入 appinfo 的头文件,然后添加一个 appinfo 的成员变量,对其重写 set 方法。通过“连线”的方式添加一个按钮的监听事件。添加一个类方法。原创 2016-03-21 17:37:25 · 488 阅读 · 0 评论 -
常用的一些快捷键
新建 shift + cmd + n 新建项目 cmd + n 新建文件视图 option + cmd + 回车 打开助理编辑器 cmd + 回车 显示主窗口 cmd + 0 导航窗口 option + cmd + 0 工具窗口 在.m & .h之间切换 control +原创 2016-03-21 17:37:28 · 239 阅读 · 0 评论 -
应用:超级猜图(需求分析)
原创 2016-03-21 17:37:31 · 337 阅读 · 0 评论 -
应用:超级猜图(界面搭建和图像放大,storyboard)
主 view 尺寸用了414*736 效果图原创 2016-03-21 17:37:33 · 312 阅读 · 0 评论 -
应用:超级猜图(图像缩小,动画设置和一个细节问题)
此处运用了首尾式动画来做图像缩放,大家感受一下。 然后改用快动画来实现图像的缩放功能。 此处是对快动画进行一个优化,使得点击图片和按钮同样达到图像缩放的功能,采用懒加载和 alpha 的值来控制。当 alpha 的值为0的适合系统不监听该按钮,所以当程序运行时,点击空白处不会有反应,但是“_cover”经过一次加载后是一直存在的。 一个细节问题:在编辑时候,系统是默认对所有的按钮都添加高亮属性的,原创 2016-03-21 17:37:36 · 386 阅读 · 0 评论 -
应用:超级猜图(字典转模型,重写 description 方法)
首先用此前用过的方法进行一次字典转模型。 关于重写 description 方法(打印“_question”,跟踪明细信息 ): KVC 方法做字典转模型:cocoa 的大招:[self setValuesForKeysWithDictionary:dict];原创 2016-03-21 17:37:39 · 431 阅读 · 0 评论 -
应用:超级猜图(答案按钮&选项按钮搭建)
首先是将 storyboard 里面的控件拖线过来 controller 中。 对“下一题”这个按钮添加事件方法,下图中分别用了三个方法来实现三个功能。 在创建答案按钮和选项按钮时候需要在 storyboard 中另外创建两个 view,目的是方便确认按钮的位置。 效果图原创 2016-03-21 17:37:44 · 326 阅读 · 0 评论 -
应用:超级猜图(胜负判断&提示功能)
答错字体变红色 按下提示把之前错误的答案清空,提示显示第一个字&扣分 答对了 加分&字体变蓝 然后跳到下一题原创 2016-03-21 17:37:47 · 384 阅读 · 0 评论 -
练习:喜马拉雅界面
原创 2016-03-21 17:37:52 · 761 阅读 · 0 评论 -
练习:大图缩放
原创 2016-03-21 17:37:55 · 305 阅读 · 0 评论 -
练习:图片轮播
原创 2016-03-21 17:37:58 · 250 阅读 · 0 评论 -
练习:图片轮播(设定自动滚动功能)
原创 2016-03-21 17:38:00 · 361 阅读 · 0 评论 -
练习:图片轮播(处理两个 bug)
Bug:1、在原来的代码中,当 scrollView 进行手动滚动时候,定时器是会一直续积累时间的,当手动滚动结束时候,定时器会释放之前积累的操作,从而造成图片直接转跳的情况2、当滚动文本框的时候,定时器是无法自动滚动的。 自动滚动图片和滚动文本框都属于 UI 操作,而且都属于主线程操作,所以在没有进行代码设定前会出现文章开头讲述的 BUG ,但是通过分流操作,改变默认模式后,此 BUG 就会消除原创 2016-03-21 17:38:03 · 446 阅读 · 0 评论 -
创建第一个UITableView
原创 2016-03-21 17:38:06 · 220 阅读 · 0 评论 -
练习:汽车列表
tableView 建立数据源连接的技巧,直接在 storyboard 界面拖线 字典转模型的代码:原创 2016-03-21 17:38:08 · 424 阅读 · 0 评论 -
练习:LOL 英雄列表(涉及内存优化)
用上一篇文章的方法去设置 tabelView 里面的内容,在实际运行时,每当向下滑动屏幕,都有新的 cell 进入和旧的 cell 撤出屏幕。当我们再次向上滑动屏幕时,系统是重新创建 cell,而不是使用原来的 cell。因此,在不停的滑动中,会产生短暂而大量的内存消耗,降低的手机的性能。因此,我们要对 cell 的设置进行改造。用重用的方式去编写 cell。对 cell 进行优化:在 cell原创 2016-03-21 17:38:11 · 410 阅读 · 0 评论 -
cell的一些属性设定
设置代理可以用拖线的方法设置 cell 的行高 效果图: 注意:宽度取决于屏幕的宽度。原创 2016-03-21 17:38:13 · 978 阅读 · 0 评论 -
练习:汽车列表(模型嵌套模型的做法)
原创 2016-03-21 17:38:16 · 487 阅读 · 0 评论 -
练习:LOL 英雄列表(加入弹框修改英雄名称)
此图是代表ios8前后创建弹框的方法对比: 设置弹框内容:列表的实现代码就不详细列出了,此处仅对弹框部分实现代码做展示。调用了 UITableViewDelegate 和 UIAlertViewDelegate 代理协议中的方法。 用iOS8以后的方法做弹框修改名字的效果原创 2016-03-21 17:38:19 · 636 阅读 · 0 评论 -
练习:团购界面搭建(xib 封装,刷新数据增加 cell)
整体思路梳理: 1、拖建 tableView,拖线到 ViewController 界面,创建一个普通数组(“tg”)用于记录数据 2、拖图片和 plist 文件 3、创建LCGTgModel类来建立一个模型,并写入 kvc 4、懒加载“tg”,并进行字典转模型 5、设定tableView 的行数和 cell 内容 6、发现用 xib 对 cell 内容进行设置原创 2016-03-21 17:38:24 · 471 阅读 · 0 评论 -
练习:团购界面搭建(用代理方法实现加载更多数据)
续上一篇继续扩展: 这一篇主要是对LCGFooterView类中的按钮点击事件进行优化,使代码更具有延展性。思路:1、在被代理对象(LCGFooterView类)中写入代理协议,添加代理方法和添加代理属性;2、在代理对象(ViewController)中 遵循代理协议,设置代理,实现代理方法;3、在按钮点击事件中加入代理实现的方法,注意要用 if 来判断代理对象是否实现了方法,不实现不调用原创 2016-03-21 17:38:27 · 437 阅读 · 0 评论 -
练习:团购界面搭建(实现顶部视图)
原创 2016-03-21 17:38:29 · 318 阅读 · 0 评论 -
练习:微博界面搭建(用代码自定义 cell)
storyboard 文件:ViewController.h: LCGWeiBlogModel.h:LCGWeiBlogModel.m: LCGWeiBlogCell.h:LCGWeiBlogCell.m: ViewController.m:原创 2016-03-21 17:38:32 · 375 阅读 · 0 评论 -
练习:微博界面搭建(抽取 frame 模型)
LCGWeiBlogFrame.h: LCGWeiBlogFrame.m: LCGWeiBlogCell.h: LCGWeiBlogCell.m:ViewController.m:原创 2016-03-21 17:38:34 · 369 阅读 · 0 评论 -
练习:QQ 聊天界面
界面搭建: 关 于通知中心的一些知识: ViewController.m LCGMessagesModel.h LCGMessagesModel.m LCGMessageCell.h: LCGMessageCell.m: LCGMessageFrame.h: LCGMessageFrame.m:原创 2016-03-21 17:38:39 · 425 阅读 · 0 评论 -
练习:静态 cell 设置
原创 2016-03-21 17:38:44 · 313 阅读 · 0 评论 -
练习:QQ 好友列表
文件分组结构: 大模型LCGGroupFriendM.h: LCGGroupFriendM.m:小模型LCGFriendM.h: LCGFriendM.m: ViewController.h:ViewController.m: 描述 headView 的LCGFriendHeadView.h: LCGFriendHeadView.m 描述 cell 的LCGFriendCell.h: LCGFri原创 2016-03-21 17:38:47 · 444 阅读 · 0 评论 -
练习:新 app 管理(用 storyboard 界面设置 cell,cell 的重用机制)
ViewController.h: ViewController.m:LCGAppModel.h: LCGAppModel.m: LCGAppCell.h: LCGAppCell.m: 在设置 tableViewController 之后可以直接在 storyboard 中设置 cell 的样式,然后用文件描述 cell(设置内容),最后在控制器中调用 cell原创 2016-03-21 17:38:50 · 596 阅读 · 0 评论 -
autoReszing(了解)
原创 2016-03-21 17:38:55 · 544 阅读 · 0 评论