Latest 0.2.2
License MIT
Platforms ios 10.0
Frameworks UIKit
Authors , ,

Build Status
Code Coverage
Swift 4.0


  • [x] 📄’You can take a marker containing content above the UIScrollView.
  • [x] 🛫’THMarkerView has origin and zoomScale in UIScrollView so it functions as a camera autopilot to that position.
  • [x] 🎥THContentMarkerView provides THVideoContentView, THAudioContentView, THTextContentView, and THTitleContentView as default content.
  • [x] 👍If you want to create a content view of your choice, you can make your content view that inherit THContentView.





To integrate THContentMarkerView into your Xcode project using CocoaPods, specify it in your Podfile:

pod "THContentMarkerView"


THContentMarkerView is written in Swift 4, and compatible with iOS 9.0+

How to use

  1. THContentMarkerView can basically be controlled using two data models THMarker and THContentSet.

    • THMarker : THMarker has marker origin, zoomScale, and contentInfo.
    • zoomScale : zoomScale to be set to UIScrollView when the marker is tapped
    • origin : Where the marker will be drawn on the UIScrollView
    • markerID : Identifier to distinguish markers
    • contnetInfo : The key value to enter the content view and the info dictionary
    // When creating 'THMarker' with no content
    var markerArray = [THMarker]()
    func setMarker() {
      // set 'THMarker'
        markerArray.append(THMarker(zoomScale: CGFloat(3),
                                          origin: CGPoint(x: 1000, y: 1000),
                                          markerID: "markerIdentifier",
                                          contentInfo: [:]))
    • THContentSet: THContentSet has THContentView and the key of the view to use in the project.
      (The library provides THVideoContentView, THAudioContentView, THTextContentView, and THTitleContentView by default.)
    //  'THContentView' setting
    var contentSetArray = [THContentSet]()
    func setContentView() {
      // key Generation
      let videoContentKey = "videoContent"
      let audioContentKey = "audioContent"
      let titleContentKey = "titleContent"
      let textContentKey = "textContent"
    // THVideoView set example
    let videoContent = THVideoContentView()
    let videoFrame = CGRect(x: - 75, y: + 80, width: 150, height: 100)
    videoContnetKey.setContentView(frame: videoFrame)
    contentSetArray.append(THContentSet(contentKey: videoContentKey, contentView: videoContent))
    // THAudioContentView set example
    let audioContent = THAudioContentView()
    audioContent.frame = CGRect(x: 0, y: 200, width: 80, height: 80)
    contentSetArray.append(THContentSet(contentKey: audioContentKey, contentView: audioContent))
    // THTitleContentView set example
    let titleContent = THTitleContentView()
    titleContent.frame.size = CGSize(width: 100, height: 50) =
    titleContent.setView(fontSize: 25)
    contentSetArray.append(THContentSet(contentKey: titleContentKey, contentView: titleContent))
    // THTextContentView set example
    let textContent = THTextContentView()
    textContent.frame = CGRect(x: 0, y: self.view.frame.height - self.view.frame.height*(1/5),  width: self.view.frame.width, height: self.view.frame.height*(1/5))
    textContent.setContentView(upYFloat: 180)
    contentSetArray.append(THContentSet(contentKey: textContentKey, contentView: textContent))
  2. If you want to show the required content, you can make content view that inherit ‘THContentView’.

    // 'THContentView' creation example
    public class THExampleContentView: THContentView {
    public setExampleContent {
      // Sets the delegate for the content view.
      delegate = self
    extension THExampleContentView: THContentViewDelegate {
    public func setContent(info: Any?) {
      // Setting up contentInfo in content view
    public func dismiss() {
      // When you dismiss the content
  3. Call THContentMarkerController and implement dataSource, delegate.

    class ViewController: UIViewController {
    var contentMarkerController = THContentMarkerController()
    // Work data in 'THContentMarkerController'
    var markerArray = [THMarker]()
    var contentSetArray = [THContentSet]()
    override func viewDidLoad() {
       contentMarkerController.dataSource = self
       contentMarkerController.delegate = self
       contentMarkerController.set(parentView: self.view, scrollView: self.scrollView)
       // Data set implemented above
    // 'THContentMarkerControllerDataSource' returns 'THMarker' and 'THContentSet'
    extension ViewController: THContentMarkerControllerDataSource {
    func numberOfMarker(_ contentMarkerController: THContentMarkerController) -> Int {
      return markerArray.count
    func setMarker(_ contentMarkerController: THContentMarkerController, markerIndex: Int) -> THMarker {
      return markerArray[markerIndex]
    func numberOfContent(_ contentMarkerController: THContentMarkerController) -> Int {
      return contentSetArray.count
    func setContentView(_ contentMarkerController: THContentMarkerController, contentSetIndex: Int) -> THContentSet {
      return contentSetArray[contentSetIndex]
    // In 'THContentMarkerControllerDelegate', you can implement the event when the marker is clicked.
    extension  ViewController: THContentMarkerControllerDelegate {
    func markerTap(_ contentMarkerController: THContentMarkerController, markerView: THMarkerView) {
        // If you want the marker to disappear when you select a marker, add below code.
        contentMarkerController.markerHidden(bool: true)


  • set(parentView: UIView, scrollView: UIScrollView) : Sets the UIScrollView on which the marker will be drawn and a UIView to show the content.
  • reloadData() : If THMarker is added or deleted, use reloadData () to reload the data into THContentMarkerController.
  • setMarkerFrame() : When the marker is on the ‘UIScrollView’, it changes the frame of the marker depending on whether it is zooming or not.
  • markerHidden(bool: Bool) : Determines whether the marker is Hidden.
  • contentDismiss() :
    Dismiss the content view of the marker.
  • markerViewSize : You can specify the size of the marker.
  • markerViewImage : You can specify the image of the marker.


THContentMarkerView is released under the MIT license. See LICENSE for details.

Latest podspec

    "name": "THContentMarkerView",
    "version": "0.2.2",
    "summary": "THContentMarkerView is controller, 'THMarker' and 'THContentView'",
    "description": "'THContentMarkerView' is controller, use 'THMarker' and 'THContentSet'. 'THMarker' has marker position and marker content. 'THContentSet' is content view and content key.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Hong Seong Ho": "[email protected]",
        "Changnam Hong": "[email protected]",
        "Han JeeWoong": "[email protected]"
    "platforms": {
        "ios": "10.0"
    "source": {
        "git": "",
        "tag": "0.2.2"
    "source_files": "THContentMarker/*.swift",
    "frameworks": "UIKit",
    "pushed_with_swift_version": "4.0"

Pin It on Pinterest

Share This