恒美微站
首页
关于我们
建站服务
主题模板
案例展示
资讯中心
联系我们
MaterialKit API速查表:全部组件Elevation、Ripple、颜色定制属性终极参考
首页
资讯中心
/
MaterialKit API速查表:全部组件Elevation、Ripple、颜色定制属性终极参考
MaterialKit API速查表:全部组件Elevation、Ripple、颜色定制属性终极参考
发布时间:2026/10/4 11:39:07
MaterialKit API速查表全部组件Elevation、Ripple、颜色定制属性终极参考【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit本文是MaterialKit用 Swift 编写的 iOS Material Design 组件库的完整API 速查表集中整理全部 15 个组件的Elevation 高度属性、Ripple 水波纹属性与颜色定制写法配合官方示例工程方便 iOS 开发者查表即取、收藏备用。环境要求iOS 8.0、Xcode 6.1可通过 CocoaPods 引入pod MaterialKit, ~ 0.4或直接把 Source/ 目录下的全部文件拷入工程版本与依赖信息见 MaterialKit.podspec。MaterialKit 全部组件一览15 个控件快速索引组件继承自一句话作用源码文件MKButtonUIButton按钮浮动/凸起/扁平带水波纹Source/MKButton.swiftMKTextFieldUITextField文本框浮动占位符下边框Source/MKTextField.swiftMKTableViewCellUITableViewCell带水波纹的列表行Source/MKTableViewCell.swiftMKCollectionViewCellUICollectionViewCell带水波纹的集合视图格子Source/MKCollectionViewCell.swiftMKLabelUILabel可点击的文字支持水波纹Source/MKLabel.swiftMKImageViewUIImageView可点击图片可当 UIBarButtonItemSource/MKImageView.swiftMKCardViewUIControlMaterial 风格卡片Source/MKCardView.swiftMKNavigationBarUINavigationBar支持 Elevation 阴影的导航栏Source/MKNavigationBar.swiftMKSwitchUIControlMaterial 风格开关Source/MKSwitch.swiftMKActivityIndicatorUIView环形加载指示器Source/MKActivityIndicator.swiftMKRefreshControlUIControlMaterial 风格下拉刷新Source/MKRefreshControl.swiftMKSnackbarUIControl底部 Snackbar 轻提示Source/MKSnackbar.swiftMKSideDrawerViewControllerUIViewController侧滑抽屉容器Source/MKSideDrawerViewController.swiftMKLayerCALayer水波纹/Elevation 核心层Source/MKLayer.swiftMKColorUIColor 扩展Google 扁平色板Source/MKColor.swiftElevation 高度属性参考阴影与层级怎么调几乎所有 MK 视图组件都暴露了同一套 Elevation 属性源码统一走 Source/MKLayer.swift 实现属性类型默认值说明elevationCGFloat0高度值内部换算为shadowRadius elevation / 4shadowOffsetCGSize.zero阴影偏移量cornerRadiusCGFloat0圆角半径roundingCornersUIRectCorner.AllCorners指定圆角位置阴影绘制逻辑集中在 MKLayer.swift 的enableElevation()阴影透明度固定 0.5、颜色固定黑色所以想更飘就调大elevation想更柔就配合cornerRadius使用。⚠️ 注意MKNavigationBar的elevation语义不同——它直接把elevation当作阴影半径并额外提供shadowOpacity控制透明度见下文。Ripple 水波纹 5 大通用属性参考以下 5 个属性在 MKButton、MKTextField、MKLabel、MKImageView、MKTableViewCell、MKCollectionViewCell、MKCardView 上完全一致改一处即可全局理解属性类型默认值说明rippleEnabledBooltrue是否开启水波纹rippleDurationTimeInterval0.35水波纹扩散时长秒rippleScaleRatioCGFloat1.0波纹放大比例越大波纹越夸张rippleLayerColorUIColor#EEEEEE波纹与背景色内部自动叠加 0.3 透明度backgroundAnimationEnabledBooltrue是否同时播放按压背景色动画另有maskEnabled默认true开启后用圆角遮罩把波纹裁剪在控件内部。波纹颜色设置入口在 MKLayer.swift 的setRippleColor(_:withRippleAlpha:withBackgroundAlpha:)。各组件专属定制属性速查表组件专属属性含默认值位置MKTextFieldfloatingPlaceholderEnabled浮动标签开关、floatingLabelFont、floatingLabelTextColor、bottomBorderEnabled默认开、bottomBorderColor、bottomBorderWidth默认1、bottomBorderHighlightWidth默认1.75聚焦时加粗变 tintColor、padding默认 5,5Source/MKTextField.swiftMKNavigationBarcolor栏背景默认白、darkColor状态栏色默认灰、tintColor标题/图标色、elevation直接作为阴影半径、shadowOpacity默认 0.5Source/MKNavigationBar.swiftMKSwitchon状态、thumbOnColor/thumbOffColor/thumbDisabledColor、trackOnColor/trackOffColor/trackDisabledColorSource/MKSwitch.swiftMKCardView全套通用属性 elevation默认值为2自带层级感Source/MKCardView.swiftMKRefreshControlcolor默认Blue.P500、height默认 60方法addToScrollView(_:withRefreshBlock:)、beginRefreshing()、endRefreshing()Source/MKRefreshControl.swiftMKActivityIndicatorcolor默认Blue.P500、lineWidth默认 6方法startAnimating()、stopAnimating()Source/MKActivityIndicator.swiftMKSnackbartext、actionTitle、textColor、actionTitleColor、actionRippleColor、duration默认 3.5 秒方法show()、dismiss()Source/MKSnackbar.swiftMKSideDrawerViewControllerdrawerDirectionLeft/Right、drawerWidth默认 240、screenEdgePanGestreEnabled、delegate状态回调Source/MKSideDrawerViewController.swiftMKImageView / MKLabel无专属属性但建议userInteractionEnabled true点击即触发波纹Source/MKImageView.swift颜色定制MKColor 色板 hex 初始化器MaterialKit 内置 Google 扁平色板覆盖 19 个色系Red、Pink、Purple、Blue、Cyan、Green、Grey、BlueGrey 等每个色系提供 P50~P900 档位多数色系另有 A100~A700 强调色定义见 Source/MKColor.swiftlet color UIColor.MKColor.LightGreen.P500 // 波纹/主题色同时提供了一个十六进制初始化器MKColor.swift任意自定义色一行搞定let custom UIColor(hex: 0xF44336)配色惯例rippleLayerColor用主色的浅档位如Blue.P300MKNavigationBar.color用主色MKRefreshControl.color和MKActivityIndicator.color默认就是Blue.P500改一个值即可换肤。实战Interface Builder 实时预览属性MaterialKit 的组件类都标注了IBDesignable而上面列出的属性全部带IBInspectable——在 Storyboard 选中组件后右侧Attributes Inspector可以直接拖动elevation、rippleDuration、rippleLayerColor等滑杆画布即时渲染效果无需运行。官方示例工程 Example/MaterialKit/ 覆盖了主要用法按钮Example/MaterialKit/ButtonViewController.swift文本框Example/MaterialKit/TextFieldViewController.swift列表行Example/MaterialKit/TableViewController.swift开关Example/MaterialKit/SwitchViewController.swift导航栏的换色示例把 Storyboard 中 UINavigationBar 的类改为 MKNavigationBar 后即可在 IB 里设置navigationBar.color UIColor.MKColor.Indigo.P500 navigationBar.tintColor .white navigationBar.elevation 4一分钟速查清单建议收藏改阴影elevationshadowOffsetMKNavigationBar 额外可用shadowOpacity改波纹rippleEnabled/rippleDuration/rippleScaleRatio/rippleLayerColor改形状cornerRadiusroundingCornersmaskEnabled换肤UIColor.MKColor.色系.P档位或UIColor(hex:)纯代码触发波纹MKImageView / MKLabel 设置userInteractionEnabled true即可点击触发 项目说明README 标注该库处于 unmaintained 状态见 README.md但 15 个组件 API 稳定、代码量小非常适合阅读源码学习 Material Design 的 Swift 实现也适合直接搬进新项目使用。【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考