文档章节

iOS10 UI设计基础教程

大学霸
 大学霸
发布于 2016/11/10 10:56
字数 1214
阅读 9
收藏 0
点赞 0
评论 0

iOS10 UI设计基础教程

介绍:本教程针对iOS初级开发人员,基于iOS 10系统,使用Swift 3.0语言讲解如何进行UI设计。本教程内容涵盖UI基础构成、UI元素、自动布局、自适应UI、UI动画、UI交互和定制空控件等内容。

试读下载:http://pan.baidu.com/s/1jHRFrFo

目  录

第1章  UI基础 1

1.1  窗口 1

1.1.1  窗口的内容 1

1.1.2  设置起始窗口 1

1.1.3  窗口的工作方式 3

1.2  视图 4

1.2.1  改变视图的外观 4

1.2.2  视图的可见性 4

1.2.3  禁用视图与用户的交互 5

1.2.4  视图的几何形状 6

1.2.5  视图的边界 7

1.2.6  视图的框架 7

1.2.7  视图的中心位置 9

1.3  UI层次结构和Views继承 11

1.3.1  子视图和父视图 11

1.3.2  管理层次结构 12

1.3.3  视图和子视图的可见性 15

1.3.4  层次结构的事件 17

1.3.5  视图调试 18

1.3.6  视图的绘制 22

1.3.7  视图控制器和视图 23

1.3.8  视图的生命周期 23

第2章  UI组件概述——UIKit 27

2.1  文本元素 27

2.1.1  显示文本——普通文本/格式化文本 27

2.1.2  改变文本的外貌 29

2.1.3  单行截断 30

2.1.4  多行文本 31

2.1.5  文本的固定宽度 32

2.1.6  修改文本字体 33

2.1.7  接收用户输入的响应流程 35

2.1.8  用户手动设置输入的文本的格式 35

2.1.9  提示 36

2.1.10  边框样式 40

2.1.11  监听输入 41

2.2  大量文本显示 43

2.2.1  禁用选择 43

2.2.2  自动识别 43

2.2.3  识别类型 44

2.2.4  图文混排 45

2.3  键盘 47

2.3.1  键盘通知 47

2.3.2  键盘输入类型 47

2.4  按钮与选择 52

2.4.1  按钮与用户交互 52

2.4.2  开关选择 54

2.4.3  非精准值的选择 55

2.4.4  多选一 56

2.4.5  精确选择值 60

2.4.6  步进控制 61

2.5  进度条和状态提示 64

2.5.1  进度条 64

2.5.2  状态提示 65

2.6  图像 66

2.6.1  图像视图支持的图像格式 66

2.6.2  让图像适用于多个屏幕 66

2.6.3  图像渲染 68

2.6.4  图像的拉伸 70

2.7  滚动显示 72

2.7.1  滚动视图的组成 73

2.7.2  滚动视图的功能 73

2.7.3  对滚动视图的设置 73

2.7.4  拦截与用户交互时的信息 73

2.7.5  手势缩放 74

2.8  管理和显示结构化数据 75

2.8.1  单列数据 75

2.8.2  多列数据 77

2.9  界面批量定制 82

第3章  自动布局 84

3.1  自动布局的实现方式 84

3.2  构建约束 84

3.2.1  创建一个约束——Ctrl + Drag 84

3.2.2  创建一个约束——Auto Layout Menu自动布局功能按钮 86

3.2.3  查看约束 89

3.2.4  验证约束的正确性 90

3.3  重置约束 91

3.4  内置内容尺寸 93

3.5  屏幕大小自适应 97

3.5.1  考虑因素 97

3.5.2  位置约束 99

3.5.3  大小约束 104

3.6  通过代码更新约束 105

3.7  使用VFL实现自动布局 108

3.7.1  VFL介绍 108

3.7.2  初始化视图 110

3.7.3  添加约束数组 111

3.7.4  设置多个视图 113

3.7.5  视图之间的关系 114

第4章  自适应UI 117

4.1  Size Classes介绍 117

4.2  UI Trait 120

4.2.1  Trait集合和环境 120

4.2.2  使用Trait集合 120

4.3  使用Size Classes构建布局 121

4.3.1  构建布局 121

4.3.2  显示效果 125

4.3.3  使用Image Assets 126

4.4  iOS动态字体 129

4.4.1  配置文本尺寸 129

4.4.2  文本样式 131

4.5  使用UIStackView 133

4.5.1  创建UIStackView 133

4.5.2  UIStackView相关属性 134

4.5.3  实现自适应布局 136

第5章  图层和核心动画 138

5.1  图层 138

5.1.1  图层和视图 138

5.1.2  创建图层 138

5.1.3  图层的几何外观 143

5.1.4  图层的层次结构 145

5.1.5  图层的外观 148

5.2  使用核心动画 151

5.2.1  图层和动画 152

5.2.2  隐式动画 152

5.2.3  基本动画 155

5.2.4  组合动画 158

5.2.5  关键帧动画 160

