本篇博客就來(lái)介紹一下iOS App中主題切換的常規(guī)做法，當(dāng)然本篇博客中只是提到了一種主題切換的方法，當(dāng)然還有其他方法，在此就不做過多贅述了。本篇博客中所涉及的Demo完全使用Swift3.0編寫完成，并使用iOS的NSNotification來(lái)觸發(fā)主題切換的動(dòng)作。本篇博客我們先對(duì)我們的主題系統(tǒng)進(jìn)行設(shè)計(jì)，然后給出具體實(shí)現(xiàn)方式。當(dāng)然在我們?cè)O(shè)計(jì)本篇博客所涉及的Demo時(shí)，我們要遵循“高內(nèi)聚，低耦合”，“面向接口編程”，“便于維護(hù)與擴(kuò)充”等特點(diǎn)。

本篇博客我們先看一下Demo的運(yùn)行效果，然后給出設(shè)計(jì)方案已經(jīng)對(duì)應(yīng)的類圖，然后再根據(jù)設(shè)計(jì)的類圖給出相應(yīng)的代碼實(shí)現(xiàn)。

一、主題切換效果展示

先入為主，接下來(lái)我們先看一下本篇博客所涉及Demo的最終運(yùn)行效果。為了看到整體主題切換的效果，所以我們添加了一個(gè)主頁(yè)以及主頁(yè)P(yáng)ush進(jìn)去的子頁(yè)面。另一個(gè)頁(yè)面就是選擇相應(yīng)主題的頁(yè)面，也就是下方你所看到的TabieView的列表頁(yè)，該列表中提供了6種可選的主題，點(diǎn)擊相應(yīng)的主題即可切換到該主題上。

當(dāng)然主題切換，意味著整個(gè)App的風(fēng)格都得改變，所以當(dāng)修改完主題后，主頁(yè)以及其子頁(yè)面的主題也得隨之改變。具體效果如下gif圖所示。當(dāng)然Demo比較簡(jiǎn)單，但是麻雀雖小，五臟俱全，用來(lái)了解App的主題切換足以。當(dāng)然有更好的實(shí)現(xiàn)方式，歡迎留言交流。

二、設(shè)計(jì)主題切換功能的整體結(jié)構(gòu)

看完效果后，接下來(lái)我們就進(jìn)入了設(shè)計(jì)階段。根據(jù)上述Demo的特點(diǎn)，我們先給出相應(yīng)的類圖，當(dāng)然我們敲代碼時(shí)要根據(jù)該類圖進(jìn)行實(shí)現(xiàn)。下方截圖就是我們本篇博客主題切換工程的類圖了。該類圖中省略了一些細(xì)節(jié)，給出了核心的內(nèi)容。接下來(lái)我們來(lái)詳細(xì)的看一下下方這個(gè)類圖的結(jié)構(gòu)，如果下方的類圖搞明白了，那么在下部分中看相應(yīng)代碼時(shí)，就會(huì)顯得游刃有余了，因?yàn)槲覀兊拇a是按照下方的類圖所實(shí)現(xiàn)的。只不過比下方類圖更為詳細(xì)。

接下來(lái)我們就來(lái)看一下類圖的結(jié)構(gòu)，我們就按照不同顏色的框逐一介紹，框中的內(nèi)容算是一個(gè)模塊。

紅色框：下方類圖紅色框中就是我們的主題協(xié)議ThemeProtocol以及遵循該協(xié)議的所有主題。當(dāng)然，依據(jù)“面向接口”編程的規(guī)則，外部所依賴的不是所有的主題類，而是主題協(xié)議ThemeProtocol。也就是ThemeManager類依賴于ThemeProtocol。而所有的主題類通過工廠類或者工廠方法間接的與ThemeManager。因?yàn)殍b于Swift中的枚舉中可以添加相應(yīng)的計(jì)算屬性以及方法，所以我們可以使用相應(yīng)的主題枚舉來(lái)充當(dāng)這個(gè)工廠類，當(dāng)然下方類圖中沒有給出，這個(gè)要看具體的代碼實(shí)現(xiàn)。

藍(lán)色框：接下來(lái)我們就來(lái)看藍(lán)色框，藍(lán)色框中的SuperLabelClass是所有可以改變主題的Label的父類，也就是說在改變主題時(shí)，需要改變相應(yīng)的Label就要繼承該類。

黑色框：該框中中則是SuperViewController及其子類，需要更換主題的VC都要繼承自該基類。

綠色框：綠框中則負(fù)責(zé)修改主題，其中根據(jù)Cell的類型來(lái)確定用戶選擇的是哪個(gè)主題。

ThemeManager: 該類以單例的形式存在，負(fù)責(zé)管理相應(yīng)的主題，切換主題時(shí)，直接調(diào)用ThemeManager中的相應(yīng)的方法即可。

上面只是簡(jiǎn)單的介紹一下類圖，具體的還要看代碼的實(shí)現(xiàn)。

三、主題以及主題管理者的實(shí)現(xiàn)

看完運(yùn)行效果以及設(shè)計(jì)類圖，接下來(lái)我們就來(lái)一下具體的代碼實(shí)現(xiàn)本部分我們就來(lái)看一下相應(yīng)的主題類以及主題管理者的代碼實(shí)現(xiàn)。下方會(huì)先給出主題協(xié)議以及各個(gè)主題類的實(shí)現(xiàn)，然后再給出主題工廠方法以及主題管理者的實(shí)現(xiàn)。

