swift UI 学习 
 
Swift UI 简介
SwiftUI 的特点是什么
1. 声明式语法
2. 拥有更直观的新设计工具
3. 为所有的苹果设备提供原生体验
     
SwiftUI 代码实例
   
  
 

 
Swift UI 简介
 
苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外，我们还终于可以对饱受诟病的iTunes说再见了。而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在 苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。
 
学习网址：
 
官方swiftUI 学习
 
苹果官方swift 源码教程
 
GitHub Package 论坛
 
SwiftUI 的特点是什么
 
SwiftUI 使用声明式语法，所以我们可以简单地声明用户界面的样式。
 
开发者可以声明需要由一串文本输入框构成的组件
然后定义每一个输入框的字体对齐方式、字体样式、字体颜色。
这些代码比以往更加易懂，省时并易于维护。
 
这种声明式的方式甚至允许使用复杂的功能，如动画（animation）。只需要几行代码，即可添加动画在任何控件上，并且可以使用易于调用的特效。在运行时，SwifthUI 会自行控制创建流畅动作的所有步骤，并且可以解决程序冲突，保证 app 稳定运行。动画特效变得如此容易，我们可以发掘使 app 更加灵动的方式。
 
1. 声明式语法
 
SwiftUI 使用了声明式语法，所以开发者能够十分轻易地描述用户界面应该做什么。例如，编写需要包含文本字段的项目列表时，开发者可以用代码描述每个字段的对齐方式、字体和颜色。代码也比以前更简单，更易于阅读。
 
 
这种声明式风格非常适用于像动画这样复杂的元素。通过 SwiftUI，开发者可轻松地将动画添加到几乎任何控件。
 
2. 拥有更直观的新设计工具
 
Xcode 11 包含更直观的新设计工具，可让开发者通过拖拽的方式使用 SwiftUI 构建界面，在这过程中可以直接设置控件的相关属性。
 
当在设计工具中工作时，所编辑的内容会立刻反映到代码上，如果从模拟器切换到手机，手机也能立马看到预览效果。
 
 
3. 为所有的苹果设备提供原生体验
 
SwiftUI 是真正的原生 UI 框架，建立在苹果数十年打磨用户界面的经验上。开发者通过少量代码和交互式设计就能使用这个框架。
 
 
SwiftUI 代码实例
 
为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化，并更新视图的呈现以匹配该状态。
 
代码：
 
List(landmarks) { landmark in
   HStack {
      Image(landmark.thumbnail)
      Text(landmark.name)
      Spacer()
      
      if landmark.isFavorite {
         Image(systemName: "star.fill")
            .foregroundColor(.yellow)
      }
   }
}
 
运行效果：
 
 
将小的、单一职责的视图组合成更大、更复杂的接口。在为任何苹果平台设计的应用程序之间共享自定义视图。
 代码：
 
struct FeatureCard: View {
   var landmark: Landmark
   
   var body: some View {
      landmark.featureImage
         .resizable()
         .aspectRatio(3/2, contentMode: .fit)
         .overlay(TextOverlay(landmark))
   }
}
 
效果：
 
 
创建平滑的动画就像添加一个方法调用一样简单。SwiftUI在需要时自动计算和动画转换。
 
代码：
 
VStack {
   Badge()
      .frame(width: 300, height: 300)
      .animation(.basic())
   Text(name)
      .font(.title)
      .animation(Animation.basic().delay(0.25))
}


 
效果：
 

 
 
正式地开始学习UI了。
 
起初以为UI没有代码那么复杂，不用去思考其中的逻辑与推算，应该很容易，接下来的UI课应该很轻松、很容易吧，终于可以放松一下那紧张的学习状态了。
 
后来才发现想的不对，UI并没有想象中的那么容易，不只是动动鼠标随便在PS上面画画而已，还要去思考，还要去想象，更多的是在学习中不断的挖掘自己的美感，对美的观察力不断地去提升。
 
 
都说万事开头难，可是刚开始学PS很容易，因为只是学了一点点基础，就是熟悉一下工具而已。即使是简单的熟悉工具，老师也教得很细致，很耐心的每个工具都使用过并且通过案例解释给我们看：这个是什么工具，它有什么作用，应该怎么操作，然后是操作出来的例子。很直观很详细，而我们要做的，就是认认真真的听老师讲，并且沉浸在其中。老师给我们上的课都很活跃，很开心，让我学的很有信心。
 
学了一个月的PS，从刚开始的简单临摹作业到越来越复杂的临摹作业再到让人脑瓜疼的临摹作业，让只会用几个简单工具的我变成了一个能自己设计一个网页的进阶小白。
 
