I'm trying to create a timeline control in Cocoa. This is what I am trying to achieve. It's basically a standard timeline design.
However, I don't know which approach to take. The problem lies with the top ruler, the left track list and the bottom audio waveform display. These three parts need to always be visible and 'stick' to the edges. The ruler and audio waveform should only scroll horizontally, while the track list on the left should only scroll vertically.
For the top ruler, NSRulerView seems appropriate since it's just a ruler.
For the left view and the bottom view I don't know which route to take. I've played with using a wide vertical NSRulerView for the track list. This works but creates additional problems. For example: the top ruler appears above the track list.
I've composed four options so far:
Forget NSRulerView and draw everything custom in the document view. This seems feasible but sidesteps built in NSRulerView functions. Also, I need to find a way to shorten the scrollbars so they don't overlap the side and top views.
Use NSRulerViews for the top and left side. The bottom side will then probably be drawn manually in the document view.
Place the left view outside the scrollview and manually scroll it up and down by linking it to the main scroll view. Use NSRulerView for the top, manually draw audio waveform in document view.
An NSScrollView embedded in another NSScrollView. The outer handles horizontal scrolling, the inner scroll view handles vertical scrolling. Possible I think, but it seems hacky.
So my question boils down to: Which route to take?. Can anyone shed some light on this issue and point me in the right direction?
What I understand:
You want a view to the left of an NSScrollView which scrolls vertically with the NSScrollView while ignoring horizontal scrolling.
You want a view below an NSScrollView which scrolls horizontally with the NSScrollView while ignoring vertical scrolling.
You want rulers.
To achieve this task:
Use 3 separate scroll views which do not overlap and donot inherit one another.
Activate rulers in whichever view(s) you would like them to appear.
Synchronize the scroll views (so that when one scrolls, the other scrolls accordingly).
How to synchronize scroll views is in the help. See User Experience > Controls > Scroll View Programming Guide for Mac > Synchronizing Scroll Views. This is also indirectly linked in the header of the help guide for NSScrollView.
If you want the three scroll views to be contained within an NSSplitView for resizing simplicity, then a fourth view must be added to consume the unused corner (good place to put controls). Since an NSSplitView can only be split vertically or horizontally, you will have to create an NSSplitView containing 2 split views with each of those split views containing 2 views that you actually see (splitting in one direction and then the other). The resizing of the split views will have to be synchronized in a manner much like the scrolling is synchronized to retain a straight cross of all four views.
Related
I have a window into which I horizontally add two subviews. Into each subview, I place a variable number of subviews made up of a vertical slider, a text field rotated 90 degrees and placed to the left of the slider and another textfield, placed just under the slider. The slider subview's constraints are done in code, the parent views are both done in IB. When I add more slider views to the left window than the subview can handle in its default size, it resizes horizontally and forces the window's content view (and window) to also resize horizontally. Great, that's just what I want. But if I add more slider subviews than can fit in the right subview, they just get squeezed together and the subview does not expand as the left. I layout the slider views using code with this category converted to support NSViews, instead of UIVews:
UIView+AutoLayout1: https://github.com/jrturton/UIView-Autolayout
The constraints for the left and right subviews are more or less the same. I can't figure out why the right view does not resize as the left view does.
Here is a link to a sample project that demonstrates the problem:
SliderTest
Some someone help me out with this?
Also, a secondary question as I think my slider view could use a little work:
When a view is rotated using setFrame(Center)Rotation, do the top, right, bottom and top edges remain along the same edges or do they reflect the new orientation of the rotated view?
Thanks
I found the problem. The constraint between the left view and right edge of the window was fixed at 233 instead of >= 233. I had this at some point in the past, as I was adjusting the constraints to achieve the desired behavior and just overlooked this one through the troubleshooting process.
As shown below I have a NSScrollView with 2 panels (3 actually but not shown in the image). I am wondering if this is simply a performance issue or something more erroneous to do with auto layout?
Neither of the views are particularly complicated or have very complicated constraints. The left view hierarchy is,
Left NSSplitView's view
|-- Custom view NB lowered the trailing priority here... view]-(0#250)-|
|--NSTextField
|--NSTableView
The most advanced thing I did was to lower the priority which attaches the container view to the superview. this is because I want the panel to be able to cover up the left hand side without the left hand side resizing. When the divided is fully to the left the views there still have the same size it's just that the right panel now is above the view left panel's views.
Is there a better way to achieve this effect?
What could be causing this drawing artefact?
I am laying out a calculator using Interface Builder and I ran into some issues with the layout of buttons.
I have 3 columns of number buttons, similar to most calculators, and I had no problem placing the left and right columns as the auto-layout feature of Xcode snapped them in the correct distance away from the edge of the window on the left and the operator buttons on the right; however, there was no automatic help for centering the middle column of buttons between those two.
I can eyeball it pretty well but I really prefer to have everything perfectly aligned. Is there any way to center a button between two other UI objects like this? here is a picture of the layout:
You can place all the buttons in their own View. Place the view where you want the buttons. Then you could align the left buttons to the left of the view, align the right buttons to the right of the view, and finally center the middle buttons. Then adjust your view you made accordingly. I did something very similar. Hope this helps.
I would like to programmatically allow the user to zoom away from a current page inside of UIScrollView and present them with an overview of multiple pages. Then allow them to touch/choose one of the pages to zoom in.
I have multiple sub ViewControllers for each page. The important aspect is that each ViewController contains detailed information, so I want most of that information to be visible when they get a "birds eye view" of what's happening.
What's the best way to do this?
Additional detail: pretend each UIViewController has a UiTableView within them. There's 5,6,3,1,0,10 Cells in each of these (respectively) is there a way to show all Cells at once in the larger view?
Perhaps is there a way to screenshot the Views and present them as smaller objects?
Currently I have the UIPinchGestureRecognizer already working, just need a way to control the transition of these viewcontroller into the middle. Is there a way to screenshot each controller and transition to a different view for selection?
If You want it for a pdf viewer, then maybe you can implement something similar to this:
https://github.com/vfr/Reader
When corresponding button is pressed - modally rises up a gridview with smaller pages. When taped on any - it then opens that page.
If it's not about pdf viewer, and You still desire the pinch-zoom effect, then maybe you can implement two different views - where - on one will be in grid - all viewcontroller thumbnails, and on other - scrollview. When you pinch -zoom out - scrollview alpha changes to 0, while gridview list alpha changes to 1. When taped on any viewcontroller thumbnail - alpha changes.
If You still want without fade-in fade-out, then it's even harder. On each pinch zoom movement, you need to recalculate each viewcontroller positions and sizes. and start moving them where they should be.
Hope that helps.. somehow..
I have a panel containing a form (elements such as labels and textboxes within a table) and 3 buttons (in an hbuttonbox) at the bottom-right. If I shorten the panel by dragging the bottom border upwards, the 3 buttons come with it, and lay on top of the other form components, causing messy graphics. I would like the panel to not resize smaller than the bottom edge of the last component within it. Due to employer restrictions, I am not able to show a screenshot of the GUI. I will try to make any clarifications that are asked.
This probably has something to do with some resizing or general size settings on the components, but there are so many options that I'm not sure where to start.
Any ideas for an easy fix to this without getting down into the complicated nest of components? If not, any ideas on where I should start messing with settings?
Thanks!
UPDATE:
Everything is contained in a VBox with 3 cells. Elements in cells (top to bottom): Table, ScrolledWindow, HButtonBox. The ScrolledWindow bottom edge also moves (resizes) with the bottom edge of the panel when resizing, until the panel bottom goes above the whole ScrolledWindow. Then the buttons keep moving up, staying in relation to the panel's bottom edge.
By "form" do you mean you are using a Gtk.Fixed to contain your table and buttonbox? Then that's probably what's going wrong - you should use vboxes and hboxes for your layout. These will resize properly. Fixed layouts are only for exceptional cases.
EDIT:
Other suggestions:
Perhaps the HButtonBox has pack type 'end' instead of 'start'?
You could try playing with the 'fill' and 'expand' packing properties of the VBox's children.
I ended up adding a Height Request to the container, just slightly longer than the part of the scrolled window. This now stops resizing to where the bottom buttons would overlap the components above it. The problem (before the fix) is shown below: