iox Xcode12 登录界面实现

上一章已经实现了hello world 传送门
这一章我们实现登录界面

storyboard实现静态页面

点击storyboard 点击加号 创建4个button 作为我们四种不同登录方式

image.png

按住shift选中四个button 点击右下方选择Stack View
为什要用Stack View呢 因为我们可以用它创建多个水平或垂直的subview 更方便我们排版

image.png

这时我们来排一下版，选中Stack View，我们距离底部30pt 并且水平居中

image.png

image.png

image.png

我们来看下效果

image.png

这个时候我们将背景图添加进Assets.xcassets
背景图在我Github
传送门
直接拖拽进去就ok了

image.png

返回storyboard 选中button 我们依次新增背景图和删掉title

image.png

Done

image.png

接下来我们添加logo在上方
点击加号选择image view

image.png

添加背景色 上 左 右编剧为0

image.png

接下来就是输入框 因为每一个subview向上距离一样我们依然用stack view
分别创建label 和 两个 text field
并按住shift按照上面步骤变为stack view
修改间距spacing为20

image.png

设置左右和上边距

image.png

选中输入框左右边距变为0 这样输入框就变长了

image.png

选中label 修改title并居中显示 颜色修改为红色

image.png

选中输入框添加placeholder并修改输入框样式

image.png

最后添加一个登录按钮 添加button 设置一些样式和边距

image.png

增加一点文字相对button的上下间距

image.png

设置圆角

image.png

看下最终效果

image.png