MRoundedButton完全指南:5分钟复刻iOS 7电话App圆角按钮与淡入淡出动画
【免费下载链接】MRoundedButtonUIControl subclass like iOS 7 Phone app button项目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButton
MRoundedButton 是一款免费开源的 iOS 圆角按钮控件(UIControl 子类),外观复刻 iOS 7 电话 App 的圆形拨号键,并内置触摸时的淡入淡出动画。只需几行代码,即可在项目中实现支持描边、圆形、多样式与主题复用的精致按钮,兼容 iOS 6.0 及以上系统。
🎯 核心特性一览:MRoundedButton 圆角按钮控件能做什么
- 4 种内置样式:纯文本、文本+副标题、纯图标、图标+副标题,覆盖电话拨号盘与控制中心的常见场景
- 淡入淡出动画:手指按下时内容颜色渐变(fade in),抬起后平滑还原(fade out),手感与系统原生一致
- 外观主题管理器:通过 MRoundedButtonAppearanceManager 把按钮样式注册为字典,全项目复用同一套外观
- 镂空背景视图:MRHollowBackgroundView 让按钮"镂空"叠在图片上,轻松实现控制中心式效果
- 极轻量:核心源码仅 2 个文件,MIT 协议,可自由商用
效果预览(官方示例截图,展示 3 种样式的圆形按钮):
🚀 最快安装方式:CocoaPods 一键引入
在 Podfile 中声明平台并添加依赖,然后执行安装即可:
platform :ios, '6.0' pod "MRoundedButton", "~> 1.0"💡 最新的 1.1 版本尚未发布到 CocoaPods,如需
setSelected:高亮、禁用态等新特性,可直接克隆源码引入:git clone https://gitcode.com/gh_mirrors/mr/MRoundedButton克隆后把根目录的
MRoundedButton.h与MRoundedButton.m拖入工程即可。
⚡ 3 分钟上手:创建你的第一个圆角按钮
创建按钮只需指定 frame 和样式,默认即为中心文本样式:
MRoundedButton *button = [[MRoundedButton alloc] initWithFrame:frame buttonStyle:MRoundedButtonDefault]; button.textLabel.text = @"7"; button.borderWidth = 2; button.borderColor = [UIColor clearColor]; // 透明描边,仅保留圆环想让按钮直接变成正圆?把cornerRadius设为MRoundedButtonMaxValue即可,一行代码搞定圆形按钮。
📋 4 种按钮样式速查:MRoundedButton 样式对照表
| 样式枚举 | 布局效果 | 典型场景 |
|---|---|---|
MRoundedButtonDefault | 中心单行文本 | 拨号键数字 |
MRoundedButtonSubtitle | 主文本 + 小字副标题 | 电话键盘 "7 / P Q R S" |
MRoundedButtonCentralImage | 中心图标 | 功能按钮、图标菜单 |
MRoundedButtonImageWithSubtitle | 图标 + 副标题 | 控制中心快捷项 |
创建时通过buttonStyle:参数指定;运行时还可通过textLabel、detailTextLabel、imageView三个弱引用属性直接修改按钮内容。
🎨 外观复用技巧:用 AppearanceManager 管理按钮主题
给每个按钮重复设置颜色很繁琐?MRoundedButton 的外观管理器可以把一套样式存成字典,按 identifier 全局复用:
NSDictionary *proxy = @{kMRoundedButtonCornerRadius : @40, kMRoundedButtonBorderWidth : @2, kMRoundedButtonBorderColor : [UIColor clearColor], kMRoundedButtonContentColor : [UIColor blackColor]}; [MRoundedButtonAppearanceManager registerAppearanceProxy:proxy forIdentifier:@"phoneKey"];之后创建按钮时把"phoneKey"作为appearanceIdentifier传入,按钮即自动套用这套外观,非常适合管理深色 / 浅色多主题。相关键名常量(如kMRoundedButtonCornerRadius)均在MRoundedButton.h中声明。
🖼️ 进阶玩法:MRHollowBackgroundView 镂空背景视图
想把按钮叠在一张模糊图片上,并让按钮之外的区域呈现半透明遮罩?这正是 iOS 控制中心的做法。示例工程AnimateButton/ViewController.m给出了完整实现,示例所用的背景大图如下:
三步完成镂空效果:
- 用模糊图片铺满背景;
- 创建
MRHollowBackgroundView并设置foregroundColor遮罩色; - 将
MRoundedButton添加为它的子视图——背景会在按钮位置自动镂空,只保留圆环之外的遮罩。
❓ 常见问题 FAQ:圆角按钮使用注意事项
- 圆角和描边有上限吗?有。
cornerRadius与borderWidth的最大值被限制为按钮短边的一半,超出部分会自动收敛,无需担心溢出。 - 如何做出透明描边?将
borderColor设为[UIColor clearColor],再配合borderWidth留出圆环空隙即可。 - 触摸状态如何控制?默认
restoreSelectedState为 YES,手指抬起后自动还原;需要手动高亮时直接调用setSelected:,淡入淡出动画会同步触发。 - 禁用态长什么样?1.1 版本起,
enabled = NO时按钮以 0.5 透明度平滑变淡。 - 最低系统版本?iOS 6.0+,且必须开启 ARC(
requires_arc)。
📁 项目文件导览
MRoundedButton.h:对外接口,含 4 种样式枚举、外观管理器与镂空背景视图声明MRoundedButton.m:核心实现,淡入淡出动画(fadeInAnimation/fadeOutAnimation)与触摸追踪逻辑都在这里AnimateButton/ViewController.m:完整示例——三种样式按钮 + 模糊背景的官方 DemoMRoundedButton.podspec:CocoaPods 配置,声明 iOS 6.0+ 平台要求AnimateButton/Images.xcassets/pic.imageset/pic@2x.png:Demo 背景大图
总结:MRoundedButton 用极简的核心代码,把 iOS 7 电话 App 的圆角按钮外观与淡入淡出动画完整封装为可复用的 UIControl 子类。配合外观管理器与镂空背景视图,5 分钟内你就能在项目中还原出原生质感的圆角按钮组件。
【免费下载链接】MRoundedButtonUIControl subclass like iOS 7 Phone app button项目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButton
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考