容的美觀度)
MRoundedButton布局算法揭秘0.29魔法值如何決定按鈕內(nèi)容的美觀度【免費下載鏈接】MRoundedButtonUIControl subclass like iOS 7 Phone app button項目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButtonMRoundedButton 是一個仿 iOS 7 電話應用撥號按鈕的 UIControl 子類組件其核心是一套極其克制的布局算法僅靠一個神秘的魔法值0.29就能讓按鈕文字和圖片自動恰好落在圓形安全區(qū)內(nèi)。本文將完整拆解 MRoundedButton 的布局算法帶你搞清楚 0.29 這個魔法值從何而來、又是如何決定按鈕內(nèi)容美觀度的。 MRoundedButton 是什么iOS 撥號盤按鈕的開源實現(xiàn)MRoundedButton 的外觀與 iOS 7 電話 App 的撥號按鈕、控制中心按鈕如出一轍半透明的圓環(huán)、居中的文字或圖標、按下的淡入淡出動畫。它內(nèi)置了 4 種按鈕風格覆蓋了絕大多數(shù)圓形按鈕場景風格內(nèi)容布局MRoundedButtonDefault居中文字MRoundedButtonSubtitle文字 底部副標題MRoundedButtonCentralImage居中圖片MRoundedButtonImageWithSubtitle圖片 底部副標題組件本體只有兩個文件非常適合逐行閱讀頭文件MRoundedButton.h實現(xiàn)文件MRoundedButton.m安裝說明README.md、MRoundedButton.podspecCocoaPodsiOS 6.0 布局算法拆解三步算出內(nèi)容安全區(qū)所有布局邏輯都集中在layoutSubviews中可以拆成清晰的三步。第一步夾緊參數(shù)cornerRadius和borderWidth都會被限制在MIN(寬/2, 高/2)以內(nèi)見 MRoundedButton.m 中的MR_MAX_CORNER_RADIUS宏保證圓角不會畫出形狀畸變。第二步計算內(nèi)容安全區(qū)核心這就是魔法值登場的地方見 boxingRect 方法#define MR_MAGICAL_VALUE 0.29 // MRoundedButton.m 第 35 行 CGRect internalRect CGRectInset(self.bounds, self.layer.cornerRadius * MR_MAGICAL_VALUE self.layer.borderWidth, self.layer.cornerRadius * MR_MAGICAL_VALUE self.layer.borderWidth);含義非常直白從按鈕邊緣向內(nèi)縮進「圓角 × 0.29 邊框寬度」得到文字/圖片的可用區(qū)域再疊加用戶自定義的contentEdgeInsets。第三步按風格切分區(qū)域4 種風格共享同一塊安全區(qū)切分策略簡單粗暴Subtitle與ImageWithSubtitle風格將區(qū)域按80% / 20%分配給主體與副標題見 layoutSubviews其余風格獨占 100%。┌──────────────┐ │ 主體 80% │ ← 主文字 / 圖片 │ 副標題 20% │ ← 副文字 └──────────────┘ 0.29 從何而來它是幾何常數(shù) 1 ? √2/2魔法值的來歷藏在幾何里。設圓形按鈕半徑為 R圓的內(nèi)接正方形邊長為 √2 × R其半邊長為 R/√2 ≈0.7071R從內(nèi)接正方形的一條邊沿軸向量到圓周的距離恰好是 R ? 0.7071R (1 ? √2/2) × R ≈ 0.2929R作者將其簡化取兩位小數(shù)得到0.29。也就是說cornerRadius × 0.29的縮進量讓內(nèi)容區(qū)域恰好等于圓的內(nèi)接正方形——這是圓內(nèi)能容納的、最大的居中正方形內(nèi)容區(qū)。空間利用率最大化同時內(nèi)容永遠不會碰到圓弧邊緣這正是撥號按鈕看起來恰到好處的幾何原因。以示例工程 AnimateButton/ViewController.m 中 80pt 的圓形按鈕為例cornerRadius 40圓角 R單側縮進 0.29R內(nèi)容區(qū)邊長內(nèi)接正方形理論值 √2R4011.656.8≈ 56.6兩者幾乎完全吻合。若按鈕不是正圓圓角小于半邊長0.29 則退化為一個優(yōu)雅的近似系數(shù)內(nèi)容區(qū)隨圓角等比收縮依然美觀。此外縮進量中還加了borderWidth確保內(nèi)容始終留在描邊內(nèi)側。 一個隱藏細節(jié)文字其實是蒙版主文字層MRTextLayer并沒有直接改文字顏色而是把 UILabel 當作蒙版蓋在純色層上見 MRoundedButton.m。文字顏色其實是背景層的contentColor這讓按下時的高亮變色可以像普通視圖動畫一樣平滑過渡——這也是 iOS 7 撥號盤按壓變色的實現(xiàn)基礎。示例工程把按鈕疊在模糊照片上時用的是配套的MRHollowBackgroundView實現(xiàn)見 MRoundedButton.m通過CGContextEOFillPath把按鈕形狀從背景中挖空。? 實用技巧3 個讓按鈕更好看的關鍵點一鍵圓形按鈕把cornerRadius設為MRoundedButtonMaxValue即 CGFLOAT_MAX算法會自動夾緊到正圓微調(diào)內(nèi)容區(qū)contentEdgeInsets疊加在 0.29 縮進之上適合對文字間距做像素級調(diào)整批量統(tǒng)一風格用MRoundedButtonAppearanceManager把一組外觀屬性注冊成字典按 identifier 復用示例工程即采用此方式見 AnimateButton/ViewController.m。寫在最后MRoundedButton 用不到 600 行代碼把按鈕內(nèi)容如何落位這個細節(jié)做到了極致參數(shù)夾緊 → 0.29 魔法縮進 → 風格切分三步走其中 0.29 ≈ 1 ? √2/2 正是圓內(nèi)接正方形的幾何答案。理解了這套布局算法你也能在自己的組件里復刻出同樣恰到好處的內(nèi)容安全區(qū)。相關源碼資料MRoundedButton.h4 種風格枚舉與全部外觀屬性聲明MRoundedButton.m布局算法、淡入淡出動畫、鏤空背景視圖的完整實現(xiàn)README.mdCocoaPods 安裝與 AppearanceManager 用法LICENSEMIT 許可【免費下載鏈接】MRoundedButtonUIControl subclass like iOS 7 Phone app button項目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButton創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 MRoundedButton布局算法揭秘：0.29魔法值如何決定按鈕內(nèi)容的美觀度
MRoundedButton布局算法揭秘0.29魔法值如何決定按鈕內(nèi)容的美觀度【免費下載鏈接】MRoundedButtonUIControl subclass like iOS 7 Phone app button項目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButtonMRoundedButton 是一個仿 iOS 7 電話應用撥號按鈕的 UIControl 子類組件其核心是一套極其克制的布局算法僅靠一個神秘的魔法值0.29就能讓按鈕文字和圖片自動恰好落在圓形安全區(qū)內(nèi)。本文將完整拆解 MRoundedButton 的布局算法帶你搞清楚 0.29 這個魔法值從何而來、又是如何決定按鈕內(nèi)容美觀度的。 MRoundedButton 是什么iOS 撥號盤按鈕的開源實現(xiàn)MRoundedButton 的外觀與 iOS 7 電話 App 的撥號按鈕、控制中心按鈕如出一轍半透明的圓環(huán)、居中的文字或圖標、按下的淡入淡出動畫。它內(nèi)置了 4 種按鈕風格覆蓋了絕大多數(shù)圓形按鈕場景風格內(nèi)容布局MRoundedButtonDefault居中文字MRoundedButtonSubtitle文字 底部副標題MRoundedButtonCentralImage居中圖片MRoundedButtonImageWithSubtitle圖片 底部副標題組件本體只有兩個文件非常適合逐行閱讀頭文件MRoundedButton.h實現(xiàn)文件MRoundedButton.m安裝說明README.md、MRoundedButton.podspecCocoaPodsiOS 6.0 布局算法拆解三步算出內(nèi)容安全區(qū)所有布局邏輯都集中在layoutSubviews中可以拆成清晰的三步。第一步夾緊參數(shù)cornerRadius和borderWidth都會被限制在MIN(寬/2, 高/2)以內(nèi)見 MRoundedButton.m 中的MR_MAX_CORNER_RADIUS宏保證圓角不會畫出形狀畸變。第二步計算內(nèi)容安全區(qū)核心這就是魔法值登場的地方見 boxingRect 方法#define MR_MAGICAL_VALUE 0.29 // MRoundedButton.m 第 35 行 CGRect internalRect CGRectInset(self.bounds, self.layer.cornerRadius * MR_MAGICAL_VALUE self.layer.borderWidth, self.layer.cornerRadius * MR_MAGICAL_VALUE self.layer.borderWidth);含義非常直白從按鈕邊緣向內(nèi)縮進「圓角 × 0.29 邊框寬度」得到文字/圖片的可用區(qū)域再疊加用戶自定義的contentEdgeInsets。第三步按風格切分區(qū)域4 種風格共享同一塊安全區(qū)切分策略簡單粗暴Subtitle與ImageWithSubtitle風格將區(qū)域按80% / 20%分配給主體與副標題見 layoutSubviews其余風格獨占 100%。┌──────────────┐ │ 主體 80% │ ← 主文字 / 圖片 │ 副標題 20% │ ← 副文字 └──────────────┘ 0.29 從何而來它是幾何常數(shù) 1 ? √2/2魔法值的來歷藏在幾何里。設圓形按鈕半徑為 R圓的內(nèi)接正方形邊長為 √2 × R其半邊長為 R/√2 ≈0.7071R從內(nèi)接正方形的一條邊沿軸向量到圓周的距離恰好是 R ? 0.7071R (1 ? √2/2) × R ≈ 0.2929R作者將其簡化取兩位小數(shù)得到0.29。也就是說cornerRadius × 0.29的縮進量讓內(nèi)容區(qū)域恰好等于圓的內(nèi)接正方形——這是圓內(nèi)能容納的、最大的居中正方形內(nèi)容區(qū)。空間利用率最大化同時內(nèi)容永遠不會碰到圓弧邊緣這正是撥號按鈕看起來恰到好處的幾何原因。以示例工程 AnimateButton/ViewController.m 中 80pt 的圓形按鈕為例cornerRadius 40圓角 R單側縮進 0.29R內(nèi)容區(qū)邊長內(nèi)接正方形理論值 √2R4011.656.8≈ 56.6兩者幾乎完全吻合。若按鈕不是正圓圓角小于半邊長0.29 則退化為一個優(yōu)雅的近似系數(shù)內(nèi)容區(qū)隨圓角等比收縮依然美觀。此外縮進量中還加了borderWidth確保內(nèi)容始終留在描邊內(nèi)側。 一個隱藏細節(jié)文字其實是蒙版主文字層MRTextLayer并沒有直接改文字顏色而是把 UILabel 當作蒙版蓋在純色層上見 MRoundedButton.m。文字顏色其實是背景層的contentColor這讓按下時的高亮變色可以像普通視圖動畫一樣平滑過渡——這也是 iOS 7 撥號盤按壓變色的實現(xiàn)基礎。示例工程把按鈕疊在模糊照片上時用的是配套的MRHollowBackgroundView實現(xiàn)見 MRoundedButton.m通過CGContextEOFillPath把按鈕形狀從背景中挖空。? 實用技巧3 個讓按鈕更好看的關鍵點一鍵圓形按鈕把cornerRadius設為MRoundedButtonMaxValue即 CGFLOAT_MAX算法會自動夾緊到正圓微調(diào)內(nèi)容區(qū)contentEdgeInsets疊加在 0.29 縮進之上適合對文字間距做像素級調(diào)整批量統(tǒng)一風格用MRoundedButtonAppearanceManager把一組外觀屬性注冊成字典按 identifier 復用示例工程即采用此方式見 AnimateButton/ViewController.m。寫在最后MRoundedButton 用不到 600 行代碼把按鈕內(nèi)容如何落位這個細節(jié)做到了極致參數(shù)夾緊 → 0.29 魔法縮進 → 風格切分三步走其中 0.29 ≈ 1 ? √2/2 正是圓內(nèi)接正方形的幾何答案。理解了這套布局算法你也能在自己的組件里復刻出同樣恰到好處的內(nèi)容安全區(qū)。相關源碼資料MRoundedButton.h4 種風格枚舉與全部外觀屬性聲明MRoundedButton.m布局算法、淡入淡出動畫、鏤空背景視圖的完整實現(xiàn)README.mdCocoaPods 安裝與 AppearanceManager 用法LICENSEMIT 許可【免費下載鏈接】MRoundedButtonUIControl subclass like iOS 7 Phone app button項目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButton創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考