【轉】iOS學習之translucent屬性

来源:http://www.cnblogs.com/gfxxbk/archive/2016/10/26/5999663.html
-Advertisement-
Play Games

原文地址:http://www.jianshu.com/p/930643270455 總所周知,蘋果從iOS7開始採用扁平化的界面風格,顛覆了果粉們“迷戀”的擬物化風格。對於開發者而言,全新的風格帶來新的介面,這些新的介面改動中,有些更加合理了,有些更加方便了,而有些可能讓開發者容易迷糊,下麵本人就 ...


原文地址:http://www.jianshu.com/p/930643270455

總所周知,蘋果從iOS7開始採用扁平化的界面風格,顛覆了果粉們“迷戀”的擬物化風格。對於開發者而言,全新的風格帶來新的介面,這些新的介面改動中,有些更加合理了,有些更加方便了,而有些可能讓開發者容易迷糊,下麵本人就來談談iOS7這些新添加“鬼魅”的介面中的經常接觸到的一個----UITabBar/UINavigationBar的translucent屬性。

新的屬性translucent簡介

顧名思義,translucent屬性能決定UITabBar/UINavigationBar是否為半透明的效果,蘋果官方對此的解釋如下:

  • UINavigationBar的translucent屬性解釋

    /*
    New behavior on iOS 7.
    Default is YES.
    You may force an opaque background by setting the property to NO.
    If the navigation bar has a custom background image, the default is inferred 
    from the alpha values of the image—YES if it has any pixel with alpha < 1.0
    If you send setTranslucent:YES to a bar with an opaque custom background image
    it will apply a system opacity less than 1.0 to the image.
    If you send setTranslucent:NO to a bar with a translucent custom background image
    it will provide an opaque background for the image using the bar's barTintColor if defined, or black
    for UIBarStyleBlack or white for UIBarStyleDefault if barTintColor is nil.
    */
    @property(nonatomic,assign,getter=isTranslucent) BOOL translucent NS_AVAILABLE_IOS(3_0) UI_APPEARANCE_SELECTOR; 
    // Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleBlackTranslucent
  • UITabBar的translucent屬性解釋

    /*
    Default is YES.
    You may force an opaque background by setting the property to NO.
    If the tab bar has a custom background image, the default is inferred from the alpha
    values of the image—YES if it has any pixel with alpha < 1.0
    If you send setTranslucent:YES to a tab bar with an opaque custom background image
    the tab bar will apply a system opacity less than 1.0 to the image.
    If you send setTranslucent:NO to a tab bar with a translucent custom background image
    the tab bar will provide an opaque background for the image using the bar's barTintColor if defined, or black
    for UIBarStyleBlack or white for UIBarStyleDefault if barTintColor is nil.
    */
    @property(nonatomic,getter=isTranslucent) BOOL translucent NS_AVAILABLE_IOS(7_0);

    簡而言之,這個BOOL屬性能控制UITabBar/UINavigationBar的半透明效果,預設為YES,即預設情況下為半透明效果(後面會詳細解釋這兩段官方文字描述的含義)。

translucent緣何“鬼魅”

新屬性的出現往往會導致一些“註意事項”,主要體現為被半透明效果處理後產生的色差和添加的類view控制項的坐標變動。

預設情況下,如果使用UITabBarController和UINavigationBarController(translucent屬性預設為YES),設置一個藍色的view添加其中並設置距離屏幕邊距為(0,0,0,0),展示效果如下:



可以看到,UITabBarController和UINavigationBarController被藍色的view“穿透”了,此時view的邊距也正如設置的一樣,零點坐標在(0,0)處。

這時候,如果將view替換成tableView,展示效果如下:


