QWidget - resize animation

Question

Say I have a QHBoxLayout where there are 2 QTextEdits and between them a button with an arrow to the right. When you click on the button, the right-side QTextEdit gradually closes by moving the left border until it meets the right one. Simultaneously, the right border of the left QTextEdit takes the place which the right QTextEdit released. And after pressing on the button, the state of the system is coming to the former one.

EDIT: In order to organize this I have done the following:

1) In header file:

class MyWidget : public QWidget
{

    Q_OBJECT

    QTextEdit       *m_textEditor1;
    QTextEdit       *m_textEditor2;
    QPushButton     *m_pushButton;
    QHBoxLayout     *m_layout;
    int              m_deltaX;

public:

    MyWidget(QWidget * parent = 0);


    ~MyWidget(){}


private slots:
    void closeOrOpenTextEdit2(bool isClosing);


};

2) In the source file:

MyWidget::MyWidget(QWidget * parent):QWidget(parent),m_deltaX(0)
{


  m_pushButton = new QPushButton(this);
  m_pushButton->setText(">");
  m_pushButton->setCheckable(true);
  connect(m_pushButton, SIGNAL(clicked(bool)), this, SLOT(closeOrOpenTextEdit2(bool)));

  m_textEditor1 = new QTextEdit(this);
  m_textEditor1->setText("AAAAA AAAAAAAAAAA AAAAAAAAAAA  AAAAAAA AAAAAAAAAAA AAAAAAAAAAA  AA");

  m_textEditor2 = new QTextEdit(this);


  m_layout = new QHBoxLayout;
  m_layout->addWidget(m_textEditor1);
  m_layout->addWidget(m_pushButton);
  m_layout->addWidget(m_textEditor2);

  setLayout(m_layout);
}

void MyWidget::closeOrOpenTextEdit2(bool isClosing)
{
    QPropertyAnimation *animation1 = new QPropertyAnimation(m_textEditor2, "geometry");
    QPropertyAnimation *animation2 = new QPropertyAnimation(m_pushButton, "geometry");
    QPropertyAnimation *animation3 = new QPropertyAnimation(m_textEditor1, "geometry");

    if(isClosing) //close the second textEdit
    {
        m_pushButton->setText("<");

        QRect te2_1 = m_textEditor2->geometry();
        m_deltaX = te2_1.width()-3;
        QRect te2_2(te2_1.x()+m_deltaX, te2_1.y(), 3 ,te2_1.height());

        QRect pb_1 = m_pushButton->geometry();
        QRect pb_2(pb_1.x()+m_deltaX, pb_1.y(), pb_1.width() ,pb_1.height());

        QRect te1_1 = m_textEditor1->geometry();
        QRect te1_2(te1_1.x(), te1_1.y(), te1_1.width()+m_deltaX, te1_1.height());


         //animation->setDuration(10000);
         animation1->setStartValue(te2_1);
         animation1->setEndValue(te2_2);

         animation2->setStartValue(pb_1);
         animation2->setEndValue(pb_2);

         animation3->setStartValue(te1_1);
         animation3->setEndValue(te1_2);
    }
    else //open
    {
       m_pushButton->setText(">");

       QRect te2_1 = m_textEditor2->geometry();
       QRect te2_2(te2_1.x()-m_deltaX, te2_1.y(), 3+m_deltaX ,te2_1.height());

       QRect pb_1 = m_pushButton->geometry();
       QRect pb_2(pb_1.x()-m_deltaX, pb_1.y(), pb_1.width() ,pb_1.height());

       QRect te1_1 = m_textEditor1->geometry();
       QRect te1_2(te1_1.x(), te1_1.y(), te1_1.width()-m_deltaX, te1_1.height());


        //animation->setDuration(10000);
        animation1->setStartValue(te2_1);
        animation1->setEndValue(te2_2);

        animation2->setStartValue(pb_1);
        animation2->setEndValue(pb_2);

        animation3->setStartValue(te1_1);
        animation3->setEndValue(te1_2);

    }
    animation1->start();
    animation2->start();
    animation3->start();
}

EDIT:

And I have the following problem:

When I close the second QTextEdit (by clicking on the button) and resize the MyWidget, then the QTextEdit restores its state (but it should stay closed of course). How can I solve this problem?

Please provide me with a code snippet.

Answer 1

Here what I wanted:

Header file

class MyWidget : public QWidget
{

    Q_OBJECT