刚开始设计网页的时候，脑袋时而一片空白，时而一片浆糊，突然不是临摹作业让人仿佛没有了跟着走的目标，只能靠自己了，靠自己硬生生走出一条路来。
 
 
没有灵感了，就不停地浏览别人的网站，想从中发现点什么为我所用，助我走上康庄大道.......经历了为时一周左右的苦思冥想，期间经历了揪头发后的脑瓜凉之后，终于想到了一个大概的框架，并且画了出来
 
 
接下来要想的是该放什么内容进去了，仿佛前面那么多天的苦思冥想、博览网页就是为了今天，灵感就像喷泉一样一下子涌进了大脑，内容填得非常快。有时候不禁感叹时间过得如此之快，内容已经填了一大半了，估算第二天上午就能全部填完，然后下午做最后的修改，这个网页就算是全部完成了。
 
全部完成之后的样子：
 
 
看到自己亲手设计的作品，多多少少还是挺有成就感的，说明这么久自己的努力学习没有白费。
 
UI课少了代码课中的枯燥乏味，多了许多代码课中没有的乐趣，这将给我接下来的学习生涯中带来了很大的帮助，对灵感有了很大的启发，发现灵感源于生活。

最近开始学习UE4，整理了一下UE4的UMG官方文档的主要内容。
 
 
 
目录：
 UE4官方文档UI学习：1.UMG UI设计器快速入门
 UE4官方文档UI学习：2.UMG 创建主菜单
 UE4官方文档UI学习：3.UMG 创建暂停菜单
 UE4官方文档UI学习：4.UMG 创建控件模板
 UE4官方文档UI学习：5.UMG 创建3D控件交互
 UE4官方文档UI学习：6.UMG 使用菜单锚显示弹出菜单
 UE4官方文档UI学习：7.UMG 用事件驱动UI更新
 
 
 
本节内容
 
创建一个3D的按钮控件
 使用WidgetInteraction 组件
 
 
1 - 为FirstPersonCharacter编写控件交互脚本
 
1.在 Content > FirstPersonBP > Blueprints 文件夹中，打开 FirstPersonCharacter 蓝图。
 2.在 First Person Camera > Mesh2P > FPGun > Sphere 下，添加 WidgetInteraction 组件。
 
 利用此操作可将交互焦点引导至枪口瞄准的位置。
 3.在该控件交互组件的 细节 面板中，将 位置 归零并选中 显示调试。
 
 
4.在 事件图表 中，添加RightMouseButton鼠标事件。然后，将 WidgetInteraction 组件拖入，并添加 Press Pointer Key 节点。
 5.将鼠标右键节点的 Pressed 引脚连接到 Press Pointer Key 节点，然后将Key设为LeftMouseButton。
 
 UMG默认将点击事件注册为鼠标左键按键结果。使用 Right Mouse Button 节点，可模拟按下鼠标右键时的交互。可使用任意键输入事件调用此函数（例如按下扳机按下或按钮模拟鼠标左键点击）。
 
6.添加 Release Pointer Key 节点，将将Key设为LeftMouseButton。将鼠标右键节点的 Released 引脚连接到ReleasePointerKey。
 
 
2 - 创建InteractiveWidget
 
下面开始制作一个场景中的3D控件——一个按钮，用于显示该按钮被点击的次数。
 1.前往 内容浏览器 > 新增 > 用户界面，创建名为 InteractiveWidget 的 控件蓝图。
 2.在 视觉效果设计器 中，移除 画布面板（中心高亮框），并添加 按钮，其上设有 文本 控件。
 
 
3.选择 按钮 元素，然后在 细节 面板中的 外观（Appearence）>样式（Style） 下，将Hovered的tint改为黄色。
 4.选择 文本 元素，然后在 细节 面板中，将 文本 改为 0，将 字体大小 改为 48。
 
 5.在事件图表中，创建名为 Value 的 Text 变量。编译蓝图并将 Value 设为 0。
 
 6.在designer中，选择 文本 元素，然后在 细节 面板中，将文本与刚创建的value绑定 起来。
 
 7.在 按钮 元素的 Details 中，前往Events。找到OnClicked，并点击加号 +。
 
 
8.在事件图表中，按住 Ctrl 键并将 值 变量拖到图表。然后，从引脚连出引线添加 To String 节点，之后添加 String To Int 节点。
 9.从 String To Int 引脚连出引线添加 Integer + Integer 节点，并将其设为 +1。
 10.长按 Alt 键并将 值（Value） 变量拖入图表，并将 Integer + Integer 节点连接到 点击时 事件。
 11.编译 并 保存 蓝图。最小化或关闭蓝图选项卡。
 
 
3 - 创建控件蓝图
 
1.在 内容浏览器 中，创建名为 ExampleWidget 且基于 Actor 的BlueprintClass，然后添加Widget组件。
 
 2.在控件 细节 面板中的 用户界面 下，将 WidgtClass 改为 InteractiveWidget。
 
 3.在 内容浏览器 中，将 ExampleWidget 蓝图拖放到关卡中。按需缩放、旋转和调整位置。
 这里有个坑：如果没有看到拖放出来的InteractiveWidget，可能是旋转角度不对，翻面过来即可见：
 
 
 