可以看到,tableView的cell並沒有因為“穿透”效果而出現被遮擋的情況,這是由於蘋果對滾動視圖的特殊性進行處理:對於類ScrollView,系統預設預設控制器屬性automaticallyAdjustsScrollViewInsets預設為YES。

  • automaticallyAdjustsScrollViewInsets = YES時系統底層所乾的事
    scrollView的內容原本沒有內邊距,但是考慮到導航欄(高度44px)、狀態欄(高度20px)、TabBar(高度49px)會擋住後面scrollView所展示的內容,系統自動為scrollView增加上下的內邊距,這時候我們列印一下tableView的描述(友情提示:tableView繼承自scrollView):


    tableView描述.png


    可以看出,contentOffset(內容坐標偏移量)和contentSize(內容尺寸大小)都發生了變化,結合tableView自身的frame可以看出,系統自動為scrollView增加了頂部64px的內邊距以及底部49px的內邊距,正好是導航欄高度+狀態欄高度以及TabBar高度。一旦手動在系統佈局頁面之前設置automaticallyAdjustsScrollViewInsets = NO,將會取消上述操作,屆時scrollView內容將會被部分擋住
    請註意:上述的情況僅僅對UIScrollView或者子類(如UITableView)有效。

  • 非滾動視圖中導致“鬼魅”的原因
    從上述內容中,我們可以瞭解到滾動視圖預設情況下系統會給滾動內容增加上下內邊距,以防內容被導航條和TabBar遮擋,但是實際上在常用的項目界面結構(TabBarController--NavigationController--ViewController)以及系統預設情況下,viewController中的view是沒有內邊距的(也就是說view穿透上下兩個Bar)。但是我們有時候會看到應用中會有這樣的情形:非滾動視圖依然有類似增加上下內邊距的效果,自己並沒有手動更改過視圖的frame。這種情況,就要結合其他幾個系統的屬性來解釋了。

針對非滾動視圖的需求

由上述內容我們知道,預設情況下,導航條和TabBar都是半透明,添加在上面的控制器的視圖會有“穿透”效果。如果現在有這樣的需求:對於非滾動視圖,從原點(0,0)佈局,但是內容不被遮擋,能夠正常顯示。
這時候我們需要區分兩種情況:是否需要導航條/TabBar帶有半透明效果。

  • 保留半透明效果(導航條/TabBar的translucent == YES)

    1. 手動修改frame佈局,從(0,64)開始佈局,底部同理,需要計算坐標尺寸,比較繁瑣。
    2. 修改viewController的edgesForExtendedLayout屬性,edgesForExtendedLayout = UIRectEdgeNone
      (備註:設置後,控制器的view的frame的坐標Y增加64px緊挨著navigationBar下方,底部同理,該屬性支持iOS7及以後的版本。)
      註意:這裡雖然看著導航條和TabBar還有半透明效果,但是實際上下麵的內容已經無法再”穿透“了。
      運行效果如下圖所示:

  • 不保留半透明效果(導航條/TabBar的translucent == NO)
    將TabBar和導航條的translucent屬性分別設置為NO,不做任何其他修改,此時bar的背景顏色為預設的白色,且不再有色差,運行效果如下圖所示:


    導航條的translucent設置為NO效果展示
    TabBar的translucent設置為NO效果展示

關於iOS7之後與view全屏相關的知識點

在iOS7之後,預設情況下,控制器的view是”全屏“的,也就是說,即便有TabBar或者NavigationBar,控制器的view也是可以”穿透至全屏“的,針對這一特性,蘋果對UIViewController提供了以下幾個屬性供開發者使用:

// 在iOS7之前,控制器的view預設非全屏,如果想要全屏效果,需要設置為YES,該屬性已從iOS7開始過期
@property(nonatomic,assign) BOOL wantsFullScreenLayout NS_DEPRECATED_IOS(3_0, 7_0) __TVOS_PROHIBITED; 
// Deprecated in 7_0, Replaced by the following:  該屬性被以下三個屬性代替


// Defaults to UIRectEdgeAll
@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); 

// Defaults to NO, but bars are translucent by default on 7_0.  
@property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); 

// Defaults to YES
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets NS_AVAILABLE_IOS(7_0);

