swift 開發歡迎界面的小實例

開發環境爲 Xcode9 語言爲 swift 4.2 開發一個可以滑動切換的歡迎界面,底部爲頁面切換導航,左右爲前一頁和後一頁的按鈕,中間爲頁面指示器。通常我們會用 storyboard 添加組件來畫界面,然後在 ViewController 中來獲取或者說綁定組件來添加動作或重置一些屬性。這個和 android 的佈局 xml 和 Activity 的關係如出一轍,不知道隨借鑑誰的了,今天我們不這樣做,我們直接在 controller 來畫界面

先定義左邊的按鈕,上一頁,這裏使用 swift 的閉包來定義一個 UIButton 組件,這樣可以讓代碼從主方法中分離出來看起來更清晰。如果定義一個 Button 想必大家看代碼就清楚了。

然後定義左邊的按鈕,下一頁

創建頁面指示器,這裏不得不說開發 iphone 應用要比開發android 省力得多,我們首先無需考慮各種五花八門的機型和不同 android 版本兼容,而且 ios 一些組件,本來就很美,使用這些組件很容易說服客戶。

最後我們在創建好的組件,添加到一個 UIStackView 中。

在定義組件中我們可以自定義使用 UIColor 一些顏色,爲了提高複用性。我們可以通過extension 來將我們定義好顏色添加到 UIColor 中。

這樣我們就可以輕鬆地使用定義好的 .mainPink 來進行替換了。

這些都創建好了我們,接下來我需要添加一些動作,通過swipe 動作來切換頁面,首先我們創建一個 swift 類—SwipingController

首先我們看一下,我們應用是如何指定一個UIViewController 來渲染我們的第一個界面,在 android 我們通過配置 manifest 可以指定起始界面,當然也可以通過代碼來指定,在 ios 中我們在 AppDelegate.swift 中來指定一個啓動界面看一看代碼吧

然後運行程序看一看我們結果

  測試成功,我們現在將程序啓動controller 指定爲我們剛剛創建好的 swipingController

我們看一看是如何實現,我們通過 section 將界面劃分爲幾個單元,然後將每個單元大小佔滿全屏,最後將上下滑動的模式改爲左右滑動模式,這就是我們的基本思路了。

我們視圖劃分爲幾個小單元區域

我們通過代碼可以控制單元大小,這裏設置爲 100 x 100 大小的小塊

我們將單元大小設置爲全屏,也就是高和寬都是屏幕的大小

設置滑動模式爲水平滑動,然後就出現上圖效果,離我們預期越來越近了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章