上一章已經(jīng)實(shí)現(xiàn)了hello world 傳送門
這一章我們實(shí)現(xiàn)登錄界面
storyboard實(shí)現(xiàn)靜態(tài)頁面
點(diǎn)擊storyboard 點(diǎn)擊加號(hào) 創(chuàng)建4個(gè)button 作為我們四種不同登錄方式
image.png
按住shift選中四個(gè)button 點(diǎn)擊右下方選擇Stack View
為什要用Stack View呢 因?yàn)槲覀兛梢杂盟鼊?chuàng)建多個(gè)水平或垂直的subview 更方便我們排版
image.png
這時(shí)我們來排一下版，選中Stack View杨箭，我們距離底部30pt 并且水平居中
image.png
image.png
image.png
我們來看下效果
image.png
這個(gè)時(shí)候我們將背景圖添加進(jìn)Assets.xcassets
背景圖在我Github
傳送門
直接拖拽進(jìn)去就ok了
image.png
返回storyboard 選中button 我們依次新增背景圖和刪掉title
image.png
Done
image.png
接下來我們添加logo在上方
點(diǎn)擊加號(hào)選擇image view
image.png
添加背景色 上 左 右編劇為0
image.png
接下來就是輸入框 因?yàn)槊恳粋€(gè)subview向上距離一樣我們依然用stack view
分別創(chuàng)建label 和 兩個(gè) text field
并按住shift按照上面步驟變?yōu)閟tack view
修改間距spacing為20
image.png
設(shè)置左右和上邊距
image.png
選中輸入框左右邊距變?yōu)? 這樣輸入框就變長了
image.png
選中l(wèi)abel 修改title并居中顯示 顏色修改為紅色
image.png
選中輸入框添加placeholder并修改輸入框樣式
image.png
最后添加一個(gè)登錄按鈕 添加button 設(shè)置一些樣式和邊距
image.png
增加一點(diǎn)文字相對(duì)button的上下間距
image.png
設(shè)置圓角
image.png
看下最終效果
image.png
