I have made a window in which I will be having two groups/panels and some buttons in between them. I want to code the resizing behavior in a way that when the window expands, the two panels increase their widths while keeping the distance between them constant.
Please see this mockup:
As you see above, I want the 'Local' and 'Server' Panels to resize while keeping the distance in between them same. If I use anchors (Top+Left+Right+Bottom), the left panel will overlap the right one and the right's width one will go out of the window. I want them to share the increased width of the window equally.
As for the buttons in between, I have kept ancors as Top only. By removing Left anchor from button, it automatically places itself in the center of the window when window is expanded, which is just the way I want it to be.
Any ideas how to manage resizing of panels?
Thanks.
Use the TableLayoutPanel control.
First add the TableLayout to the Form and set its Dock() property to Fill.
Next you'll need to setup 3 columns and two rows. Add the two buttons to the middle column with each one is in its own row. Afterwards, setup the column values so they are like this:
Leave the rows at 50% on both.
Now add your two GroupBoxes to the 1st and 3rd columns in the 1st row.
For both GroupBoxes, set Dock() to Fill, and RowSpan() to 2.
For the top Button, turn on only the Bottom Anchor.
For the bottom Button, turn only the Top Anchor.
For the TableLayoutPanel, set Padding() to 5,5,5,5.
Here is what it looked like when I was all done:
Resize the window and observe how the controls behave...
Related
I have 3 buttons which I would like to center at the top of my ViewController, so that they remain centered regardless of the screen size of the iPhone or iPad. I have tried to:
Use leading space and trailing space on the buttons either side of the view controller to center them.
Put the buttons in a View and then center the view relative to the ViewController.
Add the constraints as ratios.
Use constraints on buttons.
None of these methods seem to work for me and I cannot figure out how to solve this. I have looked around for solutions but I cannot find anything that allows me to do this.
None of these methods seem to work for me and I cannot figure out how to solve this. I have looked around for solutions but I cannot find anything that allows me to do this.
It's easy to "center" the group of buttons using nothing but constraints. Here's an example:
To achieve this, I first constrained Button 2 to the horizontal center of the safe area, and I constrained it's top to the safe area's top plus 128px. Then I constrained the top of Button 1 and Button 3 to be equal to the top of Button 2. Finally, I constrained the trailing of Button 1 to the leading of Button 2 plus 100px, and the leading of Button 3 to the trailing of Button 2 plus 100px. Here's how the constraints are listed:
I'm not sure why this isn't working for you -- you didn't give us any information about how your attempt failed. The other methods you listed should also work. For example, you can certainly put the buttons inside a view and center the view in the safe area or main view.
If you want the spacing to be proportional to the width of the screen, you can use the multiplier field of the constraints. For example, delete the horizontal spacing constraint between Button 1 and Button 2, and then create a new one that constrains the centerX of Button 1 to centerX of Button 2. Next, select the constraint that you just created and set it's multiplier field to, say, 0.5. You can do the same for Button 3, but set the multiplier to 1.5. Now you'll have Button 2 centered in the safe area, and the other two buttons placed half way between the edge and center of the safe area, regardless of the screen dimensions. You can change the values to get different spacing, of course.
Apple commonly places +/- buttons below tables (NSTableView), e.g. in the System Preferences for Network or User & Groups. See image below:
How can I place identical buttons below my tables directly in Interface Builder without manipulating any interface elements in my code or subclassing any element classes?
If the table has a fixed width, the easiest way is to just use a segmented control NSSegmentedControl. First add it to your view or window:
Change its Style to Small Square, the Mode to Select None and increase the number of Segments to 4 (or keep it at 3 if you only need + and -):
The +, - and other buttons are predefined images of the AppKit framework (NSAddTemplate and NSRemoveTemplate) and directly available in Interface Builder. E.g. you could setup the first three segments as follows:
For demonstration purposes I made the - segment disabled. Unlike most other buttons, disabling a segment of a segmented control only dims the image/text, it does not change the button background. Only disabling the whole segmented control changes the background (and of course disables all segments).
Of course, the last segment should always be disabled, otherwise it would be clickable and change its background when being clicked. As it contains no image or text, it still looks the same after it has been disabled.
Switch to the size setup and uncheck the Fixed checkbox for all segments, except for the last one, make sure it is checked for the last one:
Unchecking Fixed makes the segment width dynamic, that means it will always match the minimum width required for the content.
Finally place the control directly below the table and resize it to match the table width. Here's the result:
Almost perfect, don't you think?
Things get more difficulty if the table width is dynamic (e.g. the table resizes together with the window resizing). A segmented control doesn't support autoresizing, that means you would have to programmatically change the width of its last segment each time the table is resized. Of course, that is not too hard to do and requires only little code but there is one alternative solution that requires no single line of code.
Decrease the number of segments by one and replace the last segment with a gradient button (NSButton) without title:
Its background looks exactly the same as a segmented control, yet it does support autoresizing to always match the size of the table. There is just one problem: It is clickable and this time disabling it doesn't work as this would change the background. Instead just change its Type to Momentary Change (which means the app wants to control the UI change itself when the button is clicked):
And after the button has been placed correctly and made resizable, the result looks as good as before but this time the table can be resizable and the buttons on the bottom will always fit perfectly.
How can I do something like that?
I didn't find any appropriate object in the Interface Builder library.
Any thoughts?
The best way that i found is to use NSSegmentedControl.
after you dragged it on the canvas, you should configure its style:
Style: Small Square
Mode: Select Momentary
looks better. Now use "image" field to set NSAddTemplate and NSRemoveTemplate. Make sure that label field is empty.
Ok, we have "+", "-" and one empty segment. To prevent the latest one to be selected by the user, select it from Segment: pop up and turn off Enabled check box (located next to State: label).
And lastly, what we have to do is set width of first two segments to make them square.
Go to Size inspector
Select Segment 0
Turn off "Fixed" checkbox (segment should immediately autoresize to fit image)
Select Segment 1 and repeat number 3
Now as you resize control, only last segment will change width
Put it at the bottom of your table view and resize as well.
Enjoy ;)
Update for OSX Yosemite
I tried to achieve the same look as Mail.app has in the Accounts view (right window on my screenshot).
I did achieve the desired result by following the steps below:
Add a NSSegmentedControl
Add two segments and set the image to each:
NSAddTemplate for the + button
NSRemoveTemplate for the - button
Set the size of the segments to fixed and set the value to 32 pixels
The rectangle next to the buttons is a NSButton with the style Gradient.
The Button is enabled but Refuses First Responder is set to true so that it is not clickable.
Use a NSButton with a gradient style, and for the images use the system provided NSAddTemplate and NSRemoveTemplate.
One answer here suggests using gradient buttons, however these buttons cannot be disabled as this causes the background to change and thus breaks the look. Another one suggested using a segmented control, which is almost perfect but segmented controls don't support autoresizing, e.g. if the table width is dynamic. My suggestion is a combination of both. Use a segmented control for the actual buttons and a gradient button to fill the rest of the table width that now can also be dynamic if the button width is dynamic as well.
See my answer to a similar question (with screenshots):
https://stackoverflow.com/a/22586314/15809
As you can see on the screenshot the segmented control is placed rather ugly this way.
I need it in that place, meaning below the section title and before the second cell for that section. How could I make this better?
I can think of two suggestions that would improve the appearance. The first would be to increase the height of the table cell (just that particular table cell, not all of the cells in your table) so that the whitespace margin at the top and bottom of your segmented control is equal to the margin you currently have on the left and right of the control.
Another solution would be to move the selection of the value for this setting into a separate tableView controller that you drill down to. So that cell would show the current value, but tapping the cell would take the user to a new view where the user could select to change the value.
Here is an example of this from the Instapaper app settings page that I think looks pretty clean.
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: