上一章已经实现了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
网友评论