实现效果：
 
 
 
参考资料：
 https://docs.unrealengine.com/zh-CN/Engine/UMG/HowTo/InWorldWidgetInteraction/index.html

最近开始学习UE4，整理了一下UE4的UMG官方文档的主要内容。
 
 
 
目录：
 UE4官方文档UI学习：1.UMG UI设计器快速入门
 UE4官方文档UI学习：2.UMG 创建主菜单
 UE4官方文档UI学习：3.UMG 创建暂停菜单
 UE4官方文档UI学习：4.UMG 创建控件模板
 UE4官方文档UI学习：5.UMG 创建3D控件交互
 UE4官方文档UI学习：6.UMG 使用菜单锚显示弹出菜单
 UE4官方文档UI学习：7.UMG 用事件驱动UI更新
 
 
 
本节内容
 
需求背景：实现一个菜单栏，该菜单栏中有若干个外观相同，但点击效果不同的按钮。
 
之前我们知道了如何创建控件蓝图，但是我们如何将某个控件蓝图，作为一个实例，在其他控件蓝图中重复使用呢？本节将创建控件蓝图CustomButton，作为一个通用的按钮。
 
本节新增知识点：
 Set Style节点
 事件调度器
 PrintString 节点
 
 
1 - 设置按钮控件
 
1.右键点击 内容浏览器，创建两个 控件蓝图，一个命名为 CustomButton，另一个命名为 HUD。
 
 2. 删除 CustomButton 空间蓝图中的 画布面板。然后，添加按钮，并右键点击，选中 用于包裹（Wrap With） > （Size Box）。
 3. 在 Size Box 细节 面板中，将 宽度覆盖 改为 300，高度覆盖 改为 100。也可将图形布局改为 实际屏幕显示（Desired on Screen），以了解按钮的实际大小。
 
 
4.长按 Ctrl 键并从 我的蓝图 面板中拖出 按钮。然后，拖出引脚并添加 设置样式（Set Style） 节点。确保选中 Variable Apperance 节点，而非 Button Function 节点。
 
 5. 将 Event Construct 节点连接到 Set Widget Style 节点，然后右键点击 控件样式 并选择 升级为变量。
 
 
6.将新变量命名为 ButtonStyle，然后 编译 蓝图。然后，将 法线 > 图像 样式设为以下纹理。
 
 
7.右键点击 法线 部分，然后选择 复制。然后，将图像设置粘贴到 悬停 值和 按下 值。所有三个数值现应具有相同图像纹理。
 
 
8.展开 悬停 并将 着色 颜色改为任意颜色（如黄色）。
 
 
9.在 ButtonStyle 中，勾选 实例可编辑（Instance Editable） 和 生成时公开（Expose on Spawn）。
 

 利用此操作，可在其他蓝图中使用该控件蓝图时，修改此变量的值。
 
10.选择 Button 变量，然后点击 + 号将 OnClicked 节点添加到图表。
 11.在 MyBlueprint 面板中，选择 EventDispatchers ，新建名为 ButtonClicked 的 事件调度器。
 12.将 ButtonClicked 拖入图表，选择 call，然后将该节点连接到 OnClicked 事件。
 
 
如此一来，就可以通过刚刚创建的事件调度器，对不同的按钮实现额外的脚本。
 
 
2 - 将按钮控件添加到HUD控件
 
1.打开 HUD 控件蓝图，并向 画布面板 添加 垂直框。将框的尺寸调小。
 2.在 用户创建 下的 选用板 中，向 垂直框 添加三个 自定义按钮。
 
 3.在事件图表中，点击 + 将 点击按钮 事件添加到图中。现在应有3个事件，每个按钮一个。
 
 此为 CustomButton 控件蓝图中创建的 事件调度器，点击此特殊按钮时其将进行响应。
 
4.对于各 ButtonClicked 事件，拖出引脚并将 PrintString 节点连接到各事件。在 字符串中 文本框中添加不同文本。
 
 
5.从关卡编辑器主工具栏前往 蓝图，并选择 打开关卡蓝图。
 6.在事件图表中点击鼠标右键，并添加 Event BeginPlay 节点。将节点连接至 Create Widget 节点，并将 类 设为 HUD。
 
 
7.添加 Add to Viewport 节点，并将其连接至 Create HUD Widget 节点。然后，将 Get Player Controller 函数添加到 Set Show Mouse Cursor 节点，并勾选此复选框（将其设为True）。
 
 
运行效果：
 
 
此外，ButtonStyle 为公开变量，可修改默认的样式，例如中间按钮修改图案如下：