QTabWidget customization

[asafzakay]

hello everybody
i have a problem with customization of the QTabWidget
i want it to look like this:

i attached a picture
any idea

[songqiming]

maybe use setTabPosition( TabPosition ) of QTabWidget. TabPosition = QTabWidget::West.
I don't test, you can try.

[asafzakay]

i'v tried the setTabPosition but i want to change the tab text direction to be vertical to the widget.
thanx anyway

[asish_cse]

could u solved this problem.I need the same thing into bottom side.can u help me plz ? how to set tabposition?

[Lykurg]

Hey don't hijack 2 year old post! RTMF or at least read the thread you are writing in. The first answer tells you the solution!

[notton]

This maybe help you:
http://blog.csdn.net/notton/archive/...9/5996730.aspx


--------------------------------------------------
--------- Welcome www.thinkvd.com -------
--------------------------------------------------

[cdebel2005]

Hey don't hijack 2 year old post! RTMF or at least read the thread you are writing in. The first answer tells you the solution!

Wait... seriously, "Guru", "Nokia Certified / Qt Developer"? At least you could follow your own comment "AT LEAST READ THE THREAD YOU ARE WRITING IN".

Setting the TabWidget to WEST won't do what the poster asked for. And he already wrote it in the 3rd msg of this thread.

I'm reading threads and it's full of little bastard saying "Read the f... manual".

Maybe you should tell your mom "Hey bi@tch, you probably did't RTFM about how to raise kids!"

By the way, it's RTFM, not RTMF... at least when you insult people, do it correctly!

[Lykurg]

Wait... seriously, "Guru", "Nokia Certified / Qt Developer"?

Which came long after that post...

Beside that, you must be really upset if your first post is to tell that (without helping the thread starter in any way). And as you obviously are stressed I was that time, and we both used a post to relieve that pressure. Not the right way, but as you showed with your post, we are not such different ;-)

And I don't know what my mother have to do with it...

[ataraxic]

Wait... seriously, "Guru", "Nokia Certified / Qt Developer"?

+1 to cdebel2005

I've had this problem (and still do btw) and came across this thread.
Reading answers like "RTFM (ahh... sorry RTMF)" is a waste of everybody's time.
If you do not know the answer -- don't post. You are useless and of no help.

And yes, I've used my first post to tell that... Because I am really upset with the "Guru's" like you.

[Lykurg]

Go ahead blaming me because of a typo. You also seem to not have understand the relation between tags like "Guru" and time of posting. Beside, I didn't gave me the title "Guru". It is just related on how many post you do here. Even if they are crap. So please do not blame me for things I am not responsible for. But anyway go on, dish the dirt, I do not care.

Or you can start spending the time solving your problem. As I am not very willing to help you after such comment (problem is the language not necessarily the content), but for the sake of peace I give a starting point. You just have to change it for your needs:

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedWest;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
 
    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
 
    return a.exec();
}

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedWest;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
    
    return a.exec();
}

To copy to clipboard, switch view to plain text mode 

To protect me against an other shit storm about how a Guru can write such a code: It is not the most elegant solution - I know -, but it is easy, quick and working.

EDIT: For a good starting point of reading: http://qt-project.org/doc/qt-4.8/style-reference.html (section Tabs)

[ataraxic]

Go ahead blaming me because of a typo.

Exellent...
That's what I was speaking about. Nice, neat, right to the point, no bullshit.
Thanks for help!

Sorry for the flames before. They were just because there are alot of >/dev/null posts around
that are really annoying.

[ataraxic]

There is another useful thread related to this question (west qtabwidget with horizontal text):

http://www.qtforum.org/article/28672...b-positon.html

Go ahead blaming me because of a typo

Hello Lykurg,
After trying your solution as is, I've got the following:

west-tab.png

Can you explain pls howto make horizontal text tabs and keep west qtab?

Thank you!

[Lykurg]

You only have to change a row and add one:

#include <QtGui>
 
class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
 
    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.setShape(QTabBar::RoundedWest);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
 
    return a.exec();
}

