开发笔记 - storyboard的一些初级使用

简介: 开发笔记 - storyboard的一些初级使用

本来想写一些高大上的东西,例如运行时机制,以及关于上架方面的新的.想了好久,我认为自己的水平还处于UI学徒的汪洋大海中 ,开发张的很多很多问题,其实你只需要一个谷歌浏览器,提问的当很多都是手到擒来的.话说还是有很多人,学历高,开发中的问题也多,不善于总结.甚至只需要你百度一下,谷歌搜索就能解决的问题,还是拿到群里,各种提问,苦逼的是,回答的时候,回答者,除非自己遇见过的惊天大坑,还是要依赖谷歌来回答.算不算是一种讽刺? 好像话又离题了.我认为现在如果是初级程序员,完全不是面向对象编程,而是面向搜索引擎编程,只要get搜索的能力,那么%99.9999 的需求以及功能都是可以解决的.

为熟而已!

扯了这么多,还是拿一点最初级的知识.献给大家吧. 一来学习是为了分享,分享的同时也是提升,输出.现在已经不喜欢去copy一些技术文来糊弄读者,一是对自己的不尊重,而是对原创作者尊重.这些我是顿时领悟到的.只有自己写,自己输出才是自己的.不怕写的不好,写的好了自然就有人看,写的不好,给自己看~~~

一般人用布局两种StoreBoard跟纯代码.那种优劣?

玩不转StoreBoard的都喜欢用纯代码.不解释.

(1)StoreBoard优点:

Auto Layout,做适配很方便;

多语言很方便;

静态TableView,CollectionView极其方便;

最重要的是直观,结构清晰,一目了然!

冲突问题:storyboard一般只是用于展示页面布局,布局不是个经常变动的东西,如果需要修改,修改的次数也非常的少。一般在团队中专门约定几名负责人专门修改页面布局就可以了。如果真的需要很多人改,请拆分storyboard。

性能问题:性能的瓶颈真的在这里吗?有这些时间多多优化一下代码,多使用异步block的效果更为明显吧。

大型项目的问题:大型项目中细分storyboard不仅可以解决打开卡顿的问题,也会使产品线更为直观。

复用问题:storyboad的确不能复用,可复用的组件可以用NIB进行封装,然后引入storyboad。

(3)什么时候使用storyboard?

组织多种view的层级关系,也就是传说中的segue。使用一些列表或表格单元的模板的时候。能使用storyboard的情况下尽量用storyboard。

什么时候不建议使用storyboard?

动态或复杂布局,这时候可能需要用代码来计算相关view的位置。如果一个view已经用NIB或代码实现

(4)什么时候使用nib?

模态框(如登录提示什么的)可复用视图组件或模板

什么时候不推荐使用nib?

有动态内容的视图

不方便在IB中进行设计的试图

(5)什么时候使用代码?

纯代码好处就是灵活,接手项目的时候好改。缺点,很明显慢。

什么时候不推荐使用代码?

什么时候使用代码都是一个好方法,但不一定是最好的。

纯代码可以使用masonry,可视化编程使用AutoLayout

我自己的项目可以说是所有界面均有SB和XIB 组合而成.很多人说storyboard的跟XIB不好,实际是因为玩的不够溜而已

下面我来介绍一下storyboard 的几个常用的用法


image.png

上面这张图就是传说中的连线 ,segue 简称色鬼 你可以用它来传值,也可以用它来跳转控制器

- (IBAction)goAction:(id)sender

{

// 根据指定线的ID跳转到目标Vc

[self performSegueWithIdentifier:@"SendValue" sender:self];

}

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

// segue.identifier:获取连线的ID

if ([segue.identifier isEqualToString:@"SendValue"]) {

// segue.destinationViewController:获取连线时所指的界面(VC)

ReceiveViewController *receive = segue.destinationViewController;

receive.name = @"Garvey";

receive.age = 110;

// 这里不需要指定跳转了,因为在按扭的事件里已经有跳转的代码

// [self.navigationController pushViewController:receive animated:YES];

}

}


image.png

除此之外你还可以这样用


image.png

你可能不知道上面的图有什么卵用?


image.png

再来看一下方法内部的实现

image.png

你看谁说SB不好跳转控制器啥的.写个方法放在基类,只要保持规范,随便你跳跳跳!