    QTextEdit       *m_textEditor1;
    QTextEdit       *m_textEditor2;
    QPushButton     *m_pushButton;
    QHBoxLayout     *m_layout;
    QVBoxLayout     *m_buttonLayout;

    int              m_deltaX;
    bool             m_isClosed;


public:

    MyWidget(QWidget * parent = 0);
    ~MyWidget(){}

    void resizeEvent( QResizeEvent * event );

private slots:
    void closeOrOpenTextEdit2(bool isClosing);

};

Source file

MyWidget::MyWidget(QWidget * parent):QWidget(parent),m_deltaX(0)
{

  m_pushButton = new QPushButton(this);
  m_pushButton->setText(">");
  m_pushButton->setCheckable(true);
  m_pushButton->setFixedSize(16,16);
  connect(m_pushButton, SIGNAL(clicked(bool)), this, SLOT(closeOrOpenTextEdit2(bool)));

  m_textEditor1 = new QTextEdit(this);
  m_textEditor1->setText("AAAAA AAAAAAAAAAA AAAAAAAAAAA  AAAAAAA AAAAAAAAAAA AAAAAAAAAAA  AA");

  m_textEditor2 = new QTextEdit(this);

  m_buttonLayout = new QVBoxLayout();
  m_buttonLayout->addWidget(m_pushButton);
  m_buttonLayout->addItem( new QSpacerItem(1, 1, QSizePolicy::Minimum, QSizePolicy::Expanding) );


  m_layout = new QHBoxLayout;
  m_layout->addWidget(m_textEditor1, 10);
  m_layout->addSpacing(15);
  m_layout->addLayout(m_buttonLayout);
  m_layout->setSpacing(0);
  m_layout->addWidget(m_textEditor2, 4);

  setLayout(m_layout);
  resize(800,500);
}

void MyWidget::closeOrOpenTextEdit2(bool isClosing)
{
    m_isClosed = isClosing;
    QPropertyAnimation *animation1 = new QPropertyAnimation(m_textEditor2, "maximumWidth");

    if(isClosing) //close the second textEdit
    {
        m_textEditor2->setMaximumWidth(m_textEditor2->width());

        int textEdit2_start = m_textEditor2->maximumWidth();

        m_deltaX = textEdit2_start;
        int textEdit2_end = 3;



        animation1->setDuration(500);
        animation1->setStartValue(textEdit2_start);
        animation1->setEndValue(textEdit2_end);


        m_pushButton->setText("<");

    }
    else //open
    {


        int textEdit2_start = m_textEditor2->maximumWidth();
        int textEdit2_end = m_deltaX;


        animation1->setDuration(500);
        animation1->setStartValue(textEdit2_start);
        animation1->setEndValue(textEdit2_end);


        m_pushButton->setText(">");

    }

    animation1->start();

}


void MyWidget::resizeEvent( QResizeEvent * event )
{
    if(!m_isClosed)
        m_textEditor2->setMaximumWidth( QWIDGETSIZE_MAX );
}

Answer 2

1) You could replace your button with a vertical layout, place the button inside this layout and finally add a vertical spacer below the button (in same the layout).

...

QVBoxLayout* m_buttonLayout = new QVBoxLayout();

m_layout = new QHBoxLayout();
m_layout->addWidget(m_textEditor1);
m_layout->addLayout(m_buttonLayout);
m_layout->addWidget(m_textEditor2);

m_buttonLayout->addWidget(m_pushButton);
m_buttonLayout->addItem( new QSpacerItem(1, 1, QSizePolicy::Minimum, QSizePolicy::Expanding) );

2) I guess you could (and should) animate widget's maximumSize (or just maximumWidth) property and let the layout take care of calculating actual geometries. This would also simplify your calculations. E.g.

QPropertyAnimation *animation1 = new QPropertyAnimation(m_textEditor2, "maximumWidth");
QPropertyAnimation *animation2 = new QPropertyAnimation(m_textEditor, "maximumWidth");

if (isClosing)
{
    int textEdit2_start = m_textEditor2->maximumWidth();
    int textEdit2_end = 0;

    int textEdit_start = m_textEditor->maximumWidth();
    int textEdit_end = textEdit_start + textEdit2_start;

    animation1->setStartValue(textEdit2_start);
    ...
}

Also, now you don't have to animate buttons geometry at all (assuming that you have set fixed size to it).

PS. I didn't compile codes so there might be minor errors but you should get the idea.

Answer 3

Qt's Animation framework sounds like a good place to start. You could just try to follow their tutorials, adapting for you use case. I have used it already, and it seemed quite straight forward.