MaterialKit快速开始指南CocoaPods/文件拷贝/Submodule 3种安装方式10分钟跑通第一个涟漪按钮【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKitMaterialKit 是一款用Swift编写的iOS Material Design材质设计UI 组件库内置涟漪按钮 MKButton、悬浮占位输入框 MKTextField、带涟漪动效的 MKTableViewCell 等 10 个组件并支持 IBDesignable 在 Interface Builder 中实时预览。本文带你用 CocoaPods、文件拷贝、Git Submodule 三种方式安装 MaterialKit并亲手跑通第一个带涟漪动效的按钮。一、MaterialKit 是什么MaterialKit 灵感来自 Google Material Design 设计规范为 iOS 提供了开箱即用的材质风格组件核心特性包括高度可定制颜色、涟漪位置、动画时长、缓动函数等属性均可调整完整的示例工程每个组件都有可运行的 DemoIBDesignable 实时渲染组件直接在 Interface Builder 中可视化预览IBInspectable 属性暴露大部分属性可在 Xcode 右侧检查器面板中实时修改组件清单如下源码均位于 Source/ 目录组件说明MKButton悬浮按钮 / 凸起按钮 / 扁平按钮自带涟漪动效MKTextField单行输入框悬浮占位符 涟漪动画MKTableViewCell带涟漪动效的表格单元格MKLabel带涟漪动画的标签MKImageView图片视图可用于自定义 UIBarButtonItemMKRefreshControl材质风格下拉刷新控件MKNavigationBar支持抬升阴影与着色的自定义导航栏MKSwitch/MKSnackbar/MKCardView开关 / 底部提示条 / 卡片视图 说明README 中提示项目当前处于 unmaintained 状态接口基于 Swift 2.0 时代要求 iOS 8.0、Xcode 6.1若使用新版 Xcode 可能需要少量语法适配。二、开始前的环境要求30 秒确认在 MaterialKit.podspec 中可以看到运行要求iOS 8.0Xcode 6.1示例工程基于较老版本 Xcode 编写项目需开启 ARCrequires_arc true确认环境后下面介绍三种安装方式任选其一即可。三、MaterialKit 的 3 种安装方式方式一CocoaPods 一键安装推荐新手CocoaPods 是最省心的方式。在项目的Podfile中加入一行声明pod MaterialKit, ~ 0.4然后在终端执行pod install之后用.xcworkspace文件打开工程即可在代码中import MaterialKit。方式二拷贝 Source 源文件到工程如果不想引入依赖管理工具可以直接把 Source/ 目录下的 17 个 Swift 源文件如 Source/MKButton.swift、Source/MKLayer.swift、Source/MKColor.swift 等整体拷贝进工程并加入 Target即可直接使用。⚠️ 注意组件间存在依赖关系如 MKButton 依赖 MKLayer请整个目录拷贝不要只挑单个文件。方式三Git Submodule 引入完整仓库适合希望锁定版本、方便回溯历史的团队git clone https://gitcode.com/gh_mirrors/ma/MaterialKit cd MaterialKit/Example open MaterialKit.xcodeproj也可以在已有工程中执行git submodule add https://gitcode.com/gh_mirrors/ma/MaterialKit再把Source/加入 Target。这种方式还能顺便运行仓库自带的示例 App。四、10 分钟跑通第一个涟漪按钮安装完成后打开你的主 ViewController几行代码就能创建出一枚标准的 Material 涟漪按钮import MaterialKit let button MKButton(frame: CGRect(x: 10, y: 10, width: 100, height: 35)) button.maskEnabled true button.rippleLocation .TapLocation button.rippleLayerColor UIColor.MKColor.LightGreen view.addSubview(button)点击按钮时涟漪会从触点位置向外扩散——这正是 Material Design 最标志性的交互细节。用 Interface Builder 可视化配置MKButton 标有 IBDesignable 与 IBInspectable你甚至不需要写代码在 Storyboard 中拖入一个 UIButton将它的 Class 改为MKButton打开右侧检查器面板即可直接调整rippleLayerColor、rippleDuration、elevation、cornerRadius等属性画布会实时渲染涟漪效果所见即所得MKButton 可定制属性一览属性作用maskEnabled涟漪是否限制在按钮形状内rippleEnabled是否启用涟漪动效rippleLocation涟漪起点触点 / 中心 / 左侧等rippleLayerColor涟漪颜色rippleDuration/rippleScaleRatio动画时长 / 扩散比例elevation/shadowOffset抬升阴影材质感关键cornerRadius/roundingCorners圆角控制更多属性定义可查看 Source/MKButton.swift。五、深入示例工程10 个组件逐一上手仓库自带完整的示例 App位于 Example/MaterialKit/ 目录是最快的学习路径Example/MaterialKit/ViewController.swift演示如何用 MKButton 制作带涟漪的汉堡菜单按钮并用 MKSnackbar 弹出底部提示条Example/MaterialKit/TableViewController.swift演示 MKRefreshControl 下拉刷新 MKTableViewCell 涟漪单元格的组合Example/MaterialKit/MyCell.swift只需继承 MKTableViewCell 并配置rippleLayerColor就得到带涟漪的自定义单元格其余页面分别覆盖 ButtonViewController.swift、TextFieldViewController.swift、SwitchViewController.swift、BarButtonItemViewController.swift 等场景小技巧仓库 Assets 目录下的四张 GIF如 Assets/MKButton.gif就是各组件的官方动效演示可以对照观察涟漪扩散、悬浮占位符等细节。六、新手常见疑问 FAQQ1Objective-C 工程能用吗MaterialKit 是纯 Swift 编写的ObjC 工程建议通过 Swift 桥接头objc 暴露或新建 Swift 文件来使用。Q2涟漪颜色怎么取必须手写十六进制吗不必。Source/MKColor.swift 提供了 Google 扁平色系取色方法例如UIColor.MKColor.LightGreen、UIColor.MKColor.Red.P100直接取用即可。Q3为什么涟漪不显示检查两点一是rippleEnabled是否为true默认开启二是按钮是否添加了交互事件且userInteractionEnabled未被意外关闭。Q4能自定义涟漪扩散的缓动函数吗可以涟漪动画参数时长、缩放比例、颜色均可配置核心动画实现在 Source/MKLayer.swift 中适合进阶玩家二次定制。 到这里你已经完成了 MaterialKit 的安装并跑通了第一个涟漪按钮。接下来可以从示例工程入手逐个尝试 MKTextField 的悬浮占位符与 MKNavigationBar 的抬升效果——10 分钟之后你的 App 就会拥有纯正的 Material 设计质感。项目基于 MIT 协议发布详见 LICENSE可自由用于商业项目。【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考