iOS透明引導頁

2022-08-27 04:06:10 字數 2654 閱讀 5782

一、效果展示

二、怎麼做?

方案有很多種,不同的方案有不同的優缺點,這裡列舉兩種常見的方案

方案一:生成整張引導圖

(1). 匯出引導圖

讓設計師匯出各個尺寸的引導圖,引導圖只包含指引部分,不包括背景,匯出的引導圖樣式如下:

這裡寫描述

需要匯出iphone4,iphone5,iphone6,iphone6 plus 共4個尺寸,如果適配ipad,還需要匯出ipad的

(2). 編碼

因為整張圖匯出了,所以**部分就簡單了,不需要考慮布局問題,直接生成乙個imageview放上去,然後給它新增個點選事件即可

**如下:

(3). 優缺點

這種方案的優點是

a. 快速

只要設計師做好效果圖以後,把蒙層匯出成各種規格即可,90%的工作量都在設計師身上,程式設計師只需要簡單地新增檢視和事件即可

b. 維護成本低

當介面發生變化,或者引導圖需要調整時,只需要設計師重新生成,然後替換就可以了

b. 無法復用

一張引導圖只能用於乙個地方,其他地方不可能會用得上

方案二:拼接

拼接的思路是這樣的,通過若干張拼成乙個遮罩層,然後再在上面放其他元素,如下圖所示

這裡寫描述

(1). 準備

這裡需要準備3張

a. 空心的橢圓遮罩層

這裡寫描述

中間是透明,周圍是白色的,白色部分可以在遮罩過程中修改成任意的顏色

b. 小箭頭

這裡寫描述

c. 確定按鈕

這裡寫描述

(2). 編碼

這裡只介紹部分**的編寫過程

a. 介面

介面的定義:

(void)showinview:(uiview )view maskbtn:(uibutton )btn;

view:引導圖的父檢視

btn:被遮罩的按鈕

介面的實現:

(void)showinview:(uiview )view maskbtn:(uibutton )btn completion:nil];

}b. 修改遮罩層

載入空心的橢圓後,先對白色區域進行處理,把它改成黑色半透明

uiimage image = [uiimage imagenamed:@"whitemask"];

image = [image maskimage:[[uicolor blackcolor] colorwithalphacomponent:0.71]];

uiimageview imageview = [[uiimageview alloc] initwithimage:image];

(uiimage )maskimage:(uicolor )maskcolor

這裡會將中白色的部分改成任意的顏色,我們要將空心的橢圓變成這樣

這裡寫描述

c. 生成上下左右4個黑色半透明檢視

分別放在空心橢圓的上、下、左、右四個方位

(uiview *)topmaskview

return _topmaskview;

}(uiview *)bottommaskview

return _bottommaskview;

}(uiview *)leftmaskview

return _leftmaskview;

}(uiview *)rightmaskview

return _rightmaskview;

}d. 檢視布局

這裡有幾個需要注意的地方:

c-1. 被拼接的檢視的 x,y,width,height 的值需要取整,因為浮點數可能會導致銜接部位出現白邊,尤其是在iphone6 plus上,原因是手機的解析度問題,所以這裡最好使用整數

c-2. 在 layoutsubviews 函式中進行布局,這裡布局的好處是橫豎屏適配都能夠平滑過渡,而且不需要手動更新

布局**如下:

(void)layoutsubviews

(3). 優缺點

優點:a. 節約空間

一般就只需要幾個小圖,然後就可以組裝成一張引導圖了

b. 可重用

按鈕、橢圓圖、小箭頭這一類的可能被其他引導圖繼續使用

缺點:a. 編碼時間較長

每乙個介面元素都需要通過編碼來實現,每一次改動也需要調整**

iOS引導頁 啟動頁

前言 這裡使用launchscreen storyboard檔案建立啟 和引導頁。首次開啟專案或者更新後第一次開啟時展示引導頁,儲存有使用者資訊時進入首頁,否則進入登入註冊頁面。正文1.動態啟 將launchscreen.storyboard檔案上放入乙個。並新增約束,鋪滿整個頁面。為launchs...

iOS 引導頁實現

myintroductionview.h myintroductionview.m myintroductionpanel.h myintroductionpanel.m 這四個檔案,再加上一些影象資源加到你的工程中去。之後如果要修改影象等資源只要在相應位置修改就好了。在對應的.件中引入標頭檔案並且...

使用者引導頁 ios

儲存使用者的偏好設定 比如是否第一次啟動,使用者名稱,密碼等,nsuserdefault defaults nsuserdefaults standarduserdefaults 單例物件 bool islaunched defaults boolforkey lanou 建立判斷是否第一次啟動的鍵...