Esta página aún no se ha traducido para esta versión. Puede ver la versión más reciente de esta página en inglés.

Diseñar una interfaz de usuario mediante programación

Puede ajustar el tamaño y la ubicación de los componentes y administrar el orden de adelante hacia atrás de los componentes agrupados estableciendo ciertos valores de propiedad. En este tema se explica cómo usar estas propiedades para obtener el diseño que desea. También se explica cómo usar la devolución de llamada para controlar el comportamiento de cambio de tamaño de la interfaz de usuario.SizeChangedFcn

Colocación y dimensionamiento de componentes

Un diseño de interfaz de usuario consta de una figura y uno o más componentes que se colocan dentro de la figura. La colocación y el dimensionamiento precisos de cada componente implican el establecimiento de ciertas propiedades y la comprensión de cómo los límites internos y externos de la figura se relacionan entre sí.

Ubicación y tamaño de los límites exteriores y área dibujable

El área dentro de la figura, que contiene los componentes de la interfaz de usuario, se denomina.área dibujable El área dibujable los bordes de la figura, barra de título, barra de menús y barras de herramientas.excludes Puede controlar la ubicación y el tamaño del área dibujable estableciendo la propiedad de la figura como un vector de fila de cuatro elementos.Position Los dos primeros elementos de este vector especifican la ubicación. Los dos últimos elementos especifican el tamaño. De forma predeterminada, los valores de la figura están en píxeles.Position

Este comando crea una figura y establece el valor.Position El borde izquierdo del área dibujable es 258 píxeles desde el lado izquierdo de la pantalla. Su borde inferior es de 132 píxeles hacia arriba desde la parte inferior de la pantalla. Su tamaño es de 560 píxeles de ancho por 420 píxeles de alto:

f = figure('Position',[258 132 560 420]); 

Puede consultar o cambiar los límites externos de la figura mediante la propiedad.OuterPosition La región delimitada por los límites externos de la figura incluye los bordes de la figura, la barra de título, la barra de menús y las barras de herramientas. Al igual que la propiedad, el es un vector de fila de cuatro elementos: el borde exterior izquierdo de esta figura es de 250 píxeles desde el lado izquierdo de la pantalla.PositionOuterPosition

f.OuterPosition
ans =     250   124   576   512
Su borde exterior inferior es de 124 píxeles hacia arriba desde la parte inferior de la pantalla. El área encerrada por los límites exteriores de la figura tiene 576 píxeles de ancho por 512 píxeles de alto.

Cambiar explícitamente o hace que cambie la otra propiedad.PositionOuterPosition Por ejemplo, este es el valor actual de: cambiar las causas de cambio:Positionf

f.Position
ans =     258   132   560   420
OuterPositionPosition
f.OuterPosition = [250 250 490 340]; f.Position
ans =     258   258   474   248

Otros componentes de la interfaz de usuario, como uicontrols, uitables y uipanels tienen una propiedad, que puede usar para establecer su ubicación y tamaño.Position

Unidades de medida

Las unidades predeterminadas asociadas a la propiedad dependen del componente que se esté colocando.Position Sin embargo, puede cambiar la propiedad para diseñar la interfaz de usuario en las unidades que prefiera.Units Hay seis unidades de medida diferentes para elegir: pulgadas, centímetros, normalizados, puntos, píxeles y caracteres.

Especifique siempre antes los resultados más predecibles.UnitsPosition

f = figure('Units','inches','Position',[4 3 6 5]);

La elección de las unidades puede afectar al comportamiento de apariencia y cambio de tamaño de la interfaz de usuario:

  • Si desea que los componentes de la interfaz de usuario escalen proporcionalmente con la figura cuando el usuario cambia el tamaño de la figura, establezca la propiedad de los componentes.Units'normalized'

  • Los componentes de interfaz de usuario no se escalan proporcionalmente dentro de la figura cuando su propiedad está establecida en,,, o.Units'inches''centimeters''points''pixels''characters'

  • Si está desarrollando una interfaz de usuario multiplataforma, establezca la propiedad en o para que el diseño sea coherente en todas las plataformas.Units'points''characters'

Ejemplo de un diseño simple

Aquí está el código para una aplicación simple que contiene un eje y un botón. Para ver cómo funciona, copie y pegue este código en el editor y ejecútelo. Este código realiza las siguientes tareas:

function myui    % Add the UI components    hs = addcomponents;        % Make figure visible after adding components    hs.fig.Visible = 'on';        function hs = addcomponents        % add components, save handles in a struct        hs.fig = figure('Visible','off',...                   'Resize','off',...                   'Tag','fig');        hs.btn = uicontrol(hs.fig,'Position',[10 340 70 30],...                   'String','Plot Sine',...                   'Tag','button',...                   'Callback',@plotsine);        hs.ax = axes('Parent',hs.fig,...                  'Position',[0.20 0.13 0.71 0.75],...                  'Tag','ax');    end     function plotsine(hObject,event)        theta = 0:pi/64:6*pi;        y = sin(theta);        plot(hs.ax,theta,y);    end end 

  • La función Main, llama a la función.myuiaddcomponents La función devuelve una estructura, que contiene los identificadores de todos los componentes de la interfaz de usuario.addcomponentshs

  • La función crea una figura, un eje y un botón, cada uno con valores específicos.addcomponentsPosition

    • Observe que la propiedad de la figura es.Resize'off' Este valor deshabilita la capacidad de cambio de tamaño de la figura.

    • Observe que la propiedad de la figura está dentro de la función.Visible'off'addcomponents El valor cambia a después de vuelve a la función de llamada.'on'addcomponents Esto retrasa la visualización de la figura hasta después de agregar todos los componentes.MATLAB® Por lo tanto, la interfaz de usuario resultante tiene una apariencia limpia cuando se inicia.

  • La función traza la función sinusoidal dentro de los ejes cuando el usuario hace clic en el botón.plotsine

Administrar el diseño en las UIs Resizable

Para crear una interfaz de usuario redimensionable y administrar el diseño cuando el usuario cambia el tamaño de la ventana, establezca la propiedad de la figura para que sea un identificador para una función de devolución de llamada.SizeChangedFcn Codificar la función de devolución de llamada para administrar el diseño cuando cambia el tamaño de la ventana.

Si la interfaz de usuario tiene otro contenedor, como un UIPanel o uibuttongroup, puede administrar el diseño de los componentes secundarios del contenedor en una función de devolución de llamada independiente que asigne a la propiedad.SizeChangedFcn

La devolución de llamada se ejecuta solo en estas circunstancias:SizeChangedFcn

  • El contenedor se vuelve visible por primera vez.

  • El contenedor es visible mientras cambia su área dibujable.

  • El contenedor se vuelve visible por primera vez después de que su área dibujable cambie. Esta situación se produce cuando el área dibujable cambia mientras el contenedor es invisible y se vuelve visible más adelante.

Nota

Normalmente, el área dibujable cambia al mismo tiempo que cambian los límites externos. Sin embargo, agregar o quitar barras de menú o barras de herramientas a una figura hace que los límites externos cambien mientras el área dibujable permanece constante. Por lo tanto, la devolución de llamada no se ejecuta al agregar o quitar barras de menús o barras de herramientas.SizeChangedFcn

Esta aplicación es una versión redimensionable de la aplicación simple definida en.Ejemplo de un diseño simple Este código incluye una devolución de llamada de figura llamada.SizeChangedFcnresizeui La función calcula nuevos valores para el botón y los ejes cuando el usuario cambia el tamaño de la ventana.resizeuiPosition El botón parece estar parado cuando el usuario cambia el tamaño de la ventana. Los ejes se escalan con la figura. La función establece la ubicación y el tamaño del botón y los ejes cada vez que el usuario cambia de tamaño de la ventana:

function myui    % Add the UI components    hs = addcomponents;        % Make figure visible after adding components    hs.fig.Visible = 'on';        function hs = addcomponents        % Add components, save handles in a struct        hs.fig = figure('Visible','off',...                   'Tag','fig',...                   'SizeChangedFcn',@resizeui);        hs.btn = uicontrol(hs.fig,'String',...                   'Plot Sine',...                   'Callback',@plotsine,...                   'Tag','button');        hs.ax = axes('Parent',hs.fig,...                   'Units','pixels',...                   'Tag','ax');    end     function plotsine(hObject,event)        theta = 0:pi/64:6*pi;        y = sin(theta);        plot(hs.ax,theta,y);    end     function resizeui(hObject,event)                    % Get figure width and height        figwidth = hs.fig.Position(3);        figheight = hs.fig.Position(4);                % Set button position        bheight = 30;         bwidth = 70;        bbottomedge = figheight - bheight - 50;        bleftedge = 10;        hs.btn.Position = [bleftedge bbottomedge bwidth bheight];                % Set axes position        axheight = .75*figheight;        axbottomedge = max(0,figheight - axheight - 30);        axleftedge = bleftedge + bwidth + 30;        axwidth = max(0,figwidth - axleftedge - 50);        hs.ax.Position = [axleftedge axbottomedge axwidth axheight];    end end
resizeui

  • La altura, el ancho y el borde izquierdo del botón permanecen igual cuando la ventana cambia de tamaño.

  • El borde inferior del botón, permite 50 píxeles de espacio entre la parte superior de la figura y la parte superior del botón.bbottomedge

  • El valor de la altura de los ejes, es 75% de la altura disponible en la figura.axheight

  • El valor del borde inferior de los ejes, permite 30 píxeles de espacio entre la parte superior de la figura y la parte superior de los ejes.axbottomedge En este cálculo, la función limita este valor a valores no negativos.max

  • El valor del ancho de los ejes, permite 50 píxeles de espacio entre el lado derecho de los ejes y el borde derecho de la figura.axwidth En este cálculo, la función limita este valor a valores no negativos.max

Tenga en cuenta que el código de diseño está dentro de la función.allresizeui Es una buena práctica para poner todo el código de diseño dentro de la devolución de llamada para asegurar los resultados más precisos.SizeChangedFcn

Además, es importante retrasar la visualización de toda la ventana de IU hasta que se definan todas las variables que utiliza una devolución de llamada.SizeChangedFcn Si lo hace, puede evitar que la devolución de llamada devuelva un error.SizeChangedFcn Para retrasar la visualización de la ventana, establezca la propiedad de la figura en.Visible'off' Después de definir todas las variables que usa la devolución de llamada, establezca la propiedad.SizeChangedFcnVisible'on'

Administrar el orden de apilamiento de componentes agrupados

El orden predeterminado de adelante hacia atrás, o el orden de apilamiento, de los componentes de una interfaz de usuario es el siguiente:

  • Los ejes y otros objetos gráficos aparecen detrás de otros componentes. Los componentes y contenedores de la interfaz de usuario (uipanels, uibuttongroups y uitabs) aparecen delante de ellos.

  • Los componentes de la interfaz de usuario y los contenedores aparecen en el orden en que se crean. Los componentes nuevos aparecen delante de los componentes existentes.

Puede cambiar el orden de apilamiento en cualquier momento, pero hay algunas restricciones. Los ejes y otros objetos gráficos se pueden apilar en cualquier orden con respecto a los demás. Sin embargo, los ejes y otros objetos gráficos no se pueden apilar delante de los componentes y contenedores de la interfaz de usuario. Siempre aparecen detrás de los componentes de interfaz de usuario y contenedores.

Puede solucionar esta restricción agrupando objetos de gráficos en contenedores independientes. A continuación, puede apilar esos contenedores en cualquier orden. Para agrupar un objeto de gráficos en un contenedor, establezca su propiedad para que sea ese contenedor.Parent Por ejemplo, puede agrupar los ejes en un UIPanel estableciendo la propiedad de los ejes para que sea el UIPanel.Parent

La propiedad de un UIPanel, uibuttongroup, o uitab enumera los objetos secundarios dentro del contenedor según su orden de apilamiento.Children

Temas relacionados