Question

我正在使用自定义库：CAPSPageMenu。这里我有一个视图控制器，我以编程方式为其添加名称，视图有两个选项卡。当我点击下面显示相应页面的任何标签时。

我已设置名称并添加动画以在两个标签之间滑动。但现在我需要在我的标签上方添加图像，我将如何实现？

这是我的代码！：

var pageMenu : CAPSPageMenu? // pager object

var controllerArray : [UIViewController] = [] // number view pager
override func viewDidLoad() {

        super.viewDidLoad()
        pageSettings()

}
func pageSettings() {
        tableView.dataSource = self
        tableView.delegate = self

        let controller1 : UIViewController = UIViewController()
        controller1.title = "FAVOURITES"
        controllerArray.append(controller1)

        let controller2 : UIViewController = UIViewController()
        controller2.title = "RECENT SEARCH"
        controllerArray.append(controller2)


        let leftRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(self.didLeftSwipe(_:)))
        leftRecognizer.direction = .Left
        self.tableView.addGestureRecognizer(leftRecognizer)

        let rightRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(self.didRightSwipe(_:)))
        rightRecognizer.direction = .Right
        self.tableView.addGestureRecognizer(rightRecognizer)
    }

像这样我需要添加图片。正如我提到两个标签上面的框

Answer 1

似乎您使用的是自定义库CAPSPageMenu，遗憾的是您想要做什么不可用。

然而，有了swift，你可以做一些非凡的事情，例如直接在你的代码中扩展PageMenu :(我只是一个例子，但你可以从它开始）：

将此代码添加到课程的底部或您想要的任何内容：

extension UIView {
    func fadeIn(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
        UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            self.alpha = 1.0
            }, completion: completion)  }

    func fadeOut(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            self.alpha = 0.0
            }, completion: completion)
    }
}



extension CAPSPageMenu {
    func addImageOverMyMenuItem(index:Int,imageName:String) {
        if index>=0 && index<self.menuItems.count || self.menuItems[index].titleLabel!.frame.height>0 {
            var labelFrame = self.menuItems[index].titleLabel!.frame
            let image: UIImage = UIImage(named: imageName)!
            let bgImage = UIImageView(image: image)
            labelFrame.origin.y = self.menuItems[index].frame.origin.y
            labelFrame.origin.x += (labelFrame.width/10)
            labelFrame.size.width -= (labelFrame.width/10)*2
            labelFrame.size.height = self.menuItems[index].titleLabel!.frame.size.height/3
            bgImage.frame = labelFrame
            bgImage.tag = 9999
            bgImage.alpha = 0.0
            self.menuItems[index].addSubview(bgImage)
            bgImage.fadeIn(completion: {
                (finished: Bool) -> Void in
                if finished {
                    // image is showed, do whatever you want 
                }
            })
        } else {
            print("Due to index out of range or titleLabel dont yet setted i cannot set image")
        }
    }

    func removeImageOverMyMenuItem(index:Int) {
            if index>=0 && index<self.menuItems.count {
                if let bgImage = self.menuItems[index].viewWithTag(9999) {
                    bgImage.fadeOut(completion: {
                        (finished: Bool) -> Void in
                        if finished {
                            bgImage.removeFromSuperview()
                        }
                    })
                }
            }
     }
  }

您可以轻松使用添加图片：

pageMenu?.addImageOverMyMenuItem(0, imageName: "search.png")

并删除：

pageMenu?.removeImageOverMyMenuItem(0)

P.S。结果将是：

所以，最后按照方法 viewDidAppear 在 ViewController 中的官方演示1项目（PageMenuDemoStoryboard），我可以像这样添加我的图像：

// Initialize scroll menu
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height), pageMenuOptions: parameters)

pageMenu?.addImageOverMyMenuItem(0, imageName: "search.png")
pageMenu?.addImageOverMyMenuItem(1, imageName: "search.png")
pageMenu?.addImageOverMyMenuItem(2, imageName: "search.png")
self.addChildViewController(pageMenu!)
self.view.addSubview(pageMenu!.view)

pageMenu!.didMoveToParentViewController(self)
...

你得到了这个结果：

P.S.S。如果不清楚，我使用名为＆＃34; search.png＆＃34;的图片制作了这个例子。但是您可以使用要在项目中插入的所有图像。

Answer 2

您正在使用PageMenu，对吧？

基本上，PageMenu并不具备满足您需求的功能。如果要使用PageMenu，则必须修改此模块。检查CAPSPageMenu.swift中的MenuItemView类

