Mostrando las entradas con la etiqueta interfaz. Mostrar todas las entradas
Mostrando las entradas con la etiqueta interfaz. Mostrar todas las entradas

QT Designer - aplicacion comentada PyQt5

Link al repositorio acá 

import sys
from PyQt5 import uic, QtGui
from PyQt5.QtWidgets import QMainWindow, QApplication


class MainWindow(QMainWindow): #nota7: cuando llama a la clase, viene por aca

def __init__(self): #nota8: el __init__ de initialized, es el codigo que SIEMPRE se ejecuta, el def ventanaNueva no se ejecuta porque esta fuera de aca, aca se conectan botones, los eventos que vayan a pasar, las restricciones, etc...
super().__init__() #superposiciona el init, siempre va.
uic.loadUi('gui_1.ui', self) #aca se carga la gui
self.pushButton.clicked.connect(self.ventanaNueva) #aca conecta el boton de nombre pushButton que nos da el designer y lo conectamos a la funcion ventanaNueva

def ventanaNueva(self):
gui2.show() #y aca muestra la ventana y nada mas
#gui2.showMaximized() #esto esta para que prueven cambiando y viendo como cambia
#gui2.showMinimized() #esto esta para que prueven cambiando y viendo como cambia

class Window2(QMainWindow):
def __init__(self):
super().__init__()
uic.loadUi('gui_2.ui', self)

if __name__ == '__main__': #nota1: esto siempre va, es para que el programa siempre ejecute esta parte
app = QApplication(sys.argv) #Nota2: aca crea un objeto para hacer las aplicaciones
gui = MainWindow() #Nota3: todas las ventanas tendran su armado mediante esto, un objeto del tipo variable=Clase_del_objeto()
gui2= Window2() #Nota4: para la gui2
gui.show() #Nota5: aca muestra la gui principal la main, como ya la tiene armada(en Nota3) ahora la muestra mediante el metodo .show(), hay varias maneras, showMaximiced() la muestra maximixada por ej
sys.exit(app.exec_()) #Nota6: esto es para que quede abierto, sino se cierra el programa, queda ejecutandose



Haciendo el ejecutable

asta acá puedes hacer tu programa y ejecutarlo a medida que vas modificando y agregando interfaces pero a la hora de hacer el ejecutable es necesario hacer cambios...

al momento de usar auto-py-to-exe, muy práctico a la hora de exportar me encontré con algunos problemas, pero recurrí a usar pyuic5 para transformar los .ui a .py y así usar todos los .py en el programa de auto-py-to-exe (donde encontrarlo

hay que instalar las librerías necesarias

pip install pyqt5-sip
pip install pyqt5

con la terminal abierta en la ubicación donde estan los .ui se ingresa el siguiente codigo, usando pycharm puedes usar ALT+F12 y se abre abajo.

pyuic5 -x gui_1.ui -o gui_1_ui.py

la forma es: pyuic5 -x <archivo .ui> -o <nuevo_archivo .py>
el nombre de archivo.ui pasa a archivo_ui.py

para nuestro programa usamos...

>pyuic5 -x gui_1.ui -o gui_1_ui.py

>pyuic5 -x gui_2.ui -o gui_2_ui.py

Esto amerita unos cambios en el codigo...

import sys
from PyQt5 import uic, QtGui
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5 import QtWidgets

#####
from gui_1_ui import * # NUEVO
from gui_2_ui import * # NUEVO


#####

# class MainWindow(QMainWindow): #nota7: cuando llama a la clase, viene por aca
class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow): # NUEVO

def __init__(
self): # nota8: el __init__ de initialized, es el codigo que SIEMPRE se ejecuta, el def ventanaNueva no se ejecuta porque esta fuera de aca, aca se conectan botones, los eventos que vayan a pasar, las restricciones, etc...
# super().__init__() # superposiciona el init, siempre va.
# uic.loadUi('gui_1.ui', self) # aca se carga la gui
QtWidgets.QMainWindow.__init__(self) # NUEVO
self.setupUi(self) # NUEVO
self.pushButton.clicked.connect(
self.ventanaNueva) # aca conecta el boton de nombre pushButton que nos da el designer y lo conectamos a la funcion ventanaNueva

def ventanaNueva(self):
gui2.show() # y aca muestra la ventana y nada mas
# gui2.showMaximized() #esto esta para que prueven cambiando y viendo como cambia
# gui2.showMinimized() #esto esta para que prueven cambiando y viendo como cambia


# class Window2(QMainWindow):
class Window2(QtWidgets.QWidget, Ui_Form): # NUEVO
def __init__(self):
QtWidgets.QMainWindow.__init__(self) # NUEVO
self.setupUi(self) # NUEVO
# super().__init__()
# uic.loadUi('gui_2.ui', self)


# if __name__ == '__main__': # nota1: esto siempre va, es para que el programa siempre ejecute esta parte
# app = QApplication(sys.argv) # Nota2: aca crea un objeto para hacer las aplicaciones
# gui = MainWindow() # Nota3: todas las ventanas tendran su armado mediante esto, un objeto del tipo variable=Clase_del_objeto()
# gui2 = Window2() # Nota4: para la gui2
# gui.show() # Nota5: aca muestra la gui principal la main, como ya la tiene armada(en Nota3) ahora la muestra mediante el metodo .show(), hay varias maneras, showMaximiced() la muestra maximixada por ej
# sys.exit(app.exec_()) # Nota6: esto es para que quede abierto, sino se cierra el programa, queda ejecutandose

