filling window with QToolButtons and Icons

oin-oin

Greetings,

I am writing a calculator app. What I want to do, is to

use images (QIcons) for the buttons (QToolButtons), and have the icon fill the button space entirely
place the buttons adjacent to each other (using QGridLayout) to create the calculator image.

This image is what I achieved in java:

The best I can get with qt is this:

I've already set the button margins to 0

tlb->setContentsMargins(0, 0, 0, 0);

I've told QGridLayout about the desired horizontal and vertical spacings...

   gl->setHorizontalSpacing(0);
   gl->setVerticalSpacing(0);

But as you can see, 1) the Icons don't fill the button areas (it seems), and 2) I can't seem to get the buttons to "glue" themselves to each other.

I've tried using QPushButton instead of QToolButton, but the results are less satisfactory.

Is there a way to achieve the same result as in the first image ?

Additional question: How small or large can rows and columns be for QGridLayout ? Could I set row/column pairs to be on the order of pixels ?

Thanks for your inputs.

Chris Kawa

Tool buttons are for placing on a toolbar. You should be using a QPushButton for this.

As for stretching images - that's not gonna look good. For something as small as text on a button you should use pixel perfect images.

Lets say you want a 32x32 image. You can achieve a borderless button like this:

QIcon icon = ...;
QSize size = icon.actualSize({32,32});
QPushButton* button = new QPushButton(icon, QString());
button->setFlat(true);
button->setIconSize(size);
button->setFixedSize(size);

If you want custom stretching to fill the entire button without restrictions you can subclass QPushButton and draw the image however you want in the overriden paintEvent method.

oin-oin

@Chris-Kawa Thanks for the advice. I've tried QPushButton, but I get more space between the buttons; nevertheless, I will try again using the setFlat() method which I didn't know about.

BTW - all examples I see assume square icons. Are icons necessarily square ?

Chris Kawa

I've tried QPushButton, but I get more space between the buttons

It has some padding dictated by the style. That's why I suggested setting the fixed size and icon size to the same value. It gets rid of the padding.

Are icons necessarily square ?

No, they just usually are but there are no restrictions.

How small or large can rows and columns be for QGridLayout ?

There are no restrictions. A column or row can be 0 or more pixels in size.

oin-oin

@Chris-Kawa Thanks for the answers !

I replaced QToolButton with QPushButton, and used the setFlat(true) as suggested.

The outcome is almost exactly what I want; here's the result:

The first line is horizontally perfect, the 2nd a little less so. Vertically there are still spaces.

The reason I was asking about Icon sizes is because the icon file names are "x###y###_x###y###.png", where ### indicates basically where the icon image is supposed to be located, e.g. "x035y277_x077y315.png". I'm using the filename to both determine the icon size and the grid row/column rowspan/columnspan parameters in QGridLayout.

Given I know exactly where I want my widgets to be, should I even try to use QGridLayout ? (If you're familiar with java, I'm basically trying to coax QGridLayout to do what I coaxed java's GridBagConstraints to do).

Chris Kawa

@oin-oin I'd say it's a bit of an abuse of the grid layout, but it should work. On the other hand if you want pixel perfect placement/size of the buttons then you don't need a layout at all.

To be honest that's a weird case you have here. Usually you'd have images prepared upfront to be the same size and then just use one layout cell per button. What you're doing is basically compensating with complicated code for the deficiency in image assets. If you can I'd just make better images and not deal with this complicated layout.

oin-oin

@Chris-Kawa Thank you very much for your input.

The images I have are actual photos from a vintage calculator (which took some time to make without any shadowing from the calculator keys).

So yeah, it's strange (like the programmer himself, I suppose).

And I discovered why my vertical spacing was off, I swapped the height/width parameters in QSize.

So I'm getting there, thanks to you.