#include <QtGui>

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTabBar tb;
    tb.setStyle(new CustomTabStyle);
    tb.setShape(QTabBar::RoundedWest);
    tb.addTab("Tab 1");
    tb.addTab("Tab 2");
    tb.show();
    
    return a.exec();
}

To copy to clipboard, switch view to plain text mode 

[gurunbr]

Hi Lykurg,

Is this possible I use your solution to rotate tab bar text from vertical to horizontal. if possible means how?. I attached my output as image. see this,Screenshot from 2013-09-26 12:51:53.jpg

[ataraxic]

Here is a working example of the QTabWidget based on Lykurg CustomTabStyle class.
Works like charm with QT5.0 && QT5.1

tabdialog.pro:

QT += widgets
 
SOURCES       = main.cpp

QT += widgets

SOURCES       = main.cpp

To copy to clipboard, switch view to plain text mode 

main.cpp:

#include <QtGui>
#include <QWidget>
#include <QDialog>
#include <QApplication>
#include <QtWidgets>
 
class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }
 
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};
 
int main(int argc, char *argv[], char *envp[])
{
	QApplication app(argc, argv);
 
	QTabWidget *tabWidget = new QTabWidget;
 
	tabWidget->setTabPosition(QTabWidget::West);
	tabWidget->tabBar()->setStyle(new CustomTabStyle);
 
	tabWidget->addTab(new QWidget, "General");
	tabWidget->addTab(new QWidget, "Permissions");
	tabWidget->addTab(new QWidget, "Applications");
 
	QVBoxLayout *mainLayout = new QVBoxLayout;
	mainLayout->addWidget(tabWidget);
 
	tabWidget->show();
 
	return app.exec();
}

#include <QtGui>
#include <QWidget>
#include <QDialog>
#include <QApplication>
#include <QtWidgets>

class CustomTabStyle : public QProxyStyle
{
public:
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab)
            s.transpose();
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel)
        {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option))
            {
                QStyleOptionTab opt(*tab);
                opt.shape = QTabBar::RoundedNorth;
                QProxyStyle::drawControl(element, &opt, painter, widget);
                return;
            }
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

int main(int argc, char *argv[], char *envp[])
{
	QApplication app(argc, argv);

	QTabWidget *tabWidget = new QTabWidget;

	tabWidget->setTabPosition(QTabWidget::West);
	tabWidget->tabBar()->setStyle(new CustomTabStyle);

	tabWidget->addTab(new QWidget, "General");
	tabWidget->addTab(new QWidget, "Permissions");
	tabWidget->addTab(new QWidget, "Applications");

	QVBoxLayout *mainLayout = new QVBoxLayout;
	mainLayout->addWidget(tabWidget);

	tabWidget->show();

	return app.exec();
}

To copy to clipboard, switch view to plain text mode 

to compile (! M$):

qmake -o Makefile tabdialog.pro
make

qmake -o Makefile tabdialog.pro
make

To copy to clipboard, switch view to plain text mode 

output:
horiz-tab-dialog.png

[rawfool]

Thanks for this. But I'm having some problems related to size of icon; resizing of tab width, height; setting the color of tab
In tried like this, but I think that's not the proper way to change the size

QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
{
    QSize s = QProxyStyle::sizeFromContents(type, option, QSize(40, 120), widget);  // instead of size, I'm hardcoding the value with QSize(40, 120)
    if (type == QStyle::CT_TabBarTab)
        s.transpose();
    return s;
}

QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                           const QSize &size, const QWidget *widget) const
{
    QSize s = QProxyStyle::sizeFromContents(type, option, QSize(40, 120), widget);  // instead of size, I'm hardcoding the value with QSize(40, 120)
    if (type == QStyle::CT_TabBarTab)
        s.transpose();
    return s;
}

To copy to clipboard, switch view to plain text mode 

1. I'm setting 64x64 pix icon, but still it's being displayed as a small icon. How do I set it to show original size of icon ?
2. How to give custom width & height to the tab ?
3. How to set the color of tab

Kindly help. Thank you.

[ckvsoft]

Hallo

I know, this is an old Thread but i found it now ;-)

On MAC (Sierra QT5.6) i can't see the Text.
Any ideas?
thx Chris