Answer 3

我也定制了CAPSPageMenu，使用@Alessandro Ornano的答案帮助我将图像添加到文本上方，所以任何使用的人也可以设置图像的宽度，高度，也可以将图像的位置设置为每个设备使用下面的代码。希望它可以帮助某人。

extension UIView {
func fadeIn(duration: TimeInterval = 0.0, delay: TimeInterval = 0.0, completion: @escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
    UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
        self.alpha = 1.0
    }, completion: completion)  }

func fadeOut(duration: TimeInterval = 0.0, delay: TimeInterval = 0.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
    UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
        self.alpha = 0.0
    }, completion: completion)
  }
}
extension CAPSPageMenu {
func addImageOverMyMenuItem(index:Int,imageName:String) {
    if index>=0 && index<self.menuItems.count || self.menuItems[index].titleLabel!.frame.height>0 {
        var labelFrame = self.menuItems[index].titleLabel!.frame
        let image: UIImage = UIImage(named: imageName)!
        let bgImage = UIImageView(image: image)
        labelFrame.origin.y = self.menuItems[index].frame.origin.y
        labelFrame.origin.x += (labelFrame.width/9)
        labelFrame.size.width -= (labelFrame.width/10)*5
        labelFrame.size.height = self.menuItems[index].titleLabel!.frame.size.height/3
        bgImage.frame = labelFrame

        bgImage.tag = 9999
        bgImage.alpha = 0.0


        if UIDevice().userInterfaceIdiom == .phone {
            switch UIScreen.main.nativeBounds.height {
            case 480:
                print("iPhone Classic")
            case 960:
                print("iPhone 4 or 4S")
                bgImage.frame = CGRect(origin: CGPoint(x:20 ,y :0), size: CGSize(width:30, height: 30))
            case 1136:
                print("iPhone 5 or 5S or 5C")
                bgImage.frame = CGRect(origin: CGPoint(x:20 ,y :0), size: CGSize(width:35, height: 35))
            case 1334:
                print("iPhone 6 or 6S")
                bgImage.frame = CGRect(origin: CGPoint(x:30 ,y :0), size: CGSize(width:35, height: 35))
            case 2208:
                print("iPhone 6+ or 6S+")
                bgImage.frame = CGRect(origin: CGPoint(x:35 ,y :0), size: CGSize(width:35, height: 35))
            default:
                print("unknown")
                bgImage.frame = CGRect(origin: CGPoint(x:40 ,y :0), size: CGSize(width:30, height: 30))
            }
        }


        self.menuItems[index].addSubview(bgImage)
        bgImage.fadeIn(completion: {
            (finished: Bool) -> Void in
            if finished {
                // image is showed, do whatever you want
            }
        })
    } else {
        print("Due to index out of range or titleLabel dont yet setted i cannot set image")
    }
}
 func removeImageOverMyMenuItem(index:Int) {
    if index>=0 && index<self.menuItems.count {
        if let bgImage = self.menuItems[index].viewWithTag(9999) {
            bgImage.fadeOut(completion: {
                (finished: Bool) -> Void in
                if finished {

                    bgImage.removeFromSuperview()
                }
            })
        }
    }
  }
}


extension UIDevice {
    var iPhone: Bool {
        return UIDevice().userInterfaceIdiom == .phone
    }
    enum ScreenType: String {
        case iPhone4
        case iPhone5
        case iPhone6
        case iPhone6Plus
        case unknown
    }
    var screenType: ScreenType {
        guard iPhone else { return .unknown }
        switch UIScreen.main.nativeBounds.height {
        case 960:
            return .iPhone4
        case 1136:
            return .iPhone5
        case 1334:
            return .iPhone6
        case 2208:
            return .iPhone6Plus

        default:
            return .unknown
        }
    }
}

您可以轻松地使用viewDidLoad()：

添加图片

 pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(origin: CGPoint(x: 0,y :70), size: CGSize(width: self.view.frame.width, height: self.view.frame.height)), pageMenuOptions: menuParam)
        pageMenu?.addImageOverMyMenuItem(index: 0, imageName: "detail.png")
        pageMenu?.addImageOverMyMenuItem(index: 1, imageName: "gallery.png")
        pageMenu?.addImageOverMyMenuItem(index: 2, imageName: "time.png")
        pageMenu?.addImageOverMyMenuItem(index: 3, imageName: "map.png")

结果：

以编程方式将两个图像添加到我的标签上方

3 个答案: