尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

MRoundedButton完全指南:5分钟复刻iOS 7电话App圆角按钮与淡入淡出动画

MRoundedButton完全指南:5分钟复刻iOS 7电话App圆角按钮与淡入淡出动画 MRoundedButton完全指南5分钟复刻iOS 7电话App圆角按钮与淡入淡出动画【免费下载链接】MRoundedButtonUIControl subclass like iOS 7 Phone app button项目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButtonMRoundedButton 是一款免费开源的 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 SMRoundedButtonCentralImage中心图标功能按钮、图标菜单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且必须开启 ARCrequires_arc。 项目文件导览MRoundedButton.h对外接口含 4 种样式枚举、外观管理器与镂空背景视图声明MRoundedButton.m核心实现淡入淡出动画fadeInAnimation/fadeOutAnimation与触摸追踪逻辑都在这里AnimateButton/ViewController.m完整示例——三种样式按钮 模糊背景的官方 DemoMRoundedButton.podspecCocoaPods 配置声明 iOS 6.0 平台要求AnimateButton/Images.xcassets/pic.imageset/pic2x.pngDemo 背景大图总结MRoundedButton 用极简的核心代码把 iOS 7 电话 App 的圆角按钮外观与淡入淡出动画完整封装为可复用的 UIControl 子类。配合外观管理器与镂空背景视图5 分钟内你就能在项目中还原出原生质感的圆角按钮组件。【免费下载链接】MRoundedButtonUIControl subclass like iOS 7 Phone app button项目地址: https://gitcode.com/gh_mirrors/mr/MRoundedButton创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表