.Material Showcase for iOS
Material Showcase for iOS 是一个基于材料设计指南的优雅且美观的点击展示视图。
![]() |
![]() |
---|
要求
- iOS 10.0+
- Swift 4.2+
安装
CocoaPods
您可以使用 CocoaPods 安装它。请在您的 Podfile 中添加以下行:
pod 'MaterialShowcase'
Carthage
Carthage是一个去中心化的依赖管理器,它为您的依赖项构建二进制框架。
您可以使用以下命令使用Homebrew安装Carthage:
$ brew update
$ brew install carthage
要在您的Xcode项目中集成MaterialShowcase并使用Carthage,请将其在您的Cartfile
中指定。
github "aromajoin/material-showcase-ios" ~> 0.7.3
运行carthage update
以构建框架,并将生成的MaterialShowcase.framework
拖入您的Xcode项目中。
Swift Package Manger
在XCode中,请选择“文件”菜单选项“Swift包”=>“添加包依赖...”,然后选择您想添加的包的项目,并输入此存储库URL。
https://github.com/aromajoin/material-showcase-ios
用法
Objective-C
要将库整合到Objective-C项目中,请遵循此文档中的说明。
基本
let showcase = MaterialShowcase()
showcase.setTargetView(view: button) // always required to set targetView
showcase.primaryText = "Action 1"
showcase.secondaryText = "Click here to go into details"
showcase.show(completion: {
// You can save showcase state here
// Later you can check and do not show it again
})
注意:showcase.show()
应该在您的视图布局正确后调用,例如在UIViewController的viewWillAppear()
或viewDidAppear()
函数中。请勿在viewDidLoad()
内部调用它,因为此时视图尚未正确布局,showcase
无法计算视图的位置,这可能导致错误。
支持的目标视图
支持多种目标视图。
// Any UIView
showcase.setTargetView(view: view)
// UIBarButtonItem
showcase.setTargetView(barButtonItem: barItem)
// UITabBar item
showcase.setTargetView(tabBar: tabBar, itemIndex: 0)
// UItableViewCell
showcase.setTargetView(tableView: tableView, section: 0, row: 0)
启用点透
默认情况下,点击展示的目标不会执行其预定义的动作。这可以被覆盖。
// UIButton
showcase.setTargetView(button: button, tapThrough: true)
// UIBarButtonItem
showcase.setTargetView(barButtonItem: barItem, tapThrough: true)
// UITabBar item
showcase.setTargetView(tabBar: tabBar, itemIndex: 0, tapThrough: true)
处理展示状态
// Right after showing.
showcase.show(completion: {
// You can save showcase state here
})
// To handle other behaviors when showcase is dismissing, delegate should be declared.
showcase.delegate = self
extension ViewController: MaterialShowcaseDelegate {
func showCaseWillDismiss(showcase: MaterialShowcase, didTapTarget: Bool) {
print("Showcase \(showcase.primaryText) will dismiss.")
}
func showCaseDidDismiss(showcase: MaterialShowcase, didTapTarget: Bool) {
print("Showcase \(showcase.primaryText) dimissed.")
}
}
程序性关闭展示
showcase.completeShowcase(animated: true, didTapTarget: false)
支持左右文本对齐
默认情况下,文本对齐设置为从左到右。如果您想以从右到左的方向显示文本,请定义以下内容。
showcase.primaryTextAlignment = .right
showcase.secondaryTextAlignment = .right
仅当用户点击目标视图时关闭展示
默认情况下,点击展示视图中的任何位置都会关闭展示。如果您希望只在使用户正确点击目标视图时关闭展示,请设置以下属性。
showcase.isTapRecognizerForTargetView = true
自定义UI属性
根据您的应用定义您自己的样式。
// Background
showcase.backgroundAlpha = 0.9
showcase.backgroundPromptColor = UIColor.blue
showcase.backgroundPromptColorAlpha = 0.96
showcase.backgroundViewType = .full // default is .circle
showcase.backgroundRadius = 300
// Target
showcase.targetTintColor = UIColor.blue
showcase.targetHolderRadius = 44
showcase.targetHolderColor = UIColor.white
// Text
showcase.primaryTextColor = UIColor.white
showcase.secondaryTextColor = UIColor.white
showcase.primaryTextSize = 20
showcase.secondaryTextSize = 15
showcase.primaryTextFont = UIFont.boldSystemFont(ofSize: primaryTextSize)
showcase.secondaryTextFont = UIFont.systemFont(ofSize: secondaryTextSize)
//Alignment
showcase.primaryTextAlignment = .left
showcase.secondaryTextAlignment = .left
// Animation
showcase.aniComeInDuration = 0.5 // unit: second
showcase.aniGoOutDuration = 0.5 // unit: second
showcase.aniRippleScale = 1.5
showcase.aniRippleColor = UIColor.white
showcase.aniRippleAlpha = 0.2
//...
序列项
定义展示项并创建序列。
如果设置了key参数sequence 只显示一次或key为空则总是重复显示
始终出现
let sequence = MaterialShowcaseSequence()
let showcase2 = MaterialShowcase()
let showcase3 = MaterialShowcase()
let showcase1 = MaterialShowcase()
showcase1.delegate = self
showcase2.delegate = self
showcase3.delegate = self
sequence.temp(showcase1).temp(showcase2).temp(showcase3).start()
将只出现一次,所以我们有 key
let sequence = MaterialShowcaseSequence()
let showcase2 = MaterialShowcase()
let showcase3 = MaterialShowcase()
let showcase1 = MaterialShowcase()
showcase1.delegate = self
showcase2.delegate = self
showcase3.delegate = self
//Once the key value changes , it will appear once
sequence.temp(showcase1).temp(showcase2).temp(showcase3).setKey(key: "temp").start()
必须扩展 MaterialShowCaseDelegate 并将此代码放入 showCaseDidDismiss 函数中
extension ViewController: MaterialShowcaseDelegate {
func showCaseDidDismiss(showcase: MaterialShowcase, didTapTarget: Bool) {
sequence.showCaseWillDismis()
}
}
获取更多信息,请查看 示例应用。
如有任何问题或反馈,请访问 问题部分。请随时创建拉取请求。
第三方绑定
React Native
对于 React Native 开发者,您可以通过 其绑定桥梁 使用此库,由 @prscX 创建。
NativeScript
对于 NativeScript 开发者,您可以通过 第三方插件 使用此库,由 @hamdiwanis 创建。
常见问题解答
请检查常见问题解答页面这里。
许可证
Material Showcase
项目受Apache许可证的约束。更多信息请参见LICENSE文件。