1.UI初认识
前节:app是什么?
app英文全称:application 应用程序,简称应用。也就是手机应用的简写
出处:http://www.cnblogs.com/mcj-coding/p/5098254.html QQ:853740091
1.UI
UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。UI还有其它的意义,如Unit Interval,Univ of Iowa,Unlock Instruction,Urgent Interrupt。在iOS中UI指的就是用户界面
1.1 UI举例
UI 字面上看是用户和界面,还包括用户和界面之间的交流。如果游戏机是我的程序,那么操作按键就是UI。我们睁开眼看到的世界就是世界给我们展示的UI
1.2 UI的重要性
用户对程序的第一感觉就是UI感觉(男女见面的第一印象,还是比较重要的)。用户再使用过程中,和程序交流主要是通过UI,如果UI展示不清楚,交互比较别扭,会直接影响用户的体验。而用户体验是一个app成败的关键元素之一
1.3 UI设计
UI 设计需要专业的培训,这里就不说了,一般公司有自己UI设计师
2. 创建UI的工具就是---Xcode的使用
2.1 打开Xcode

Get started with a playground(可视化编程)
Create a new Xcode project (创建一个新项目)
Check out an Existing project (打开一个存在的项目)
2.2 选择Create a new Xcode project (创建一个新项目)
五个其中四个是模板(高考作文模板,虽然快速但是缺乏新意,一般自己编写,可以任意添加自己喜欢的东西,删除自己不喜欢的)
选择SingleView Application这个模板 --点击 next

2.3 添加项目名称和项目的详情信息
product Name :项目名称(理论支持中文,用后会出问题,图片加载不出来等)
Oranization Name:开发者的名称(会在每个.h 和 .m文件中显示出来(演示))
Oranization Identifiter :app企业标识(公司网址倒写 com.baidu.www(网址唯一))
bundle Identifiter :Oranization Identifiter + product Name; 开发证书标识,要和开发证书名字一致
use core Data : 会自动生成数据管理相关代码
我们当前只需要添加一个项目名称就行---点击 next (这样我们项目就创建完成了)

3. Xcode 面板介绍
3.1【导航区域】

最上面从左到右依次是:
项目导航(快速的找到文件和类)
符号导航 (快速的找到类的方法、属性)
搜索导航(输入一个字符,项目只要含有这个字符的的都会显示出来)
问题导航 (程序有警告和错误时,就有在这显示)
单元测试导航
调试导航/线程导航 (导航面板统一显示应用程序调试状态在或者出错情况下堆栈的调试状态,CPU的使用情况,以及相关的网络和内存信息)
断点导航 (快速编译、禁用、删除断点)
日志导航 (编译调试日志和源代码变更日志)
快捷键 Command +1、2………..
3.2【编辑区域】

3.3【通用区域】
查看区/属性区 (用到时再说)

库区域

从左到右依次为:
文件库(里面包含了我们要创建的各种文件)
代码片段库 (自己可以快速定义代码片段 和 更改系统自带的代码片段的快捷提示)
UI对象库 (包含了各种我们要使用的UI控件)
媒体库 (可以显示我们项目中使用的多媒体文件)
【调试区域】 (左边显示项目中的变量和属性值等,右边显示我们打印的信息)

1.UI初认识的更多相关文章
- Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)
前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...
- Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信
背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- Flutter 即学即用系列博客总结篇
前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...
- WWDC15 Session笔记 - Xcode 7 UI 测试初窥
https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...
- day12—jQuery ui引入及初体验
转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...
- 结对编程——带UI的小初高数学学习软件
一.简介 本次项目要求: 1.所有功能通过图形化界面操作,可以是桌面应用,可以是网站(编程语言和技术不限): 2.用户注册功能.用户提供手机号码,点击注册将收到一个注册码,用户可使用该注册码完成注册: ...
随机推荐
- DayPilot 7.9.3373 去掉DEMO
更新升级倒是蛮快的,多了Gantt图,此处下载先: http://files.cnblogs.com/files/pccai/DayPilot_2.0_4.0_7.9.3373.rar
- telnet建立http连接获取网页HTML内容
利用telnet可以与服务器建立http连接,获取网页,实现浏览器的功能.它对于需要对http header进行观察和测试到时候非常方便.因为浏览器看不到http header. 步骤如下: 1. 运 ...
- Ubuntu 14.04 无线网卡驱动安装
安装了Ubuntu最新版本 14.04 之后,发现无线网卡不能使用,偿试安装驱动后,问题解决. 首先确定无线网卡类型: lspci -vnn -d 14e4: 比如我的网卡类型为 06:00.0 Ne ...
- Android网络文件下载模块整理
一.知识基础 tomcat服务器配置 理解http协议 理解javaIO操作相关知识 SDcard操作知识 Android 权限配置 二.实现步骤 1.从网上获取资源 public String do ...
- Java Web的web.xml文件作用及基本配置(转)
其实web.xml就是asp.net的web.config一个道理. 说明: 一个web中完全可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的. web.xml文件是用来 ...
- Samba服务配置简明笔记
内部服务器之间拷贝数据,用root账号访问,没有做更复杂的设置. 1.用YUM安装samba服务器端及客户端: [root@tenjs05 init.d]# yum install samba sam ...
- Ubuntu学习总结-07 Nodejs和npm的安装
一 安装NodeJS 1 下载nodejs源码 从以下网址下载最新的Nodejs源码 https://nodejs.org/en/download/ 2 安装依赖的 python,gcc,g++ 函数 ...
- BZOJ1483: [HNOI2009]梦幻布丁
传送门 名字起得很高端实际上很简单的算法hhh 启发式合并 简单讲就是一些合并一堆队列的题可以用启发式合并,或者说这是一个思想.每次把小的合并到大的部分,均摊复杂度$O(MlogN)$. //BZOJ ...
- WinForm------TextEdit只能输入数字
代码: this.textEdit1.Properties.Mask.EditMask = @"\d+"; this.textEdit1.Properties.Mask.MaskT ...
- 多光谱图像数据库, Multispectral images databses
1. https://scien.stanford.edu/index.php/hyperspectral-image-data/ 2. http://www.cs.columbia.edu/CAVE ...