1、主題協(xié)議的實(shí)現(xiàn)

下方就是我們定義的主題協(xié)議，所有主題都要遵循該協(xié)議。因?yàn)楸酒┛偷腄emo在切換主題時(shí)只涉及到了三個(gè)元素，一個(gè)是背景色（backgroundColor），一個(gè)是標(biāo)題的顏色（titleTextColor），在一個(gè)就是詳情的顏色（detailTextColor）。所以在我們的主題協(xié)議中有三個(gè)只讀的計(jì)算屬性與之對(duì)應(yīng)。具體如下所示：

2.各個(gè)主題的實(shí)現(xiàn)

接下來(lái)我們就要看看各個(gè)主題的實(shí)現(xiàn)了，我們就以紅色主題（RedTheme）為例。RedTheme要遵循ThemeProtocol，并且實(shí)現(xiàn)協(xié)議中規(guī)定的方法。在RedTheme中每個(gè)計(jì)算屬性都會(huì)返回當(dāng)前主題所對(duì)應(yīng)的屬性。具體如下所示。當(dāng)然其他主題與下方的RedTheme類似，只是每個(gè)計(jì)算屬性返回的值不同。

上面在返回UIColor對(duì)象時(shí)，我們用到了UIColor.colorWithHex(十六進(jìn)制數(shù))。colorWithHex()是我們?cè)赨IColor的延展中添加的靜態(tài)方法，該方法可以根據(jù)十六進(jìn)制的RGB參數(shù)來(lái)初始化相應(yīng)的UIColor對(duì)象。下方是該UIColor延展中的具體內(nèi)容。下方代碼的核心就是位操作的使用。

3.簡(jiǎn)單工廠的創(chuàng)建

主題協(xié)議已經(jīng)主題類構(gòu)建完畢后，接下來(lái)我們就該將這些主題進(jìn)行打包輸出了。 下方的代碼段本質(zhì)上就是主題類的簡(jiǎn)單工廠，因?yàn)镾wift的枚舉類型有很多好用的特性，所以我們使用了Swift的枚舉來(lái)實(shí)現(xiàn)這些主題的簡(jiǎn)單工廠。代碼結(jié)構(gòu)比較簡(jiǎn)單，在此就不做過多贅述了。

4.主題管理者(ThemeManager)的創(chuàng)建

上面關(guān)于主題的基本工作已經(jīng)做完，接下來(lái)我們就為這些主題來(lái)創(chuàng)建一個(gè)主題管理者ThemeManager。ThemeManager會(huì)根據(jù)用戶需求從上面的主題工廠中取出相應(yīng)的主題對(duì)象提供給用戶，這也就是ThemeManager的職能所在。

下方就是我們主題管理者ThemeManager的具體實(shí)現(xiàn)代碼，ThemeManager是以單例的姿態(tài)對(duì)外展現(xiàn)的。因?yàn)橹黝}管理者在整個(gè)App運(yùn)行時(shí)只需要一個(gè)，所以我們賦予了ThemeManager一個(gè)單例的身份與用戶進(jìn)行交流。單例實(shí)現(xiàn)完畢后，接著社一些便利方法，這些便利方法都是靜態(tài)方法，便于用戶直接使用。接著是一些ThemeManager的私有方法。

在ThemeManager的私有方法中，switcherTheme(themeType)是關(guān)鍵，該方法在收到修改主題的事件后，會(huì)發(fā)出修改主題的通知，而通知的內(nèi)容就是將要進(jìn)行修改的主題。那些可以修改主題的控件，在收到該通知的消息后，會(huì)根據(jù)通知內(nèi)容修改其自身的主題。具體代碼如下所示：

四、可更換主題的控件處理

主題以及主題管理者實(shí)現(xiàn)完畢，接下來(lái)就該使用了。在主題切換時(shí)，需要修改屬性的控件我們需要進(jìn)行處理，使其監(jiān)聽主題切換的通知，并根據(jù)通知內(nèi)容修改控件的屬性。在本部分我們就以SuperViewController為例。首先我們要將SuperViewController添加為主題切換的觀察者，然后實(shí)現(xiàn)收到通知后的方法。在析構(gòu)函數(shù)中，切記要移除觀察者。具體代碼如下所示。

五、調(diào)用ThemeManager更換主題

萬(wàn)事俱備只欠東風(fēng)，接下來(lái)我們就要在恰當(dāng)?shù)牡胤秸{(diào)用ThemeManager的switcherTheme()的方法進(jìn)行替換了。當(dāng)然我們是在我們的Cell來(lái)處理的，因?yàn)槊糠Ncell都對(duì)應(yīng)著主題的類型，下方就是Cell類型的枚舉。CellTitleType中的themeType計(jì)算屬性就對(duì)應(yīng)著相應(yīng)的主題類型，我們可以將該類型提供給ThemeManager，讓后ThemeManager發(fā)出更改主題的通知。

下方就是調(diào)用ThemeManager的switcherTheme()方法來(lái)更換主題。

至此，本篇博客所涉及的主題切換的Demo就介紹完畢了，所涉及的Demo按照慣例，依然會(huì)在github上進(jìn)行分享。下方就是Demo在github上分享地址。

代碼分享地址：https://github.com/lizelu/CEThemeSwitcher

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論