透明H5(webView)效果的實現(xiàn)
一個完全透明的webView加載H5頁面的效果的實現(xiàn)唆迁,就相當于是一個半透明的遮罩層煌贴,上面有一個不透明的圖片凳鬓,一般原生的帶遮罩層的彈框會采用這種方式特咆,如果是原生代碼實現(xiàn)影钉,就簡單的多了画髓,視圖的疊加就可以搞定,但如果整個頁面包括遮罩層都要用webView加載H5來實現(xiàn)的話平委,就會有點兒復雜奈虾,這一效果還是花費了好一番功夫,在實際的開發(fā)過程中廉赔,發(fā)現(xiàn)了webView從未接觸過的奇妙的一面:_UIWebViewScrollView肉微、UIWebBrowserView。
起初蜡塌,是要設置webView的顏色和透明度(不是整體的alpha)碉纳,但是發(fā)現(xiàn)無論怎么操作都不可以,中間的那部分區(qū)域也無法改變顏色馏艾;于是使用下面遞歸的方式輸出了WebView中所有繼承于UIView的子視圖;
輸出結果:
WebView 的子視圖 : Optional(_UIWebViewScrollView)
WebView 的子視圖 : Optional(UIWebBrowserView)
結果就發(fā)現(xiàn)了兩個類:_UIWebViewScrollView劳曹、UIWebBrowserView;這是兩個從來沒見過的類琅摩,但是從名字也大致能看出來在什么位置厚者;但是我很奇怪的是為什么沒有UIScrollView,或者還是這個_UIWebViewScrollView事實上和我們直接調用的webView.scrollView有著什么聯(lián)系迫吐,但是webView的scrollView屬性繼承于UIScrollView,UIScrollView繼承于UIView账忘,中間的繼承關系中也并未出現(xiàn)_UIWebViewScrollView志膀;這也是我疑惑的地方熙宇;
_UIWebViewScrollView并不是webView中類型為UIScrollView的屬性scrollView中的,而是構成webView的一個子視圖溉浙;
UIWebBrowserView是在_UIWebViewScrollView上面的一個子視圖烫止;如果傳入?yún)?shù)是webView.scrollView而不是webView,就會發(fā)現(xiàn)只有UIWebBrowserView輸出了戳稽,也就是說事實上UIWebBrowserView是webView的屬性scrollView上的一個子視圖
這個關系理清楚之后就知道為什么設置不了webView的clearColor了馆蠕,只要使用遞歸設置這兩個子視圖的背景色為clearColor,同時惊奇,設置
webView.opaque = false就OK了互躬;當然,主要的一點還有加載的H5頁面也要直接使用div做成透明的颂郎,沒有背景body.
解決方案:
_webView.opaque = NO;
_webView.backgroundColor = [UIColor whiteColor];