MaterialKit快速开始指南：CocoaPods/文件拷贝/Submodule 3种安装方式，10分钟跑通第一个涟漪按钮

MaterialKit快速开始指南：CocoaPods/文件拷贝/Submodule 3种安装方式，10分钟跑通第一个涟漪按钮

【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit

MaterialKit 是一款用Swift编写的iOS Material Design（材质设计）UI 组件库，内置涟漪按钮 MKButton、悬浮占位输入框 MKTextField、带涟漪动效的 MKTableViewCell 等 10 个组件，并支持 @IBDesignable 在 Interface Builder 中实时预览。本文带你用 CocoaPods、文件拷贝、Git Submodule 三种方式安装 MaterialKit，并亲手跑通第一个带涟漪动效的按钮。

一、MaterialKit 是什么？

MaterialKit 灵感来自 Google Material Design 设计规范，为 iOS 提供了开箱即用的材质风格组件，核心特性包括：

• 高度可定制：颜色、涟漪位置、动画时长、缓动函数等属性均可调整
• 完整的示例工程：每个组件都有可运行的 Demo
• @IBDesignable 实时渲染：组件直接在 Interface Builder 中可视化预览
• @IBInspectable 属性暴露：大部分属性可在 Xcode 右侧检查器面板中实时修改

组件清单如下（源码均位于 Source/ 目录）：

💡 说明：README 中提示项目当前处于 unmaintained 状态，接口基于 Swift 2.0 时代（要求 iOS 8.0+、Xcode 6.1），若使用新版 Xcode 可能需要少量语法适配。

二、开始前的环境要求（30 秒确认）

在 MaterialKit.podspec 中可以看到运行要求：

• iOS 8.0+
• Xcode 6.1+（示例工程基于较老版本 Xcode 编写）
• 项目需开启 ARC（requires_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，你甚至不需要写代码：

1. 在 Storyboard 中拖入一个 UIButton，将它的 Class 改为MKButton
2. 打开右侧检查器面板，即可直接调整rippleLayerColor、rippleDuration、elevation、cornerRadius等属性
3. 画布会实时渲染涟漪效果，所见即所得

MKButton 可定制属性一览

更多属性定义可查看 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）就是各组件的官方动效演示，可以对照观察涟漪扩散、悬浮占位符等细节。

六、新手常见疑问 FAQ

Q1：Objective-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