Scrollable menu using MenuItem's - cocoa

What I am trying to accomplish with Cocos2d, is to create a horizontal menu, which can be swiped from left to right. I posted an image, to show my idea.
The image below has a white bar, where I want to show MenuItem objects, now I want to be able to do a swipe in the white region, so that the next menu item is centered.
Example http://www.wimhaanstra.com/images/MenuExample.png
The problem I am facing is, I would really like to use the Menu (& MenuItem) functionality of Cocos2d, but it seems somehow that the MenuItem object does not accept touches other than just tapping it. Also I want the swipe to be detected not only on the MenuItem, but the whole white bar.
What would be the best approach for this?
Somehow incorporate an UIScrollView, but that would be a shame, because I would like to use OpenGL for everything
Subclasss the MenuItem class, to create one where the ccTouchBegan is handled, and somehow move the whole Menu?
Just leave the whole Menu idea behind, and replace the Menu and MenuItems with sprites which support touching.
I read somewhere that MenuItem's shouldn't really be used for this kind of work, but why not?

Layer can handle touches event.
you can put you menuItems into one layer.
detect a swipe, and move the the menuItems

Related

How to display elements inside NSCollectionView with various shapes

I am a rookie Cocoa guy. I need to design and implement a view which will show collection of labels on Mac OS using Xamarin. These labels will have a text and color associated with them. When shown inside the view, label should expand till it covers whole text and it will be shown with background and foreground colors.
I have attached the picture of this user control on Windows, you can see that labels inside the StackPanel are expanding till they cover the whole text. Hope this gives better idea about my ask.
The $64,000 question is "are these labels controls?" In other words, do you expect the user to click on these to do something, or are they just for display?
If your answer is "just for display", the solution is super simple: Use an NSTextField and programmatically add attributed text (NSAttributedString) to it. Attributed text attaches display properties to runs of text within the field; properties like "background color".
If you want these to be buttons that you can click on, then things get a lot more complicated.
Since you apparently want the button layout to "flow", you might look into imbedding buttons (well, button cells) into an NSTextField using attachments. This is normally how non-text content (say, an image) can be inserted, but with some fiddling it can actually be anything a control cell can draw. See How to insert a NSButton into a NSTextView? (inline).
Warning: this is not a "rookie" topic and will involve control cells and custom event handling.
If I were doing this, I'd probably just create NSButton objects for each label (choosing an appropriate style/look like NSRecessedBezelStyle), create a custom subclass of NSView to contain them, and then override the layout method to position all of the buttons the way I want.
To be thorough, I'd also override the intrinsic size methods so the whole thing could participate in auto-layout, based on the number and size of buttons it contained.

Xamarin Forms label animation at bottom of screen

I'm essentially making a 'shopping cart' UI and I want it so that when the user hits the 'Add' button, a little tiny box-label appears at the bottom of the screen that says 'Added Item' or something like that.
My question is how to do that with my current set up. I am currently using a nested Grid inside of a Scroll view for the main content of the page. I want the box-label to fade in at the bottom of the screen and stay located at the bottom of the screen ontop of everything else even if you scroll, until the animation fades.
Now i figure it doesn't make sense to add it into the grid since the grid's end will be out of view in the scrolling part of the scroll view, and same for the Scroll View. I am considering nesting the entire scroll view inside of a stack layout but i fear the button will just be located at the end of the stack layout under the scroll view instead of on TOP of the scroll view. How do you recommend I achieve this effect?
I prefer not to use a custom renderer if possible due to my lack of experience in the three separate platforms.
Thanks
Make vertically oriented stack layout. When you need to add you animation add it programmatically to the stack. When it finishes remove it from stack. Your scroll view will not affect animation

NSTextField dragging values

