1. 程式人生 > >iOS開發UI篇—模仿ipad版QQ空間登入介面

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有效,對按鈕是沒有效果的。

如何設定按鈕填充:

第一種方式:使用程式碼拉伸最中間的一個畫素。

  

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