app = QApplication([]) # NUEVO
gui = MainWindow() # NUEVO
gui2 = Window2() # NUEVO
gui.show() # NUEVO
app.exec_() # NUEVO

luego en una terminal de anaconda, ejecutamos Auto-py-to-exe


en Additional Files, agregamos los .py nuevos



pyinstaller --noconfirm --onefile --console --name "ejemplo4" --add-data "C:/Users/Gaston/PycharmProjects/ejemplo/gui_1_ui.py;." --add-data "C:/Users/Gaston/PycharmProjects/ejemplo/gui_2_ui.py;."  "C:/Users/Gaston/PycharmProjects/ejemplo/main.py"

el programa funciona pero se habre una terminal, con cambiarlo en  Console Window es suficiente


pyinstaller --noconfirm --onefile --windowed --name "ejemplo5" --add-data "C:/Users/Gaston/PycharmProjects/ejemplo/gui_1_ui.py;." --add-data "C:/Users/Gaston/PycharmProjects/ejemplo/gui_2_ui.py;."  "C:/Users/Gaston/PycharmProjects/ejemplo/main.py"


el codigo limpio queda asi...

import sys
from PyQt5 import uic, QtGui
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5 import QtWidgets
from gui_1_ui import *
from gui_2_ui import *


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):

def __init__(
self):
QtWidgets.QMainWindow.__init__(self)
self.setupUi(self)
self.pushButton.clicked.connect(
self.ventanaNueva)

def ventanaNueva(self):
gui2.show()


class Window2(QtWidgets.QWidget, Ui_Form):
def __init__(self):
QtWidgets.QMainWindow.__init__(self)
self.setupUi(self)


app = QApplication([])
gui = MainWindow()
gui2 = Window2()
gui.show()
app.exec_()

01100110 01101001 01101110 00100000 01100100 01100101 00100000 01100011 01101111 01100100 01101001 01100111 01101111

RETURN


Sobre android studio y como definir una interfaz

notas:
Los id se utilizan para que la clase R pueda revisar y encontrar cada elemento, ej: si tenemos un elemento, un TextView cuyo id se definió como...
android:id="@+id/tvMainTitle"
el id es tvMainTitle, este id puede ser referenciado mediante...
R.id.tvMainTitle

de esta forma se puede hacer uso de sus propiedades...
  
Para acomodar el código de forma rápida en Windows o Linux meciante el atajo Ctrl+Alt+L, si no anda en la parte superior code >  Reformat Code


Organización Lineal (LinearLayout)

orientation="vertical" de arriba hacia abajo
orientation="horizontal" de izquierda a derecha

dentro de un LinearLayout puede haber otro que tenga otra orientación

 
<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools" 
     android:layout_width="match_parent"
     android:orientation="vertical"
     android:layout_height="match_parent">
    <TextView
             android:id="@+id/tvMainTitle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:text="Hola Mundo!"/>
     <ImageView 
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:src="@drawable/ic_launcher_background"/>
     <LinearLayout
             android:layout_width="match_parent"
             android:orientation="horizontal"
             android:gravity="center"
             android:layout_height="wrap_content">
         <ImageView
             android:layout_width="120dp" 
             android:layout_height="120dp"
             android:src="@drawable/ic_filter_1_black_24dp"/>
         <ImageView
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:src="@drawable/ic_filter_2_black_24dp"/>
         <ImageView
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:src="@drawable/ic_filter_3_black_24dp"/>
     </LinearLayout> 
</LinearLayout> 


Como podemos ver el "hola mundo" y el cuadrado verde están dentro del primer LinearLayout y los Vector Assets con los números 1, 2 y 3 están el el segundo LinearLayout con una orientación horizontal, en necesario poner su orientación.















Organizacion Relativa(RelativeLayout)
los elementos se organizan dependiendo de otros elementos
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:app="http://schemas.android.com/apk/res-auto" 
        xmlns:tools="http://schemas.android.com/tools" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:orientation="vertical">
           <ImageView         
              android:layout_width="240dp"         
              android:layout_height="200dp" 
              android:layout_alignParentStart="true"         
              android:layout_alignParentTop="true" 
              android:src="@drawable/rojo" />
           <ImageView         
              android:id="@+id/ivMainVerde" 
              android:layout_width="150dp"         
              android:layout_height="370dp" 
              android:layout_alignParentTop="true" 
              android:layout_alignParentEnd="true" 
              android:src="@drawable/verde" />
           <ImageView         
              android:layout_width="250dp"         
              android:layout_height="130dp"         
              android:layout_below="@+id/ivMainVerde" 
              android:src="@drawable/azul" />
           <ImageView         
              android:layout_width="130dp" 
              android:layout_height="130dp"         
              android:layout_alignParentEnd="true" 
              android:layout_alignParentBottom="true"         
              android:src="@drawable/rosado" />
 </RelativeLayout>
 


 Como se puede ver los tags de align definen el lugar que les corresponde a los elementos, en el caso del azul lo hace con respecto al verde mediante el id que éste debe poseer, los alignParent son con respecto a la vista, los que no, con respecto a otro elemento.










FrameLayout
cuando es requerido que la aplicación no ocupe toda la pantalla, o que en un cierto lugar aparezca una imagen, es decir que crecerá tanto como uno quiera.
 Resulta muy versátil, porque permite poner vistas de forma dinámica así podemos reservar una vista para que entre y salga constantemente, también permite poner una imagen sobre otra sin problemas, es recomendable que tenga un solo hijo.

Layouts externos: ConstraintLayout 


INDICE