I am trying to create a text field in the Mac OSX environment that allows a user to select a number and drag horizontally to adjust that number up and down.
I know this can be done because Apple have implemented it in the inspector panel of the Sprite Kit emitter section: see the image
I have tried sub classing NSTextField to capture mouse drag events and doing the math, but they don't seem to get passed through. The mouse down event does though...
I have also tried placing a dummy view over the top and catching events as they come through. This works for mouse down, but again, the mouse dragged is never called. I know that the view can receive the mouse dragged event though, because if I place that view somewhere that a text field isn't under it, everything works fine.
What are my options here? I feel I have tried everything and the only option left is to create a new control from scratch. I don't mind that too much, but I also want the user to be able to add equations in the text field and drag individual values - that means the full functionality of NSTextField will need to be rebuilt just to add this dragging feature... Is there anything else???

NSWindow's title as indicator popup button

I'm trying to make my first Cocoa app (previously I was making iOS apps) and what I wish to do for my custom view is make it's title clickable with indicator (accessory) triangle facing down.
Clicking the title would open a popup/menu with my items.
How is that doneable in Cocoa?
Rdelmar's answer is probably the easiest way to go, but may not do exactly what you might want to do (which is replace the actual title with a pop up item, instead of having a popup button under the title in the toolbar area). With respect to functionality your application will probably work just as well using the toolbar.
If, however, you truly want to replace the actual title, the means of going about this would be to set the NSWindow title text to #"" to hide it, and redraw it by sticking in your own view.
[[[theWindow contentView] superview] addSubview:theSubview];
This basically tells the superview of the main content view to add another subview (direct "translation" from the code), and you'll have to tinker with the frame of this new subview to have it be positioned where the title should be positioned (as now it's free to be placed anywhere in the window frame, including on top of the title bar, as opposed to simply inside the content view).
theSubview can be your popup button, or whatever you want, and you'll also probably have to custom draw the popup button to match the original drawing of the window title.
You can do this by adding a toolbar to your window in IB. Once, you add the toolbar, you can double click on it to open the customizer view of it. Drag a popup button into the Allowable Toolbar Items area and after it is inserted there you can drag it into the bottom area which shows the layout of the toolbar -- you can also drag out any of the default items there that you don't want.

How does the Outlook app delete checkbox UI xaml code work?

If you tap on the left hand side of the screen in Outlook then an event is triggered (in this case a checkbox appears).
I would like to know the xaml on how this is achieved. It cannot be a simple "MouseLeftButtonUp" event because if you drag your finger more than a few pixels then the event does not trigger.
In my own app I am trying to get an icon appear within a listbox that has a SelectionChanged event. The issue is that if you do not touch the small icon precisely then you are triggering the listbox event rather than the event I want to occur when pressing the image.
I think I need to wrap my image in a Canvas but then am still stuck as to what the event should be.
How do you increase the target size of the area where a user can click on your element?
What event should an image have when within a listbox (which is within a pivot) that has a SelectionChanged event? (MouseLeftButtonUp causes issues if you half drag to the next pivot and lift your finger - it triggers the MouseLeftButtonUp event)
I implemented something very similar to that behavior by making an itemtemplate where the checkbox was pushed offscreen to the left by using a negative margin.
I then created 2 visual states, one for Open and Closed. The open state set the margin to 0, bringing the checkbox back onscreen. Closed state had the negative margin.
With the fluidmove behavior, switching between states on button press was EASY. The only thing you'd have to add would be an invisible button/touch area on the left that would also trigger "opening" the checkbox column (changing state to reset the margins).
Hope that helps...
The outlook app is a native app, so it probably isn't using xaml at all.
If you're worried about the mouse events, then you should look at the gesture stuff in the silverlight toolkit, it contains tap, etc events that make a little more sense on the phone.
Increasing the target size and generally making stuff touchable: wrap it in a Button, then alter the ControlTemplate for the Button to remove the border.
If you look at the ControlTemplate for a Button, (Expression Blend, Edit Template, Edit a copy) you'll see the mechanics of the touch area. It's nothing more than padding/margin.
Thus, you can't bleed your touch region out without altering the layout and affecting other items around the control. I'd do two things:
First, I'd think about whether my whole control should be larger in the first place with good spacing around it. Is my design right?
Second, I'd cheat. I'd float a fixed sized button with no border over the area using the Translate transformation to move it around freely.
Good luck,
Luke

Resources