I'm trying to use this repo to create a PageMenu like you'd find on Instagram. I have the slide functionality working but the scroll menu does not appear underneath the navbar like it should. I've looked at Implementing PageMenu / initializing view controllers from storyboard but it doesn't really help my issue. I have also tried using the demo provided in the repo and customising it to my needs but then when I drag it on to my project it leaves out the scroll menu.
Here is my code in the viewControler:
// Initialize view controllers to display and place in array
var controllerArray : [UIViewController] = []
let controller1 : TestTableViewController = TestTableViewController(nibName: "TestTableViewController", bundle: nil)
controller1.parentNavigationController = self.navigationController
controller1.title = "FAVOURITES"
controllerArray.append(controller1)
let controller2 : RecentsTableViewController = RecentsTableViewController(nibName: "RecentsTableViewController", bundle: nil)
controller2.title = "RECIPES"
controller2.parentNavigationController = self.navigationController
controllerArray.append(controller2)
// Customize menu (Optional)
let parameters: [CAPSPageMenuOption] = [
.menuItemSeparatorWidth(4.3),
.scrollMenuBackgroundColor(UIColor.white),
.viewBackgroundColor(UIColor(red: 247.0/255.0, green: 247.0/255.0, blue: 247.0/255.0, alpha: 1.0)),
.bottomMenuHairlineColor(UIColor(red: 33/255.0, green: 161/255.0, blue: 77/255.0, alpha: 1)),
.selectionIndicatorColor(UIColor(red: 33/255.0, green: 161/255.0, blue: 77/255.0, alpha: 1.0)),
.menuMargin(20.0),
.menuHeight(40.0),
.selectedMenuItemLabelColor(UIColor(red: 33/255.0, green: 161/255.0, blue: 77/255.0, alpha: 1.0)),
.unselectedMenuItemLabelColor(UIColor(red: 40.0/255.0, green: 40.0/255.0, blue: 40.0/255.0, alpha: 1.0)),
.menuItemFont(UIFont(name: "HelveticaNeue-Medium", size: 14.0)!),
.useMenuLikeSegmentedControl(true),
.menuItemSeparatorRoundEdges(true),
.selectionIndicatorHeight(2.0),
.menuItemSeparatorPercentageHeight(0.1)
]
// Initialize scroll menu
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0.0, y: 0.0, width: self.view.frame.width, height: self.view.frame.height), pageMenuOptions: parameters)
// Optional delegate
pageMenu!.delegate = self
self.view.addSubview(pageMenu!.view)
}
Please help me if you can. Thanks in advance! :)
Replace this
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0.0, y: 0.0, width: self.view.frame.width, height: self.view.frame.height), pageMenuOptions: parameters)
With
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0.0, y: 64, width: self.view.frame.width, height: self.view.frame.height), pageMenuOptions: parameters)
You have to give y to 64 because status bar and navigation bar covers 64 points.
Related
I have the following subview
webView = WKWebView(frame: CGRect(x: 3, y: horizontalLine.frame.maxY + 8, width: self.view.frame.width-6, height: CGFloat(self.view.frame.height - 150)))
webView.navigationDelegate = self
self.view.addSubview(webView)
I want to add the following subview on top of it (not inside it).
textSizeChangeView = UIView(frame: CGRect(x: 0, y: textBtn.frame.maxY, width: self.view.frame.width, height: 100))
textSizeChangeView.backgroundColor = UIColor(red: 0.97, green: 0.98, blue: 0.98, alpha: 1.00)
let mySlider = UISlider(frame:CGRect(x: 10, y: 0, width: self.view.frame.width - 20, height: 30))
self.textSizeChangeView.addSubview(mySlider)
mySlider.center = self.textSizeChangeView.center
mySlider.minimumValue = 1
mySlider.maximumValue = 2
mySlider.isContinuous = true
mySlider.tintColor = UIColor(red: 0.33, green: 0.79, blue: 0.93, alpha: 1.00)
textSizeChangeView.isHidden = true
mySlider.addTarget(self, action: #selector(self.sliderValueChanged(sender:)), for: .valueChanged)
self.view.addSubview(self.textSizeChangeView)
How can I do this?
The order of adding subviews matters.
If you want to make sure that textSizeChangeView will be on top of webView in case of overlapping then you need to make sure that self.view.addSubview(webView) is called before self.view.addSubview(self.textSizeChangeView).
When Controller present it shows white space. When I am clicking another tab and comeback to the same tab. which shown white space. Then working fine . let me know how can I remove white space in it.(White space is showing above of Buy MB for BTC)
Screenshot :
override func viewDidAppear(_ animated: Bool) {
pager()
}
func pager()
{
let buy = storyboard?.instantiateViewController(withIdentifier: "BuyMBVCSID") as! BuyMBVC
buy.parentNavigationController = navigationController!
buy.title = "Buy MB"
controllerArray.append(buy)
let sell = storyboard?.instantiateViewController(withIdentifier: "SellMBVCSID") as! SellMBVC
sell.parentNavigationController = navigationController!
sell.title = "Sell MB"
controllerArray.append(sell)
// Customize menu (Optional)
let parameters: [CAPSPageMenuOption] = [
.scrollMenuBackgroundColor(UIColor(red: 72/255.0, green: 175/255.0, blue: 230/255.0, alpha: 1.0)),
.viewBackgroundColor(UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0)),
.selectionIndicatorColor(UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1.0)),
.addBottomMenuHairline(false),
.menuItemFont(UIFont(name: "Times New Roman", size: 16)!),
.menuItemWidth((self.pagerView.frame.width-30)/3),
.menuHeight(50.0),
.enableHorizontalBounce(true),
.menuItemWidthBasedOnTitleTextWidth(false),
.selectedMenuItemLabelColor(UIColor.white),
.unselectedMenuItemLabelColor(UIColor.white),
.menuItemSeparatorWidth(4.5),
.useMenuLikeSegmentedControl(false),
.menuItemSeparatorRoundEdges(true),
.selectionIndicatorHeight(2.0),
.menuItemSeparatorPercentageHeight(0.0),
]
// Initialize scroll menu
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0.0, y: 0.0, width: self.pagerView.frame.width, height: self.pagerView.frame.height), pageMenuOptions: parameters)
self.pagerView.addSubview(pageMenu!.view)
// End Pagemenu
}
Change
.selectionIndicatorColor(UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1.0))
to
.selectionIndidcatorColor(UIColor.clear)
that should do the trick
I have a UIViewController with a navigation bar on top. I want to replace the title with a segmented control.
class AViewController: UIViewController
{
private var navigationbar = UINavigationBar();
private var segment = UISegmentedControl();
override func viewDidLoad()
{
super.viewDidLoad()
// Do any additional setup after loading the view.
buildThebar();
}
func buildThebar()
{
navigationbar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 64));
navigationbar.backgroundColor = UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0);
segment = UISegmentedControl(items: ["Testy", "Tests"]);
segment.sizeToFit();
segment.tintColor = UIColor(red: 104/255, green: 90/255, blue: 132/255, alpha: 1.0);
let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelbar(sender:)));
cancel.tintColor = UIColor(red: 104/255, green: 90/255, blue: 132/255, alpha: 1.0);
let title = UINavigationItem(title: "Testing");
title.leftBarButtonItem = cancel;
navigationbar.setItems([title], animated: false);
self.navigationItem.titleView = segment;
// self.navigationItem.leftBarButtonItem = cancel;
self.view.addSubview(navigationbar);
}
Ok found issue.
What you missed is setting titleView to the navigation item you created.
title.titleView = segment
You are adding titleView to navigation item self.navigationItem.titleView = segment; but you need to set it to your navigationItem which you are passing to your navigation bar.
Final code
func buildThebar()
{
navigationbar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 64));
navigationbar.backgroundColor = UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0);
segment = UISegmentedControl(items: ["Testy", "Tests"]);
segment.sizeToFit();
segment.tintColor = UIColor(red: 104/255, green: 90/255, blue: 132/255, alpha: 1.0);
let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: nil);
cancel.tintColor = UIColor(red: 104/255, green: 90/255, blue: 132/255, alpha: 1.0);
let title = UINavigationItem(title: "Testing"); //better let title = UINavigationItem()
title.leftBarButtonItem = cancel;
title.titleView = segment
navigationbar.setItems([title], animated: false);
// self.navigationItem.leftBarButtonItem = cancel;
self.view.addSubview(navigationbar);
}
EDIT:
There is another issue with how you are setting navigation bar frame. O/P with your code looks like
I believe thats not what you want! the reason why it looks like that is because your frame starts from y = 0 but in iPhone and iPads portait mode there is a status bar on top which consumes variable amount of space based on various condition (Usually people hardcode or assume it to be 20 but iPhone X the height status bar might vary and even in normal iPhones when you receive a call status bar height changes). Its always better to use auto layout and safe margin to add navigation bar to View.
But if you really wanna hard code frames then you can use
navigationbar = UINavigationBar(frame: CGRect(x: 0, y: 20, width: self.view.bounds.width, height: 44));
O/P looks like
Hope it helps.
let title = UINavigationItem()
title.titleView = segment
title.rightBarButtonItem = cancel
navigationbar.setItems([title], animated: false);
self.view.addSubview(navigationbar);
Just a matter of order of assignment of the objects in operation.
I am trying to make my Tab Bar in my tab bar controller to have a low opacity background, so it is semi transparent, i am trying to do this programatically, however the background changes to the correct color, but always appears solid, with no transparency.
Here is the code in my TabBarViewController
class TabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
self.tabBar.unselectedItemTintColor = UIColor(red: 17.0/255.0, green: 70.0/255.0, blue: 95.0/255.0, alpha: 0.4)
self.tabBar.barTintColor = UIColor(red: 17.0/255.0, green: 70.0/255.0, blue: 95.0/255.0, alpha: 0.5)
// Do any additional setup after loading the view.
}
}
For such a case, you should generate a customized UIImage to the tab bar backgroundimage property.
Let's assume that your desired color for your tab bar -that should be transparent- is black, you could implement in your custom UITabBarController:
class TabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let transperentBlackColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.5)
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
transperentBlackColor.setFill()
UIRectFill(rect)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
tabBar.backgroundImage = image
}
UIGraphicsEndImageContext()
}
}
So, as an Output, if we assumed that the background color of your view controller is blue, it should looks like:
As shown, the tab bar is not purely black, it contains transparency (0.5) as expected.
Also, for checking how you could generate a solid-color UIImage, you could check this SO answer : Create UIImage with solid color in Swift.
Just replace barTintColor with backgroundColor.
override func viewDidLoad() {
super.viewDidLoad()
self.tabBar.unselectedItemTintColor = UIColor(red: 17.0/255.0, green: 70.0/255.0, blue: 95.0/255.0, alpha: 0.4)
self.tabBar.backgroundColor = UIColor(red: 17.0/255.0, green: 70.0/255.0, blue: 95.0/255.0, alpha: 0.5)
// Do any additional setup after loading the view.
}
private func setTabbarOpacity() {
let transperentBlackColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.75)
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
transperentBlackColor.setFill()
UIRectFill(rect)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
tabBar.backgroundImage = image
}
UIGraphicsEndImageContext()
}
I drag my labels to my self.view in storyboard, you can see the white labels, in the gray vc, I am sorry for the tiny distinction to found :
Then I add a gradual layer use code :
let fromColor = UIColor.init(red: 243/255.0, green: 143/255.0, blue: 30/255.0, alpha: 1).cgColor
let centerColor = UIColor.init(red: 237/255.0, green: 90/255.0, blue: 36/255.0, alpha: 1).cgColor
let toColor = UIColor.init(red: 233/255.0, green: 28.0/255.0, blue: 36/255.0, alpha: 1).cgColor
gradul_layer = CAGradientLayer.init()
gradul_layer?.frame = CGRect.init(x: 0, y: 64, width: initFrame.width, height: initFrame.height)
gradul_layer?.colors = [
fromColor,
centerColor,
toColor
]
gradul_layer?.startPoint = CGPoint.init(x: 0.5, y: 0.3)
gradul_layer?.endPoint = CGPoint.init(x: 0.5, y: 0.7)
self.view.layer.addSublayer(gradul_layer!)
And then when I run my app in simulator (or device) can not show the label, but I can capture the View Hierarchy in Xcode, and I can see the label.
You see the picture, left is simulator(the labels did not show), right is the capture View Hierarchy(the labels shows up).
Update
My question is not how to let the label show in my screen, my doubt is why View Hierarchy show, my device or simulator will not.