iOS開發UI篇—模仿ipad版QQ空間登入介面

標籤：

一、實現和步驟

1.一般ipad項目在命名的時候可以加一個HD,標明為高清版

2.設定項目的檔案結構，分為home和login兩個部分

　　

3.登陸介面的設定

（1）設定第一個控制器和自訂的控制器類（登陸）關聯

　　　　

（2）設定控制器的view的顏色，RGB三個值都為42

　　

（3）匯入相關的素材圖片

關於圖片：一般給豎屏用的圖片，以portrait名稱標識，給橫屏用的圖片，以Landscape名稱標識

修改plist檔案，調整圖片

　　  

提示：在項目中（ipad的使用中）有很多的地方都會用到表徵圖

補充：關於apple開發運用中表徵圖的尺寸，可以查看官方文檔（apple icon）。

（4）初步的介面設定

添加一個UIimageView到storyboard中，設定其對應的圖片。

使用outLayOut對其進行布局。設定其距離view的頂部有50的距離並固定，設定其水平置中。

　　     

添加一個view到storyboard中，用來裝載密碼，登陸等控制項。

添加一個imageView到storyboard中，用來設定密碼和登陸。（注意：這裡提供的圖片需要展開，設定展開最中間的1個像素）。

設定帳號，調整約束。添加一個對應的textfield控制項，設定約束，設定內部的文字顏色為白色，設定取出白色的背景，設定當編輯時提供一個清除按鈕，設定鍵盤為數字鍵台。

設定其邊框樣式

　

設定帳號輸入框的彈出鍵盤為數字鍵台

 

設定彈出的數字鍵台的return鍵位Next.

 

設定密碼，步驟類似於帳號，設定帳號內部文字為密文。

　　

設定清除按鈕

　　

設定密碼輸入框的彈出鍵盤的return鍵位Done.

　　

（5）關於鍵盤的處理。

預設鍵盤。next,和Done。

讓控制器稱為文字框的代理。控制器需要遵守協議。

　　

關於自動對文字框當前是否有數值進行判斷，勾選選項，當textField中沒有值的時候，（return）為灰色按鈕，有值的時候可點。

　　

點擊Next按鍵，游標移動到密碼輸入框上，點擊Done按鍵，執行登入相關操作。

實現代碼如下（注意已經對兩個textField進行了拖線處理）

　　

說明：這裡最簡單的辦法是在storyboard中給兩個textfield設定兩個tag值，在代碼處理中根據其tag值取出相對應的textField，但是不推薦這麼做。

二、登陸的設定

提示：在storyboard或者xib中對一塊圖片進行展開只對imageView有效，對按鈕是沒有效果的。

如何設定按鈕填充：

第一種方式：使用代碼展開最中間的一個像素。

　　

第二種方式：直接對圖片進行設定。

　　

iOS開發UI篇—模仿ipad版QQ空間登入介面