提示:TipSee 1.4.0

TipSee 1.4.0

farshad jahanmanesh维护。




TipSee 1.4.0

TipSee

TipSee是一个轻量级且高度可定制的库,帮助您展示漂亮的提示和提示信息。

CI Status Version License Platform

要做什么

  • 实时更改
  • 可点击的目标区域
  • 在提示之间动画转换
  • 屏幕上有多个提示
  • 模糊动画
  • 泡泡动画
  • 多个提示,同一个位置
  • 它非常适合提示跟随目标区域的移动

我们可以用TipSee做什么?

       我们可以在视图顶部或我们想要的任何地方显示交互式提示,但找到放置泡泡(或自定义视图)的最佳位置是基于TipSee的决定。它将智能地根据可用空间和内容大小找到显示提示的最佳位置。我们可以显示自定义视图(如那个心形)或简单的文本,就像您在Gif中看到的那样。提示可以指向所有类型的视图,如按钮、图像等,或者指向视图控制器(如指向gif中视图中心的提示)的特定部分。

TipSee的可定制程度

      配置有两种类型,一种是针对全局和通用的东西,适用于所有提示和提示信息(例如,将应用于所有提示和提示),另一种是每个气泡的特定配置。 TipSee.Options 是我们为所有气泡和提示设置的具有全局配置的一个,而 TipSee.Options.Bubble 是我们为每个提示设置的配置。这意味着我们可以为每个提示改变背景颜色、字体等,或者我们可以只为所有提示设置一个通用配置。因此,我们从全局配置开始

public struct Options: HintConfiguration {

    /// default dim's color, each bubble could changes this color(optionaly) by setting the bubble.dimBackgroundColor
    public var dimColor: UIColor

    /// bubble's life cycle.
    /// forEver : bubbles will be visible and needs to be remove manualy by caliing dismiss(item), you can show multiple bubbles same time
    /// untilNext: everytime show() function is called, previous bubble(if exists) will remove and new one will present
    public var bubbleLiveDuration: BubbleLiveDuration

    /// indicates the default bubble's position, each bubble can has specific position by setting bubble.position
    public var defaultBubblePosition: BubblePosition

    /// specifies the hole's(Target Area) radius
    /// keepTargetAreaCornerRadius : uses target view layer corner radius
    /// constantRadius(radius) : sets constant radius for all
    /// defaultOrGreater(default) : sets a constant default value or uses the target view layer corner radius if it is greater that the default value
    /// none : no corner rradius
    public var holeRadius: HoleRadius

    /// indicates bubble's margin with the target area
    public var safeAreaInsets: UIEdgeInsets

    /// if false, the dimTap Callback will not call. some times we need to let users to interact with the views behinde the dim
    public var absorbDimTouch : Bool

    /// if true, dim will fade after one second, combine this with absorbDimTouch if you want to have an interactive area while your hint is showing, by default, a dim will cover all the screen and user can not touch the things behind that dim
    public var dimFading : Bool


    /// bublbe's options. all bubbles will setup by this one if they will have not specified one for themself until presentaion. every bubble can has their own configuration and if we set specific configuration for a hint, that one will apply and this one is ignored
    public var bubbles: Bubble
    
}

气泡选项

public struct Bubble {
    
    /// bubble's background color
    public  var backgroundColor: UIColor
    
    /// preferred position for the bubble, this is preferred because sometimes there is not enough space there, TipSee needs to choose a better place to put the bubble
    public  var position: BubblePosition?
    
    /// text font
    public  var font: UIFont
    
    /// text color
    public  var foregroundColor: UIColor
    
    /// text alignment
    public  var textAlignments: NSTextAlignment
    
    /// bubble's presentaion animation which is (bounce + fade-in), do you want your bubbles have?
    public  var hasAppearAnimation: Bool
    
    /// distance between the bubble and the target view
    public  var padding: UIEdgeInsets = .zero
    
    /// whole hint(dim and bubble) should be dismiss when user is touched on the target area
    public  var dismissOnTargetAreaTap: Bool
    