下麵解釋一下這三個屬性:

  • edgesForExtendedLayout:意思是view的邊緣允許額外佈局的情況,預設為UIRectEdgeAll,意味著全屏佈局(帶穿透效果)。

  • extendedLayoutIncludesOpaqueBars:意思是額外佈局是否包括不透明的Bar,預設為NO,意味著如果導航條或者TabBar非透明,view內容不會被他們遮擋,如果該屬性設置為YES,那麼在導航條或者TabBar非透明的情況下,view的內容將會被他們遮擋(原點為0,0),該屬性僅僅對非透明的Bar控制項有效。
    示例展示如下圖所示(代碼設置 navigationBar.translucent = NO 並且 extendedLayoutIncludesOpaqueBars = YES)


    非透明導航條遮擋內容效果展示
  • automaticallyAdjustsScrollViewInsets:意思是是否由系統自動調整滾動視圖的內邊距,預設為YES,意味著系統將會根據導航條和TabBar的情況自動增加上下內邊距以防止滾動視圖的內容被Bar遮擋。

設置導航條或者TabBar背景圖片的註意事項

這裡會詳細解釋官方文檔對translucent屬性的註釋,為什麼放到這裡才說?因為官方文檔對該屬性的解釋全部跟設置導航條或者TabBar的背景圖片有關!說明蘋果也知道,這裡坑很多,下麵就來梳理一下吧。。。

translucent屬性的官方解釋

  • UINavigationBar/UITabBar的translucent屬性解釋:預設為YES,可以通過設置NO來強制使用非透明背景,如果導航條使用自定義背景圖片,那麼預設情況該屬性的值由圖片的alpha(透明度)決定,如果alpha的透明度小於1.0值為YES。如果手動設置translucent為YES並且使用自定義不透明圖片,那麼會自動設置系統透明度(小於1.0)在這個圖片上。如果手動設置translucent為NO並且使用自定義帶透明度(透明度小於0)的圖片,那麼系統會展示這張背景圖片,只不過這張圖片會使用事先確定的barTintColor進行不透明處理,若barTintColor為空,則會使用UIBarStyleBlack(黑色)或者UIBarStyleDefault(白色)。

設置導航欄背景圖片透明度問題

  • 如果背景圖片沒有透明度,系統會自動把導航控制器的棧頂控制器的view的Y值增加64,如果沒有透明度,則不會增加。
  • 這一情況的圖片必須是imageSet格式的,並且圖片的透明度為1(不透明),系統才會去調整。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.defer標簽 只支持IE defer屬性的定義和用法: 屬性規定是否對腳本執行進行延遲,直到頁面載入為止。有的 javascript 腳本 document.write 方法來創建當前的文檔內容,其他腳本就不一定是了。如果您的腳本不會改變文檔的內容,可將 defer 屬性加入到 <script ...
  • JavaScript實現跨瀏覽器的一些事件綁定、移除、屬性獲取的方法 ...
  • 工作中遇到的小問題,做個筆記 實現springMVC + jsp + ajax 上傳文件 HTML javascript springMVC.xml java ...
  • 0 問題描述 由於需要演示觸控操作,採購了SurfacePro,SurfacePro的推薦解析度為2736×1824,且預設縮放比例為200%,IE瀏覽器的預設縮放比例也是200%,這樣就導致右側出現了豎直滾動條。整個界面的高度是通過計算得出並控制的,按理來說不應該出現這個垂直方向的滾動條。 正常情 ...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //日期對象可以儲存任意一個日期, 並且可以精確到毫 ...
  • JS是個神奇的語言,藉助Node.js的後端環境,我們可以進行相應的爬蟲開發,如這篇 基於Node.js實現一個小小的爬蟲 但搭建後臺環境始終略為麻煩,拿到一臺新電腦,不用配環境,可不可以直接在瀏覽器客戶端直接實現呢? 可以可以,這裡就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據 一、概念理解 ...
  • 【本次開發環境: Xcode:7.2 iOS Simulator:iphone6 By:啊左 本文Demo下載鏈接:RunLoop-Demo】 基本概念 一、RunLoop簡介 RunLoop,跑圈。在iOS開發中,也就是運行迴圈。 在應用需要的時候自己跑起來運行,在用戶沒有操作的時候就停下來休息。 ...
  • Android Weekly Issue #228 筆記, 本期內容包括: Android 7.1的App Shortcuts; Searchbar的設計討論; Nougat的Direct Reply; Alarms API討論; Support Library的BottomNavigationV... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...