programatically add two image to above my label - ios

Question

I'm using a custom library : CAPSPageMenu . Here I have one view controller and I programmatically add the name for that, the view has two tabs. When i click any tab that respective page will display below.
I have set the name and added the animation to swipe between two tabs. But now I need to add image on above of my label, how would I accomplish that?
Here is my code !:
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)
}
Like this i need to add image.As i mention the box above the two labels

Answer 1

Seems you are used a custom library CAPSPageMenu, unfortunately what do you want to do is not available.
However with swift you can do extraordinary things such as expanding PageMenu directly in your code: (I've maded just an example but you can start from it):
Add this code at the bottom of your class or whatever you want:
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()
}
})
}
}
}
}
You can easily use to add an image:
pageMenu?.addImageOverMyMenuItem(0, imageName: "search.png")
and to remove :
pageMenu?.removeImageOverMyMenuItem(0)
P.S. The result would be this:
So , finally following the official demo 1 project (PageMenuDemoStoryboard) in the ViewController at the method viewDidAppear i can add my images like this:
// 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)
...
And you obtain this result:
P.S.S. If it's not clear, I've made this example just using an image named "search.png" but you can use all images do you want to insert in your project.

Answer 2

You are using PageMenu, right?
Basically, PageMenu doesn't have the feature satisfy your needs.
If you want to use PageMenu, you have to modify this module.
Check MenuItemView Class in CAPSPageMenu.swift

Answer 3

I have also customised CAPSPageMenu , using the answer of #Alessandro Ornano that helped me to add the image above text, so anyone using can also set width,height of image and also can set the position of image as per device by using code below.Hope it will help someone.
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
}
}
}
You can easily use to add an image in 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")
Result :