    /// will execute when user taps on target area
    public var onTargetAreaTap : TapGesture?
    
    /// each hint could has a different dim color which is viewable in the animation(sun and moon)
    public var changeDimColor : UIColor?
    
    /// will execute when user taps on the bubble
    public var onBubbleTap : TapGesture?
    
}

操作

TipSee有四个操作,我们可以对它们进行响应以处理某些情况

  1. Bubble.onBubbleTap 当用户点击气泡视图时,我们可以访问被点击的气泡和项目
  2. Bubble.onTargetAreaTap 当用户点击目标区域时
  3. HintObject.onDimTap 当用户点击模糊(背景)时,我们可以访问屏幕上最新的提示信息
  4. HintObject.onBubbleTap 当用户点击气泡时,这是如果没有为气泡指定自己的操作的默认动作

提示生命周期

基于我们在选项中设置的 bubbleLiveDuration,提示具有生命周期,这意味着提示应该在用户进行点击以关闭或在新提示出现前从屏幕移除

如何使用

首先,设置您的选项(或使用默认选项),然后创建一个新的TipSee实例

  let defaultTipOption = TipSee.Options
			.default()
			.with {
				$0.dimColor =  UIColor.black.withAlphaComponent(0.3)
				$0.bubbleLiveDuration = .untilNext
				$0.dimFading = false
	}
  
  // TipSee needs a window to show it's content in it
  let tipsee = TipSee(on: self.view.window!)
  
  // shows a simple text(tip) that is pointed to the view(pugImage), this tip has not specific configuration
  // so it will use default one
	tipSee.show(for: self.pugImage, text: "good boy")

您还可以创建具有自定义配置的自定义提示

  // creates new custom item with custom configs
  let pugLoveConfig = TipSee.Options.Bubble
        .default()
        .with{
            $0.backgroundColor = .clear
            $0.foregroundColor = .black
            $0.textAlignments = .left
            $0.padding = UIEdgeInsets.init(top: 0, left: 16, bottom: 0, right: 16)
            $0.position = .top
        }
  tipSee.show(item TipSee.TipItem.init(ID: "100", pointTo: self.pugImage, contentView: image,bubbleOptions: pugLoveConfig))
  

在上面的示例中,我们需要自己处理提示序列。下一,上一,展示或隐藏应通过使用像气泡点击、目标区域点击、模糊点击等操作来处理,但有一个幻灯片扩展,我们将在下一节中讨论,可以帮助我们完成这些事情。

TipSeeManager

TipSeeManager是一个辅助类,它让我们可以拥有像提示一样的幻灯片功能。此管理器处理提示数组,并提供了方便的API(下一页、上一页)。我们可以添加任意数量的提示,然后通过调用.next()来启动序列。

let defaultTipOption = TipSee.Options
			.default()
			.with {
				$0.dimColor =  UIColor.black.withAlphaComponent(0.3)
				$0.bubbleLiveDuration = .untilNext
				$0.dimFading = false
		}
				
 let tipManager = TipcManager(on: self.view.window!,with: defaultTipOption)
 tipManager.add(new: TipSee.TipItem.init(ID: "100", pointTo: self.pugImage, contentView: image,bubbleOptions: pugLoveConfig))       
 tipManager.add(new: self.pugImage,text:"best dog ever <3 <3 ^_^ ^_^",with: pugDescriptionConfig.with{$0.position = .right})
 tipManager.add...
 ...
 ...
 ...
 
 tipManager.next()

DEMO

您可以通过运行示例来查看执行的操作以及如何配置设置。

示例

要运行示例项目,首先克隆存储库,然后从示例目录运行pod install

要求

此库不需要任何要求,是用Swift5编写的。

安装

TipSee可通过CocoaPods获得。要安装,请简单地在您的Podfile中添加以下行

pod 'TipSee'

作者

farshadjahanmanesh,[email protected]

许可证

提示:TipSee遵照MIT许可证提供。查看LICENSE文件获取更多信息。