5.2.6  转场动画 161

5.2.7  移除动画 162

5.2.8  视图动画 163

第6章  UI交互——触摸与手势 164

6.1  事件和触摸 164

6.1.1  触摸阶段 165

6.1.2  UITouch类 165

6.1.3  事件传递 166

6.2  响应者链 166

6.2.1  Hit-testing 167

6.2.2  响应触摸事件 168

6.3  手势和手势识别器 168

6.3.1  使用手势识别器 169

6.3.2  手势识别器状态 170

第7章  构建自定义控件 172

7.1  为什么要设计自定义控件 172

7.2  UIControl类 172

7.3  使用UIControl类制作一个温度控制器 173

7.3.1  初始化控件 174

7.3.2  绘制控件 175

7.3.3  更新控件的值 176

7.3.4  触摸跟踪 178

7.3.5  将控件显示在界面中 180

7.4  发送发作 180

7.5  使用UIAppearance自定义控件 181

© 著作权归作者所有

共有 人打赏支持
大学霸
粉丝 246
博文 844
码字总数 553173
作品 0
东城
程序员
iOS10 UI教程基础窗口的内容与设置起始窗口

iOS10 UI教程基础窗口的内容与设置起始窗口 iOS10 UI教程基础窗口的内容与设置起始窗口,本章我们从iOS10开发中UI的基础知识开始讲解,其中包括了窗口、视图以及UI层次结构和Views的继承等内...

大学霸 ⋅ 2016/11/21 ⋅ 0

iOS10 UI教程视图和子视图的可见性

iOS10 UI教程视图和子视图的可见性 iOS10 UI教程视图和子视图的可见性,一个父视图可以通过clipsToBounds属性,定义子视图在边界(边界就是父视图的框架也就是父视图可以显示的范围)以外部分...

大学霸 ⋅ 2016/11/25 ⋅ 0

iOS10 UI教程基改变视图的外观与视图的可见性

iOS10 UI教程基改变视图的外观与视图的可见性 视图是应用程序的界面,是用户在屏幕上看到的对象。用户可以通过触摸视图上的对象与应用程序进行交互,所以视图界面的优劣会直接影响到了客户体...

大学霸 ⋅ 2016/11/22 ⋅ 0

iOS10 UI教程视图的边界与视图的框架

iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界 在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上。其中典型的3个属性为边界属性、框架属性以及中...

大学霸 ⋅ 2016/11/23 ⋅ 0

iOS10 UI教程视图的绘制与视图控制器和视图

iOS10 UI教程视图的绘制与视图控制器和视图 iOS10 UI视图的绘制 iOS10 UI教程视图的绘制与视图控制器和视图,在iOS中,有很多的绘图应用。这些应用大多是在UIView上进行绘制的。如果想在一个...

大学霸 ⋅ 2016/11/28 ⋅ 0

iOS10 UI教程层次结构的事件

iOS10 UI教程层次结构的事件 iOS10 UI教程层次结构的事件,层次结构中存在7个事件,对于这些事件的介绍如表1-3所示。通过这些事件,可以监听视图,当视图在层次结构上发生变化时可以被拦截,...

大学霸 ⋅ 2016/11/25 ⋅ 0

iOS10 UI教程管理层次结构

iOS10 UI教程管理层次结构 iOS10 UI教程管理层次结构,在一个应用程序中,如果存在多个层次结构,就需要对这些层次结构进行管理。在UIView类中提供了可以用来管理层次结构的方法,让开发者可...

大学霸 ⋅ 2016/11/25 ⋅ 0

iOS10 UI教程视图的中心位置

iOS10 UI教程视图的中心位置 center表示的是视图的中心位置属性,这个属性在相对的UI层次结构上工作,和frame类似。center属性是一个在父视图上定义视图的位置的简便方法。center属性和frame...

大学霸 ⋅ 2016/11/24 ⋅ 0

iOS10 UI教程视图的几何形状

iOS10 UI教程视图的几何形状 视图属性中的一部分属性可以让定义的视图绘制在屏幕上。在讲解这些属性前,我们首先将讲解,定义视图的几何形状所涉及到的结构类型。这些结构类型如下: CGPoin...

大学霸 ⋅ 2016/11/23 ⋅ 0

iOS10 UI教程禁用视图与用户的交互

iOS10 UI教程禁用视图与用户的交互 在上文中我们提到了使用isHidden属性和alpha属性可以使视图与用户的交互被禁用,除此之外此功能还可以使用UIView的isUserInteractionEnabled属性实现,其语...

大学霸 ⋅ 2016/11/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 29分钟前 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

前言 我是上学期学的汇编,因为有vs又不想用课上教的麻烦的dosbox以及masm32,但是一直没找到高亮插件和能调试的(难在运行不了而找不到答案上,出现的错误在最后放出,还请先达们不吝指点)...

simpower ⋅ 38分钟前 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 41分钟前 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 48分钟前 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 50分钟前 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 57分钟前 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 今天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 今天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 今天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部