在看下SB做布局


image.png


image.png

在这里,你可以直接给控件做布局, top left button right 上左下右

宽,高,自身比例

image.png

水平,垂直居中.看英文跟符号你就能知道意思了.

image.png

在这里你可以做相对布局了.

一般,我的做法是直接 父控件 做等宽高

然后MultiPlier 不是有一个1 吗?

这里就是你可以调整比例 从0 -1  

至于怎么算比例,例如 我想做一个view 大小100 并且在任何6显示正常 在5s 跟6S 相对根据比例来增大怎么做呢?

如果你直接写死宽度 100 跟高度100

那么恭喜你,在6是正常的.在5S就会看起来大了一点,因为机型跟分辨率高了.在6S就更小了.

是不是有这种情况.那么我用SB怎么做呢?先看分辨率机型图

iphone5屏幕尺寸320 x 568屏幕分辨率640x1136

iphone6屏幕尺寸375 x 667屏幕分辨率640x1334

iphone6Plus屏幕尺寸414 x 736屏幕分辨率1080x1920。

image.png

image.png


设置的宽度跟高度,都是跟View去做的等宽高.

我是以6的原型去参照. 那么它就会去算比例,在6s的时候, 高度就会变成屏幕高度 * (100/667.0)

宽度就会变成 屏幕宽度*(100/375)

你看这样他就会根据机型来觉得view的宽高,从而显示不同的宽高.是不是很灵活呢?

image.png

这个选项,决定了会不会参与编译.如果你不勾选,那么就不会参与编译.

image.png

简单点说就是automaticallyAdjustsScrollViewInsets根据按所在界面的status bar,navigationbar,与tabbar的高度,自动调整scrollview的 inset,设置为no,不让viewController调整,我们自己修改布局即可~

下面我还要花20000+ 的文字来描述SB 的好用之处.自己脑补去吧,任何技能你想要get记住,只能多谷歌,不要去百度.自己多去练习,真的想别人免费给你写文章文字来告诉你技能?只能告诉你想多了,哈哈哈.一切再好的文章不如亲手实操几遍来的快.


相关文章
|
5月前
|
前端开发 JavaScript 安全
中级前端知识进阶
【7月更文挑战第6天】深化前端技能涉及巩固HTML/CSS/JS基础,精通React/Vue/Angular等框架,理解前端工程化原理如Webpack和性能优化。扩展技术边界至跨平台开发、Web性能与安全,关注新趋势如PWA和Serverless。通过实战项目和社区分享加速成长。
54 1
|
C# C++ Windows
2000条你应知的WPF小姿势 基础篇<28-33 WPF启动故事>
2000条你应知的WPF小姿势 基础篇<28-33 WPF启动故事>
72 0
|
存储 设计模式 编解码
WPF春招面试题2
WPF春招面试题2
279 0
|
XML 设计模式 前端开发
WPF春招面试题1
WPF春招面试题
299 0
C#编程-127:WPF初级入门
C#编程-127:WPF初级入门
C#编程-127:WPF初级入门
|
编解码 小程序 前端开发
小程序开发-第一章第五节从px到rpx-全栈工程师之路-中级篇
小程序开发-第一章第五节从px到rpx-全栈工程师之路-中级篇
142 0
小程序开发-第一章第五节从px到rpx-全栈工程师之路-中级篇
|
开发工具 git
小白初级入门Git教程(一)
声明:本篇文章适合刚要接触Git,使用Git的小伙伴们,大神们请轻喷。另外文章总结并参照了廖雪峰老师的讲解的知识点,有兴趣的小伙伴可以去了解了解。
124 0
|
Web App开发 信息无障碍 UED
【编译】UI设计师必读的13篇文章
【CSDN编译】导读:UI界面的设计目标是能够轻松吸引用户眼球并使之具有实效性。在实现目标方面,它通常被称为用户中心设计。一个好的用户界面设计,便于帮助设专注于网站的建设,而图表设计通常用来增强可用性。
1194 0
|
C# 算法 移动开发
WPF 画心2.0版之元旦快乐
原文:WPF 画心2.0版之元旦快乐  2017年元旦已经到了,想做一个祝福语的窗口,就把上一篇画心的程序改了改,变成了如下界面。    说下改动的地方,首先窗口没有标题栏了。 MainWindow.
837 0