Метод Place

1.

Tkinter
01.12.22

2.

Place()
• Сегодня рассмотрим последний менеджер геометрии. Метод
place().
• Данный метод позволяет действительно проектировать наиболее
сложные интерфейс, поскольку он позволяет наиболее гибко
располагать элементы и поэтому фактически благодаря методу
place мы можем расположить элементы буквально в любой точке
нашего окна, родительского фрейма и т.д.

3.

• Основные его методы:

4.

• Height, width – высота, ширина, соответственно. Измеряется в
пикселях, разумеется.
• Relheight, relwidth – относительная высота и относительная
ширина. Т.е. они задают так же высоту и ширину элемента, но
при этом они задают её относительно родителя. В качестве
значения можем передать любое float число (т.е. дробное) от 0.0
до 1.0. (0.5, 0.7, 0.9). Что означают эти числа 1.0 – означает 100%.
0.5 – 50%.
• Это как бы доля от высоты и ширины родительского контейнера.
• Т.е. если мы будем уменьшать окно и нам будет мешать размер
окна (родителя) и соответственно, если наши размеры
высчитываются относительно, то будут изменяться и размеры
того виджета, который мы и располагаем с помощью метода place.

5.

• Следующие два параметра это – x и y.
• Они позволяют задать координаты элемента. Они позволяют
задать координаты элемента по оси x и по оси y относительно
верхнего левого угла контейнера.
• Т.е. начало координат – это верхний левый угол (0;0).
• Relx, rely – в отличии от x и y, они задают уже не размещение
конкретно в пикселях точное, а относительное, т.е. снова в %.
• Bordermode – задают формат границы элемента. Может
принимать два параметра INSIDE и OUTSIDE. На самом деле не
особо нужный параметр. Но можете побаловаться с границами и
поглядеть как выглядит.

6.

• Ну и последний параметр anchor – это уже знакомый якорь.
Принимает как обычно значения сторон света. Ну принимает и
принимает, чё бубнить то. Определяет точку виджета, для которой
задаются координаты.
• Попробуем поэкспериментировать и подбавлять элементы,
используя метод place().

7.

• Для начала поместим с вами какую-нибудь метку со следующими
параметрами:
• И посмотрим на него в окне:

8.

• Находится, как видно, как раз в нулевой точке координат.
• Посмотрим, как отработает якорь, если мы его добавим в наш
метод place().
• Ну и видим, что нулевая точка координат находится в середине
нашей кнопки.
• Соответственно, если зададим свойство s, то кнопка вообще
уедет.
• Если поставим север, то увидим как наполовину влево зашла и
т.д.

9.

• Создадим еще одну метку, аналогичную.
• И допустим я хочу разместить её по центру. И вместо точных
значений x и y, использую относительные значения relx и rely.
• И увидим, что кнопка находится по центру. А именно по центру
находится верхний левый угол кнопки)))

10.

• Но для того, чтобы центрировать саму кнопку, а не её левый
верхний угол, мы добавим параметр anchor = CENTER.

11.

• Окей, го создадим три кнопки и пусть они у нас будут
расположены в левом верхнем углу, по центру и в правом нижнем
углу, соответственно. Попробуйте реализовать это
самостоятельно, а затем разберём вместе.

12.

• Собственно, как это выглядит:

13.

• У второй кнопки поменяем немного фоновый цвет, чтобы было
отличимо и она у нас должна располагаться по центру.
• Для третьей кнопки тоже меняем фоновый цвет и есть нюанс.
• Когда мы используем relx и rely, то левый верхний угол – это
нулевая точка отсчёта, а нижний правый угол – это единица.
• Т.е. 100%x100%.
• Соответственно, мы и указываем 1 и 1 в наших параметрах. Это
отправит нашу кнопку в правый нижний угол. Но без якоря она у
нас скроется. Потому что левый верхний угол у нас является
точкой отсчёта и, соответственно, верхний левый угол по факту
будет находиться в ПРАВОМ НИЖНЕМ УГЛУ и исходя из этого
кнопка будет не видна.

14.

• А для того, чтобы она стала видна нужно сделать точкой отсчёта
её правый нижний угол, для этого используем набор anchor = “se”
– юго-восток.
• И таким образом ПРАВЫЙ НИЖНИЙ УГОЛ у нас будет юговосточно направленным.
• Ну и так как используются относительные координаты, то при
изменении размеров нашего РОДИТЕЛЬСКОГО ОКНА, они
всегда остаются условно говоря «по центру». Ну на практике
растяжения-стяжения окна понятно будет.

15.

• Задание на пару: попробуйте «нарисовать» квадрат Малевича.
• Чёрный квадрат, расположенный внутри какого-нибудь «белого»«серого» пространства.
• Т.е. по итогу у вас должно быть окно и внутри должен идти
следующий закрашенный чёрный квадрат:

16.

• И слева, справа, сбоку должны идти равномерные рамки (чёрного
цвета).
• Лучше иметь равномерное разрешение окна: 400x400
Ну и сам квадрат тогда уже 300x300 разрешением. А остальное
как бы рамки. Для того, что решить задачу понадобится
использовать методы relheight и relwidth.
• Задумайтесь.

17.

• Теперь разберём вместе:
• Всё, что нам нужно – это создать метку
• И как мы её разместим: для того, чтобы её разместить, нам нужно
указать её относительную высоту и ширину. Как мы знаем, вся
высота и ширина наша – это 100%. И если мы хотим разместить
наш квадрат по центру да еще и с отступами, то зададим ширину
и высоту 80%.

18.

• Как-то так:
• Теперь, если запустить, мы можем увидеть наш чёрный квадрат.
Теперь осталось разместить его по центру. Для этого используем
relx и rely, в которых мы установим смещение элемента по оси х и
по оси у в относительных величинах.
• Так как мы сейчас использовали 80%, то у нас осталось 20%.
Логично.
• Которые нам нужно равномерно распределить. Т.е. чтобы было
10% слева, 10 справа, 10 сверху и снизу.

19.

• Как-то уже вот так вот:
• Проверяем и видим наш чёрный квадрат. При этом если мы
уменьшаем и увеличиваем окно, то квадрат всё так же остаётся
чётко по центру.