I am using cosmicmind material swift library and am following the examples code to try to get the FAB MenuView working.
I have copied the code and added the buttons i want, to test i am just testing with 2 buttons. The problem I am facing is with the handleMenu function:
/// Handle the menuView touch event.
internal func handleMenu() {
if menuView.menu.opened {
menuView.close()
(menuView.menu.views?.first as? MaterialButton)?.animate(MaterialAnimation.rotate(rotation: 0))
} else {
menuView.menu.open() { (v: UIView) in
(v as? MaterialButton)?.pulse()
}
(menuView.menu.views?.first as? MaterialButton)?.animate(MaterialAnimation.rotate(rotation: 0.125))
}
}
The full code for this UINavigationController:
import UIKit
import Material
class MyTeeUpsController: UINavigationController {
/// MenuView reference.
private lazy var menuView: MenuView = MenuView()
/// Default spacing size
let spacing: CGFloat = 16
/// Diameter for FabButtons.
let diameter: CGFloat = 56
/// Handle the menuView touch event.
internal func handleMenu() {
if menuView.menu.opened {
menuView.close()
(menuView.menu.views?.first as? MaterialButton)?.animate(MaterialAnimation.rotate(rotation: 0))
} else {
menuView.menu.open() { (v: UIView) in
(v as? MaterialButton)?.pulse()
}
(menuView.menu.views?.first as? MaterialButton)?.animate(MaterialAnimation.rotate(rotation: 0.125))
}
}
/// Handle the menuView touch event.
internal func handleButton(button: UIButton) {
print("Hit Button \(button)")
}
private func prepareMenuView() {
//let w: CGFloat = 52
var img:UIImage? = MaterialIcon.cm.add?.imageWithRenderingMode(.AlwaysTemplate)
let button1: FabButton = FabButton()//frame: CGRectMake((view.bounds.width - w)-10, 550,w,w))
button1.setImage(img, forState: .Normal)
button1.setImage(img, forState: .Highlighted)
button1.pulseColor = MaterialColor.blue.accent3
button1.backgroundColor = MaterialColor.blueGrey.lighten1
button1.borderColor = MaterialColor.blue.accent3
button1.borderWidth = 1
button1.addTarget(self, action: #selector(handleMenu), forControlEvents: .TouchUpInside)
menuView.addSubview(button1)
img = UIImage(named: "filing_cabinet")?.imageWithRenderingMode(.AlwaysTemplate)
let button2:FabButton = FabButton()
button2.depth = .None
button2.setImage(img, forState: .Normal)
button2.setImage(img, forState: .Highlighted)
button2.pulseColor = MaterialColor.blue.accent3
button2.borderColor = MaterialColor.blue.accent3
button2.borderWidth = 1
button2.backgroundColor = MaterialColor.blueGrey.lighten1
button2.addTarget(self, action: #selector(handleButton), forControlEvents: .TouchUpInside)
menuView.addSubview(button2)
menuView.menu.direction = .Up
menuView.menu.baseSize = CGSizeMake(diameter, diameter)
menuView.menu.views = [button1,button2]
view.layout(menuView).width(diameter).height(diameter).bottomRight(bottom: 58, right: 20)
}
private func prepareTabBarItem() {
//todo
}
override func viewDidLoad() {
super.viewDidLoad()
prepareMenuView()
}
}
The menu I have embedded as a subView of UINavigationController. The reason I have added to this subView is because the FAB is on top of a search/display controller (TableView) and this way the FAB can remain on top of the TableView even when scrolling the contents of the Table.
When the view initially loads, I can click on the menu button and the animation happens correctly and button2 appears. However, it does not allow me to hit the second button OR close the menu by pressing button1 again UNLESS I navigate to another tab in the tab bar controller and then navigate back to the tab where the FAB MenuView was located. I am loading my prepareMenuView() function in viewDidLoad just as it is shown in the example.
Not sure how to modify this so that it can behave as desired. It doesn't make sense to pick another ViewController lifecycle method to run prepareMenuView().
so the issue with your code is that button2 only has the selector handler for handleButton. The handleMenu handler is not added to it. So you have two solutions.
Add the handleMenu call to the handleButton
internal func handleButton(button: UIButton) {
print("Hit Button \(button)")
handleMenu(button)
}
Add a selector handler to the button2 instance for handleMenu.
button2.addTarget(self, action: #selector(handleMenu), forControlEvents: .TouchUpInside)
button2.addTarget(self, action: #selector(handleButton), forControlEvents: .TouchUpInside)
Either option will work, just remember that order matters. So if you want the menu to close before you load some content, then call the method before or add the selector handler handleMenu before you add the handleButton.
:) All the best!
Related
I add a custom button to the tabBar in my MyViewController.viewDidLoad(subclass of UITabBarController)
But I find it doesn't response the selector.
If I delay one second to add button(in DispatchQueue.main.asyncAfter closure) ,it works OK.
I think it's not the right way to resolve it.
func addButton() {
let button = UIButton(type: UIButton.ButtonType.custom)
button.bounds = CGRect(x:0,y:0,width:30,height:30);
button.backgroundColor = UIColor.red
button.center = CGPoint(x:self.tabBar.frame.size.width/2, y:self.tabBar.frame.size.height/2 - 20);
button.addTarget(self, action: #selector(click(button:)), for: UIControl.Event.touchUpInside)
tabBar.addSubview(button)
}
You have added button to UITabBar of UITabBarController as half of part of the button would appear above the Tabbar and half of below the Tabbar as per frame.
So I guess you will not get click on part of that button which is out of Tabbar(above Tabbar) would not get touch. I you will make button little big OR try to click with arrow in simulator, you will get idea.
If you need to have button at bottom but slightly upper, then please create custom Tabbar to achieve design like this. Or else you can add that button into UITabBarController’s view instead of Tabbar.
class MyTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.addButton()
}
func addButton() {
let button = UIButton(type: UIButton.ButtonType.custom)
button.bounds = CGRect(x:0,y:0,width:50,height:50); //1
button.backgroundColor = UIColor.purple
button.center = CGPoint(x:self.tabBar.frame.size.width/2, y:self.tabBar.frame.size.height/2 - 50 + self.tabBar.frame.origin.y); //2
button.addTarget(self, action: #selector(click(button:)), for: UIControl.Event.touchUpInside)
button.layer.cornerRadius = button.frame.size.height/2
button.layer.masksToBounds = false
button.layer.shadowColor = UIColor.black.withAlphaComponent(0.5).cgColor
button.layer.shadowRadius = 5.0
button.layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
button.layer.shadowOpacity = 0.5
//tabBar.addSubview(button) //3
self.view.addSubview(button). //4
}
#objc func click(button: UIButton) {
print("Button get clicked")
}
}
I have marked four things with commented by numbers at the end of lines, that you can make to your code and try.
I am building a quote app using TGLParallaxCarousel library in my project. I try to custom the CustomView of TGLParallaxCarouselItem by adding two UIButtons (favButton and shareButton) on it.
screenshot to the quote cards (CustomView) I create
I am able to change the UIButton view based on its state--whether the current quote is faved or not, by doing this:
convenience init(frame: CGRect, number: Int) {
self.init(frame: frame)
currentQuote = quoteData[number]
favButton.tag = number
currentQuote.faved == true ? favButton.setImage(#imageLiteral(resourceName: "fav-on"), for: .normal) : favButton.setImage(#imageLiteral(resourceName: "fav-off"), for: .normal)
}
However I need to be able to turn the fav on and off by clicking the favButton. I tried to connect the favButton directly as an IBAction to the XIB file, tried to addAction to function, but I still can't access the favButton click state.
Please help. What should I do?
UPDATE
I've tried addTarget on favButton. It's not working. My tap is detected as tap on CustomView rather than specifically on favButton.
Here's the detectTap function that fired when I tap anywhere on the CustomView (including on the favButton). This function is within the TGLParallaxCarousel.swift
func detectTap(_ recognizer:UITapGestureRecognizer) {
let targetPoint: CGPoint = recognizer.location(in: recognizer.view)
currentTargetLayer = mainView.layer.hitTest(targetPoint)!
guard let targetItem = findItemOnScreen() else { return }
let firstItemOffset = (items.first?.xDisp ?? 0) - targetItem.xDisp
let tappedIndex = -Int(round(firstItemOffset / xDisplacement))
self.delegate?.carouselView(self, didSelectItemAtIndex: tappedIndex)
if targetItem.xDisp == 0 {
self.delegate?.carouselView(self, didSelectItemAtIndex: tappedIndex)
}
else {
selectedIndex = tappedIndex
}
}
Did you try to use addTarget?
convenience init(frame: CGRect, number: Int) {
self.init(frame: frame)
currentQuote = quoteData[number]
favButton.tag = number
currentQuote.faved == true ? favButton.setImage(#imageLiteral(resourceName: "fav-on"), for: .normal) : favButton.setImage(#imageLiteral(resourceName: "fav-off"), for: .normal)
favButton.addTarget(self, action: #selector(toggle), for: .touchUpInside)
}
#objc fileprivate func toggle() {
currentQuote.faved = !currentQuote.faved
currentQuote.faved == true ? favButton.setImage(#imageLiteral(resourceName: "fav-on"), for: .normal) : favButton.setImage(#imageLiteral(resourceName: "fav-off"), for: .normal)
}
I'm using CosmicMind's Material library for swift. I'm trying to get the Menu example to work with programmatic autolayout - where can I find an example of how to make this work?
From the examples on Github I haven't figured out a way to use autolayout.
/// Prepares the FlatMenu example.
private func prepareFlatbMenuExample() {
let btn1: FlatButton = FlatButton()
btn1.addTarget(self, action: "handleFlatMenu", forControlEvents: .TouchUpInside)
btn1.setTitleColor(MaterialColor.white, forState: .Normal)
btn1.backgroundColor = MaterialColor.blue.accent3
btn1.pulseColor = MaterialColor.white
btn1.setTitle("Sweet", forState: .Normal)
view.addSubview(btn1)
let btn2: FlatButton = FlatButton()
btn2.setTitleColor(MaterialColor.blue.accent3, forState: .Normal)
btn2.borderColor = MaterialColor.blue.accent3
btn2.pulseColor = MaterialColor.blue.accent3
btn2.borderWidth = .Border1
btn2.setTitle("Good", forState: .Normal)
view.addSubview(btn2)
let btn3: FlatButton = FlatButton()
btn3.setTitleColor(MaterialColor.blue.accent3, forState: .Normal)
btn3.borderColor = MaterialColor.blue.accent3
btn3.pulseColor = MaterialColor.blue.accent3
btn3.borderWidth = .Border1
btn3.setTitle("Nice", forState: .Normal)
view.addSubview(btn3)
// Initialize the menu and setup the configuration options.
flatMenu = Menu(origin: CGPointMake(spacing, view.bounds.height - height - spacing))
flatMenu.direction = .Down
flatMenu.spacing = 8
flatMenu.buttonSize = CGSizeMake(120, height)
flatMenu.buttons = [btn1, btn2, btn3]
}
flatMenu is of type Menu from the Material library, and is a class that holds each of the buttons in the menu. It appears the "origin" is what controls the positioning on the page, but because Menu isn't a UIView subclass, I'm not sure how to use this with autolayout.
public class Menu {
...
}
What view do you have the buttons in? Try positioning the superview with AutoLayout using the same dimensions as your button size and then set the origin of the Menu as CGRectZero.
Also make sure you have clipsToBounds for the superview set to false (the default). And because the buttons are outside the bounds of your autolayout placed view, you'll need to use a custom UIView subclass like the one below to handle the actions on the buttons.
class MenuParentView: UIView {
override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
//because the subviews will be outside the bounds of this view
//we need to look at the subviews to see if we have a hit
for subview in self.subviews {
let pointForTargetView = subview.convertPoint(point, fromView: self)
if CGRectContainsPoint(subview.bounds, pointForTargetView) {
return subview.hitTest(pointForTargetView, withEvent: event)
}
}
return super.hitTest(point, withEvent: event)
}
}
I have a scrollview inside a view. Inside the scrollview I create programmatically 5 buttons. Every button loads a different image with a different tag each one. I added a function that is called when pressing the buttons.
let avatarsListScrollingView = avatarsListView(CGSizeMake(70.0, 55.0), avatarCount: 5)
func avatarsListView(buttonSize:CGSize, avatarCount:Int) -> UIView {
**CODE**
for i in 0...(avatarCount-1) {
let button = UIButton(type: .Custom)
**CODE**
button.setImage(UIImage(named: avatarsList[i]), forState: .Normal)
button.tag = i
button.addTarget(self, action: "avatarListSelected:", forControlEvents: .TouchUpInside)
avatarButtonView.addSubview(button)
}
return avatarButtonView
}
Then when pressing the buttons, I call to "avatarListSelected":
func avatarListSelected(sender:UIButton){
if let image = sender.imageView?.image?.imageWithRenderingMode(.AlwaysTemplate) {
sender.setImage(image, forState: .Normal)
sender.tintColor = UIColor.redColor()
}
self.addAvatarView.reloadInputViews()
}
This function tints the image button to red, it is working fine, but the problem is that when I press some other button, I want the other one goes to the original color. Right now every button that I press gets in red.
I tried to add the call to "self.addAvatarView.reloadInputViews()" to try to "redraw" again all the buttons, but never gets called.
Do you guys know some way to do this?
Thanks to everybody!
This is the final code that solved the problem:
func avatarListSelected(sender:UIButton){
print(sender.tag)
if let image = sender.imageView?.image?.imageWithRenderingMode(.AlwaysTemplate) {
sender.setImage(image, forState: .Normal)
sender.tintColor = UIColor.redColor()
}
for view in self.avatarButtonView.subviews as [UIView] {
if let btn = view as? UIButton {
if btn.tag != sender.tag {
btn.setImage(UIImage(named: avatarsList[btn.tag]), forState: .Normal)
}
}
}
}
Create a property selectedButton: UIButton? and keep a reference to the selected button there. Don't forget to update it in avatarListSelected method and before you change it, if it isn't nil, change its color to original (and then change it).
If the buttons have different original colors, subclass UIButton class and keep the original color there.
I don't know if is better approach or answer, but, i maybe could delivery this using this approach:
Create a method that will "fill" the color for your choice button and "clear" color to others , but its a method that loop through UIScrollView and look for each UIButton. Something like this :
func setBackgroundColorButton(color:UIColor , buttonTag:Int){
for view in self.scrollView.subviews as [UIView] {
if let btn = view as? UIButton {
if btn == buttonTag {
btn.tintColor = color
} else {
btn.tintColor = UIColor.whiteColor()
}
}
}
}
This is the concept, i didn't tested, but maybe just need adjust to search inside your scroll view or similar.
But with this will be work nice i believe :D
You could do it like this
for i in 0...5 {
let button = UIButton(type: .Custom)
let x = 50 * i + 10
let y = 50
button.frame = CGRectMake(CGFloat(x), CGFloat(y), 40, 40)
button.setTitle("\(i)", forState: .Normal)
button.tag = i
button.backgroundColor = UIColor.greenColor()
button.tintColor = UIColor.blueColor()
button.addTarget(self, action: "avatarListSelected:", forControlEvents: .TouchUpInside)
self.view.addSubview(button)
}
func avatarListSelected(sender : UIButton){
sender.backgroundColor = UIColor.orangeColor()
for view in self.view.subviews{
if(view.isKindOfClass(UIButton)){
let button = view as! UIButton
if button.tag != sender.tag{
button.backgroundColor = UIColor.greenColor()
}
}
}
}
The frame etc is just for demonstation purpose only, you should of course use your own value. The tintColor property is not valid for all button types. Read the documentation for more information.
EDIT
This is my current code with the programmed buttons.
override func viewDidLoad() {
super.viewDidLoad()
self.playVideo()
var filter = UIView()
filter.frame = self.view.frame
filter.backgroundColor = UIColor.orangeColor()
filter.alpha = 0.15
self.view.addSubview(filter)
// Do any additional setup after loading the view, typically from a nib.
//Add Images
var logoImage : UIImageView
logoImage = UIImageView(frame:CGRectMake(136, 50, 102, 104));
logoImage.image = UIImage(named:"patchicon.png")
self.view.addSubview(logoImage)
var textLogo : UIImageView
textLogo = UIImageView(frame:CGRectMake(51, 0, 273, 371));
textLogo.image = UIImage(named:"logopatch.png")
self.view.addSubview(textLogo)
//Add Buttons
let buttonLogin = UIButton.buttonWithType(.Custom) as! UIButton
buttonLogin.frame = CGRectMake(16, 519, 343, 60)
buttonLogin.layer.cornerRadius = 0.2 * buttonLogin.bounds.size.width
buttonLogin.addTarget(self, action: "buttonTouched", forControlEvents: UIControlEvents.TouchUpInside)
buttonLogin.setImage(UIImage(named:"loginButton.png"), forState: .Normal)
view.addSubview(buttonLogin)
let buttonRegister = UIButton.buttonWithType(.Custom) as! UIButton
buttonRegister.frame = CGRectMake(16, 587, 343, 60)
buttonRegister.layer.cornerRadius = 0.2 * buttonRegister.bounds.size.width
buttonRegister.addTarget(self, action: "buttonTouched2", forControlEvents: UIControlEvents.TouchUpInside)
buttonRegister.setImage(UIImage(named:"registerButton.png"), forState: .Normal)
view.addSubview(buttonRegister)
}
func buttonTouched()
{
performSegueWithIdentifier("loginTouched", sender: nil)
}
func buttonTouched2()
{
performSegueWithIdentifier("registerTouched", sender: nil)
}
This is what my Storyboard looks like:
http://i.stack.imgur.com/MlEhI.png
How can I program these buttons further to switch into new view controllers? For instance, I want to click the register button and I want the current MainViewController to switch to a new one that will have the information for the user to sign up and so forth...
Thanks!
First, you need to add a target to the button:
buttonLogin.addTarget(self, action: "buttonTouched", forControlEvents: UIControlEvents.TouchUpInside)
And then, add this function:
func buttonTouched()
{
println("touched")
}
To switch to a new view controller, take a look at this
Well, to switch to a "new" view controller, you need to first create that view controller in your storyboard. After that, do you see that line that links the main view controller to the other two? Click that line and go to "Attributes Inspector". In the identifier blank space, fill with whatever you want and then, in the button that you created programmatically, you need to set this:
performSegueWithIdentifier("whateverYouWant", sender: self)
Oh, and don't forget this step: select your main view controller, go to Editor > Embed In > Navigation Controller. If you don't do this, your application will crash.
Hope that helps!
EDIT: Try this:
Write some function like this outside the viewDidLoad method:
func segueToNextVC(sender: UIButton!) {
println("Button pressed, let's see what happens!")
performSegueWithIdentifier("whateverYouWant", sender: self)
}
Then, in your button in viewDidLoad, do like this:
buttonLogin.addTarget(self, action: "segueToNextVC:", forControlEvents: UIControlEvents.TouchUpInside)
Note: Don't forget the : in segueToNextVC:, that's important!
add target to your button..
buttonLogin.addTarget(self, action: "btnpressed:", forControlEvents: .TouchUpInside)
Vtwot is my Second viewController and its Storyboard Id is ViewTwoId..
make UIButtons action like these..
func btnpressed(sender: UIButton!)
{
let jj = self.storyboard!.instantiateViewControllerWithIdentifier("ViewTwoId") as! Vtwot
self.navigationController!.pushViewController(jj, animated: true)
}
i hope it helps..