Как сделать программу с интерфейсом
Графический интерфейс на Python за 5 минут
Python легко использовать. В нем вы можете найти огромное количество библиотек для чего угодно. И это его основное преимущество. Из нескольких строк кода вы ничего не сделаете. Если вам нужны скрипты для личного пользования или для технически подкованной аудитории, то вам даже не придется думать о графическом интерфейсе.
Однако иногда ваша целевая аудитория не сильно подкована технически. Люди не против использовать ваши скрипты на Python до тех пор пока им не нужно смотреть на одну строку кода. В таком случае скриптов командной строки будет недостаточно. В идеале вам нужен графический интерфейс. Цель этого поста использовать только Python.
Библиотеки Python, которые можно использовать для графического интерфейса
Статья переведена при поддержке компании EDISON Software, которая заботится о здоровье программистов и их завтраке, а также разрабатывает программное обеспечение на заказ.
Однако, к счастью, я наткнулся на четвёртый вариант, который был мне по душе. Это PySimpleGUI, я до сих пор ей пользуюсь. Как ни странно, эта библиотека использует все 3 популярные библиотеки, о которых шла речь выше, но при этом абстрагируется от супер технических моментов
Давайте погрузимся в эту библиотеку и изучим ее, одновременно решая реальную проблему.
Проверьте два одинаковых файла
Я рассказал как это сделать в своей статье “3 быстрых способа сравнить данные в Python”. Мы можем использовать первый раздел, проверку целостности данных, чтобы попытаться создать пользовательский интерфейс.
Запрограммируйте графический интерфейс
Чтобы создать графический интерфейс, можно использовать этот код:
в результате мы получим:
Подключаем логику
Когда есть пользовательский интерфейс, легко понять, как подключить остальную часть кода. Нам просто нужно следить за тем, что вводит пользователь и действовать соответственно. Мы можем очень легко сделать это с помощью следующего кода:
Создание в Python приложения с графическим интерфейсом
Python это один из самых популярных языков программирования, в основном на нем пишут серверную часть сайтов и приложений. Но создать на нем программу с графическим интерфейсом не сложно. Для этих целей нужно воспользоваться специальной библиотекой. Их несколько, но выделить можно только Tkinter, wxPython, PySimpleGUI и PyQT. А из этих трех я советовал бы выбрать Tkinter так как она уже встроенная в Python и её не нужно устанавливать. Сегодня в качестве примера, сделаем сделаем приложение с графическим интерфейсом на Python.
Если только начинаете изучать Python следующие статьи будут вам очень полезны.
Программа на Python с графическим интерфейсом
Запускаем Python и создадим новый файл, для этого заходим в «File» и выбираем «New File».
В открывшемся окне уже можно писать код программы, для примера, сделаем форму разместим на ней кнопку, после нажатия на которую на форме будет что-то печататься.
#Вызываем графическую библиотеку
import tkinter as tk
#Создаем функцию для вывода текста
def add_lable():
lable = tk.Label(win, text = ‘Не так сильно ))) ‘)
lable.pack()
#Создаем окно приложения
btn = tk.Button(win, text=»Нажми на МЕНЯ «,
command=add_lable
)
btn.pack()
win.mainloop()
Остается только запустить написанный код нажав F5 либо через меню «Run», предварительно нужно только сохранить данный файл.
Вот таким образом можно написать приложение на Python с графическим интерфейсом, это всего лишь один из вариантов.
8 этапов процесса разработки интерфейса мобильного приложения
От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.
Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.
Создание концепции
Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.
На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.
Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций
Приложение одного из такси-сервисов. Кнопок не так много, и они большие, чтобы сложно было промахнуться
В первом случае должно быть много полей, списков, графиков и переходов. Во втором случае мы видим большие элементы управления, которые просто использовать во время поездки, — и такие вещи лучше понимать уже на этом этапе.
Брейнсторминг и эскизы
Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.
Диаграмма переходов
Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.
Утверждение структуры и диаграммы переходов
Как только мы закончили с эскизами интерфейса и диаграммой переходов, необходимо, чтобы клиент их утвердил. Структура и переходы — основа всей дальнейшей работы с интерфейсом, поэтому мы не двигаемся дальше без получения подтверждения. На этом этапе гораздо проще внести какие-то изменения в будущий интерфейс, а значит, сэкономить и время, и деньги заказчика.
В качестве примера можно взять интернет-магазин или систему управления продажами. Меняя структуру такого проекта после внедрения дизайна, можно попасть в ситуацию, когда ломается цветовая схема сайта, поскольку элементы интерфейса и некоторые другие его части были изменены. В этом случае вам, вероятнее всего, придется отказаться от изменений. Либо всю работу нужно будет переделывать с нуля.
Выбор стиля интерфейса
Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.
Подтверждение стиля
На этом этапе мы рассказываем клиенту о том, как видим все сами, а также объясняем, почему приняли то или иное решение. Он может не соглашаться с некоторыми моментами в самом начале, поскольку пока не получил полной информации об интерфейсе — у него не сформировалось представление и еще нет понимания возможных проблем. Цель — завершить обсуждение принятием варианта, который удовлетворяет и нас, и клиента.
Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.
Прототипирование, дизайн и их демонстрация
Как только все эти этапы завершены, мы готовы к тому, чтобы разрабатывать и показывать заказчику полную версию дизайна. Демонстрация может выглядеть по-разному. Основываясь на собственном опыте, мы рекомендуем придерживаться следующего.
Самая быстрая форма реализации ваших идей. Это низкоуровневая демонстрация дизайна. Однако такой способ позволяет показать структуру и описание взаимодействия пользователей с разрабатываемым продуктом. Выполняется в форме блочного интерфейса в оттенках серого.
Макетная демонстрация позволяет продемонстрировать проект дизайна, приближенный к реальности. Здесь все элементы и контент статичны, но воспринимается такая форма нагляднее предыдущей. И создать презентационную модель можно достаточно быстро.
Это уже детализированный прототип финального продукта. Он эмулирует взаимодействие пользователя с интерфейсом. Например, позволяет кликать по элементам управления, использовать формы и проверять другие моменты, включая анимацию. Тем не менее создание такого прототипа — процесс, который требует большого количества времени.
Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.
А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.
Утверждение дизайна
Есть люди, которые четко представляют себе, как должен выглядеть дизайн, и есть те, кто лишь предполагает. Как бы там ни было, у каждого свое видение. На этом этапе клиент видит результат и обсуждает с нами важные моменты, а мы вносим необходимые коррективы.
В качестве вывода
Поэтапная разработка интерфейса позволяет быстро добраться до конечной цели. Все это экономит время, причем в процессе разработки можно без проблем вносить изменения. Также такой способ работы значительно снижает вероятность появления неожиданных правок от клиентов.
Что такое GUI
GUI расшифровывается как graphical user interface, что по-русски переводится как графический интерфейс пользователя. Главное отличие GUI-приложения от консольного заключается в способе взаимодействия пользователя с приложением.
В консольном приложении общение с пользователем осуществляется в последовательной манере. То есть грубо говоря:
И перескочить со 2-го пункта на 5-ый, если программой этого не было предусмотрено, при всем желании невозможно. Все очень строго.
В графическом же приложении появляются так называемые формы (или окна, кому как больше нравится), а с ними в придачу, всякие кнопки, поля для ввода, календари, таблицы и т.п.
И доступ ко всем эти объектам осуществляется в произвольном порядке. На программном уровне, достигается это за счет реализации так называемого цикла сообщений. Когда вы запускаете приложение (хотя бы тот же самый браузер), оно тут же начинает прослушивать какие сообщения ему посылает система.
Ясное дело, что сообщения эти не простые, а имеют строго установленную форму, например, когда вы двигаете мышкой, на каждый сдвиг отправляется сообщение WM_MOUSEMOVE, которое содержит информацию о позиции мыши, если вы куда-то кликаете отправляется сообщение WM_LBUTTONDOWN. Если вы нажимаете клавишу, то отправляется WM_KEYDOWN с кодом нажатой клавиши. И так далее.
Выглядит цикл сообщений на C примерно так:
Все эти события отправляются главному окну приложения, которое в свою очередь распределяет эти сообщения между своими кнопками, полями для ввода и т.д. (именуемые в простонародье контр`олами). По приходу сообщения тому или иному контролу, можно выполнить какой-нибудь код. Например, который отобразит какое-нибудь сообщение.
К счастью, в наши развитые времена, заботиться об обработки сообщений не надо. И чтобы добавить реакцию на какое-нибудь сообщение, надо просто добавить соответствующий метод и особым образом привязать его к контролу.
Создаем интерфейс для задачи
Необходимо: разработать интерфейс для задачи: “Студенты Иванов и Петров за время практики заработали определенную сумму. Кто из них заработал большую сумму? Определить средний заработок”.
Создаем проект
Выбираем Файл/Создать/Проект, затем Приложение Windows Forms, жмем Ok
Откроется редактор формы:
Добавляем поля для ввода
На форму надо чего-то добавить. По задаче у нас два параметра, значит придется добавить два поля для ввода. Откроем панель с элементами и для удобства зафиксируем ее с помощью пипки в верхнем правом углу.
Если у вас вдруг не видно панели с элементами, включите ее через пункт меню Вид/Панель элементов
Теперь добавим элементы на форму, нам потребуется два элемента вида TextBox (поля для ввода текста)
Чтобы было понятно чего в них вводить добавим подписи (элементы типа Label)
Но у этих подписей вместо текста написано label1 и label2, поменяем их свойства. У всех элементов типа Label есть свойство Text, которое определяет чего в них писать. Выделим label1 кликнув на него, он обведется пунктирной рамкой
в правом нижнем углу найдем панель свойств (если ее не видно нажмите F4). Среди множества свойств найдем то что называется Text и введем в него корректный текст.
Закончив вводить переключимся на форму, кликнув на нее, если все было сделано корректно текст label1 заменится на руб. заработал Петров
Повторим ту же процедуру для label2
Работаем с кнопкой
Теперь давайте добавим кнопку, и изменим размеры формы, а то что-то сильно много пустого места:
кнопка уже штука поинтереснее, давайте добавим ее какую-нибудь реакцию на щелчок. Выделим кнопку и щелкнем по ней два раза.
Нас перекинет в редактор кода, который будет выглядеть как-то так:
Мы только что создали обработчик события щелчка мыши по кнопке. В который можно добавить какую-нибудь реакцию на щелчок.
[Как работает обработчик]
Если вам не интересно как, смело пропускайте данный раздел =)
Что же тут произошло? А произошло тут создание функции (то есть Visual Studio за нас написала код, нам никто не мешает его ручками писать) с сигнатурой обработчика системного события. У функции два аргумента:
Далее студия привязала данную функцию к кнопке. Если смотреть через интерфейс (переключимся на форму нажав Shift+F7), то эта функция будет указана в качестве значения свойства Click в разделе Событий.
Если же смотреть еще глубже можно открыть, автогенерируемый файлик для формы Form1.Designer.cs
И если раскрыть узел Код автоматически созданный конструктором, то увидим сгенерированный код, который в явном виде описывает положение всех объектов на форме, а также привязанные к ним свойства. Приведу часть кода:
но ладно, вернемся к нашему обработчику.
Пишем обработчик
Если в какой-то момент времени вы потеряетесь среди файлов, то вы всегда можете дважды кликнуть на файл Form1.cs в обозревателе решений
а затем нажать F7 чтобы переключится непосредственно к коду формы.
И так, у нас там имеется код:
Нам по заданию надо будет вывести сообщение с решением задачи. Пока мы еще решатель не реализовали (точнее реализовывали, но еще сюда к новому коду не подцепили). А вот что-нибудь вывести уже можем. Правим обработчик:
Запустим приложение и проверим кнопку
Читаем значения из TextBox
Давайте теперь попробуем немного расширить функциональность, и будем выводить по нажатию на кнопки не простое сообщение а содержимое которое ввели в качестве зарплаты Петрова.
Переключимся на форму, нажав Shift+F7. Выберем первое поле для ввода.
Чтобы получить содержимое TextBox надо сначала узнать имя элемента. Заглянем в панель Свойств, и найдем там свойство (Name). Это и есть его имя. По умолчанию там стот textBox1, поменяем его на что-то более осознанное (txtPetrovSum):
Теперь мы сможем обратиться к элементу по этому имени. Давайте теперь еще и поменяем свойство Name у второго textBox2. Поменяем его на txtIvanovSum. По итогу будем иметь следующие названия у элементов:
переключимся обратно на код, нажмем F7, либо два раза щелкнем на кнопку.
Запускаем и проверяем:
Можно собрать какую-нибудь фразу:
Добавив “\n” мы сможем вывести текст в две строки. Получится:
Но это мы все в игрушки играемся, давайте все таки уже задачу решим
Подключаем старый код
Для лучше переносимости, рекомендую уже реализованное решение исходной задачи сначала декомпозировать, и тогда вам будет достаточно скопировать класс с логикой. Я это уже сделал с задачей про студентов еще пару статей назад, поэтому я возьму код класса Logic
и вставлю этот класс вместе со всем его содержимым после класса Form1 в файле Form1.cs. Вот что у меня получится:
Очень важно вставить код класса ПОСЛЕ класса Form1, иначе получите страшную ошибку:
Внедряем логику
правим наш обработчик клика на кнопку:
Запускаем и проверяем:
А! Нам же еще среднее арифметическое надо вывести:
Обработка ошибок
Может вы уже столкнулись с этим, но если запустить приложение, ничего не ввести и просто нажать кнопку, программа выдаст ошибку:
появление ее закономерно, программа пытается с помощью метода int.Parse преобразовать строку в число, но в строке пусто и преобразовывать нечего. Аналогичная ошибка появится если ввести буквы вместо цифр.
Наверное было бы здорово, просто проигнорировать нажатие кнопки с некорректными данными, для этого нам надо заставить программу не падать. Делается это не сильно сложно, путем добавления конструкции для перехвата ошибок, Именуется она try-catch, и выглядит так:
правда если просто вставить код в таком виде то он будет ругаться на переменные ivanovSum и petrovSum, после блока try/catch. Это происходит потому что переменные инициализируются внутри блока try, надо их вынести вовне. Придется указать тип явно.
Красота! Можно сообщение выдавать об ошибке (но лучше не надо):
Это в принципе должно хватить для выполнения первого задания в лабе 4.
Создаем элементы интерфейса программно с помощью PureLayout (Часть 1)
Привет, Хабр! Представляю вашему вниманию перевод статьи Creating UIViews Constraints Programmatically Using PureLayout автора Aly Yaka.
Сегодня я проведу вас через создание простого пользовательского интерфейса мобильного приложения кодом, без использования раскадровок или NIB’ов. Я не буду вдаваться в дискуссии о том, что лучше, потому что у всего есть свои плюсы и минусы, поэтому просто оставлю ссылку, которая углубится в это дело.
Во второй части этого руководства, мы создадим некоторые наиболее часто используемые элементы пользовательского интерфейса мобильного приложения кодом, включая панель навигации, представление таблицы и ячейки динамического размера.
Обзор
Это руководство было написано с использованием Xcode 9 и Swift 4. Я также предполагаю, что вы знакомы с Xcode, Swift и CocoaPods.
Без дальнейшего промедления, давайте начнем создавать наш проект: простое приложение Contact Card. Цель данной статьи — научить вас, как создавать пользовательский интерфейс вашего приложения в коде, и поэтому он не будет содержать никакой логики в отношении функциональности приложения, если только это не нужно для целей данного руководства.
Создание constraints программно с PureLayout
Настройка проекта
Назовите проект как хотите, я решил назвать его «ContactCard». Снимите все три опции ниже и выберите Swift в качестве языка программирования, затем нажмите «Далее».
Выберите место на вашем компьютере, чтобы сохранить проект. Снимите флажок «Create Git Repository on my Mac».
Так как мы не будем использовать Storyboards или NIB’ы в этом проекте, удалите «Main.storyboard», который можно найти в Project Navigator:
После этого нажмите на проект в навигаторе проектов и на вкладке «General» найдите раздел с информацией о развертывании и удалите все, что написано в «Main Interface». Это то, что сообщает Xcode, какой файл Storyboard загружать при запуске приложения, но поскольку мы просто удалили «Main.storyboard», Xcode не найдет этот файл, что приведет к падению приложения.
Создание ViewController
Этот код обеспечивает окно для взаимодействия пользователя с приложением, которое обычно можно найти в «ViewController.swift». Для быстрой проверки того, что все работает, перейдите к «ViewController.swift» и в методе viewDidLoad() вставьте следующую строку:
Теперь запустите приложение.
Для навигации между файлами в Xcode используйте горячие клавиши — «⇧⌘O», а затем введите имя файла или даже фрагмент кода, который вы ищете, и на экране появится список файлов, из которых вы можете выбрать.
После запуска приложения это должно быть результатом на экране вашего симулятора:
Разработка UI
Для создания нашего пользовательского интерфейса мы будем использовать библиотеку, которая сделает нашу жизнь намного проще. Чтобы установить PureLayout, вы должны сначала открыть свой терминал и набрав cd, затем пробел, перетащите папку вашего проекта в терминал и нажмите «Enter». Теперь выполните следующие команды внутри терминала:
Снова запустите pod install в своем терминале, а затем соберите свой проект, нажав «Command + B».
Перерыв на кофе
Теперь, когда все настроено, давайте начнем с реальной работы. Перейдите на «ViewController.swift» и возьмите чашку кофе, потому что вот как будет выглядеть конечный результат:
Создание ImageView
После этого напишите имя этого файла вместе с его расширением в объявлении UIImage вместо «avatar.jpg».
Для тех из вас, кто не знает, lazy-переменные похожи на обычные переменные, за исключением того, что они не инициализируются (или не выделяется какое-либо пространство памяти) до тех пор, пока они не потребуются или не будут вызваны в первый раз. Это означает, что ленивые переменные не инициализируются при инициализации контроллера представления, а скорее ожидают более позднего момента, когда они действительно необходимы, что экономит вычислительную мощность и пространство памяти для других процессов. Это особенно полезно в случае инициализации компонентов пользовательского интерфейса.
PureLayout в действии
Как вы можете видеть внутри инициализации, строка imageView.autoSetDimensions (to: CGSize (width: 128.0, height: 128.0)) является PureLayout в действии. Одной строкой мы устанавливаем ограничение как для высоты, так и для ширины UIImageView, и все необходимые NSLayoutConstraints создаются без необходимости огромных вызовов функций. Если вы имели дело с созданием ограничений программным способом, то вы, скорее всего, уже влюбились в эту замечательную библиотеку.
Затем мы переходим к созданию UIView, который будет служить верхней частью представления позади аватара, окрашенного в серый цвет. Объявим следующую ленивую переменную для этого представления:
Добавление subviews
А теперь добавьте следующую строку в viewDidLoad (): self.addSubviews ()
Настройка ограничений
Чтобы просто получить представление о том, как далеко мы продвинулись, давайте установим ограничения для этих двух видов. Создайте другую функцию с именем func setupConstraints() и вставьте следующие ограничения:
Выводим аватар на передний план
Этот метод перенесет аватар с самого дна стека до вершины, так что выбирайте тот метод, который вам больше нравится. Конечно, для удобства чтения лучше добавить подпредставления в том порядке, в котором они должны отображаться, если они пересекаются, при этом следует помнить, что первое добавленное subviews будет находиться в нижней части стека, и поэтому любые другие пересекающиеся вьюхи появятся поверх него.
И вот как это должно выглядеть на самом деле:
Создание сегментированного контроля
Далее мы создадим сегментированный элемент управления, который представляет собой серую полосу, содержащую три раздела. На самом деле сегментированный элемент управления создать просто. Сделайте следующее:
Я считаю, что все понятно, единственное отличие состоит в том, что после инициализации мы предоставляем ему массив строк, каждая строка представляет собой заголовок одного из наших желаемых разделов. Мы также устанавливаем selectedSegmentIndex в 0, что говорит сегментированному элементу управления выделять/выбирать первый сегмент при инициализации. Остальное — просто стиль, с которым можно поиграться.
Теперь давайте продолжим и добавим его в качестве подпредставления, вставив следующую строку в конец функции addCubviews(): self.view.addSubview(segmentedControl) и его ограничения будут такими:
Мы говорим сегментированному элементу управления, что хотим прикрепить его к левой стороне его superview, однако мы хотим немного увеличить интервал, а не прикреплять его непосредственно к краю экрана. Если вы заметили, я использую так называемую сетку из восьми точек, где все расстояния и размеры кратны восьми. Я делаю то же самое с правой стороны сегментированного элемента управления. Что касается последнего ограничения, то он говорит прикрепить вершину к основанию аватара с интервалом в 16 точек.
После добавления указанных выше ограничений в func setupConstraints() запустите код и убедитесь, что он выглядит следующим образом:
Добавление кнопки
Теперь перейдем к последней части пользовательского интерфейса учебника, которая представляет собой кнопку «Редактировать». Добавьте следующую lazy-переменную:
Теперь добавьте кнопку как subview, как и остальные компоненты, и добавьте следующие ограничения, чтобы она появилась там, где должна быть:
Здесь мы устанавливаем только правые и верхние ограничения для кнопки, т.к мы дали ей размер, она не будет расширяться и больше ничего не понадобится. Теперь запустите проект, чтобы увидеть конечный результат: