Construcción de Interfaces de Xcode

Construcción de Interfaces de Xcode | Original, traducido por IA

Home PDF

Este es un archivo XML en el formato XIB (Xcode Interface Builder), utilizado para definir la interfaz de usuario de una aplicación macOS escrita en Cocoa. Específicamente, este archivo XIB describe una ventana de configuración para una aplicación llamada “Reveal-In-GitHub.” Permíteme desglosarlo para ti paso a paso:

Descripción General

Este archivo define una ventana titulada “Reveal-In-GitHub Settings” con varios elementos de la interfaz de usuario como botones, campos de texto y una vista personalizada. Está diseñado utilizando Interface Builder (parte de Xcode) y utiliza Auto Layout para posicionar los elementos dinámicamente. La ventana es controlada por una clase personalizada llamada RIGSettingWindowController.

Secciones Clave

Información del Encabezado
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="9059" systemVersion="14F27" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
```
- Esto especifica que es un archivo XIB para una aplicación Cocoa de macOS, utilizando la versión 3.0 del formato XIB.
- toolsVersion="9059" y systemVersion="14F27" indican las versiones de Xcode y macOS utilizadas cuando se creó.
- useAutolayout="YES" significa que el diseño se ajusta dinámicamente según el tamaño de la ventana o la resolución de la pantalla.
Dependencias
```
<dependencies>
    <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="9059"/>
</dependencies>
```
- Esto hace referencia al complemento Cocoa para Interface Builder, que proporciona el marco para los elementos de la interfaz de usuario de macOS.

Objetos Esta sección define todos los objetos en la interfaz, incluyendo la ventana, vistas, botones y sus conexiones.

Propietario del Archivo (RIGSettingWindowController)

<customObject id="-2" userLabel="File's Owner" customClass="RIGSettingWindowController">
    <connections>
        <outlet property="configsView" destination="IKd-Ev-B9V" id="z2z-MF-G88"/>
        <outlet property="mainView" destination="se5-gp-TjO" id="pGn-EC-mzi"/>
        <outlet property="window" destination="F0z-JX-Cv5" id="gIp-Ho-8D9"/>
    </connections>
</customObject>

El Propietario del Archivo es la clase controladora (RIGSettingWindowController) que gestiona esta ventana.
Tiene salidas (conexiones) a la vista principal, una vista de configuraciones y la ventana misma, vinculando los elementos de la interfaz de usuario al código.

Ventana

<window title="Reveal-In-GitHub Settings" ... id="F0z-JX-Cv5" userLabel="Settings">
    <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES" resizable="YES"/>
    <rect key="contentRect" x="527" y="176" width="651" height="497"/>
    <rect key="screenRect" x="0.0" y="0.0" width="1440" height="877"/>

Define una ventana con un título, botones de cerrar/minimizar/redimensionar y un tamaño de 651x497 píxeles.
El contentRect especifica su posición y tamaño en la pantalla, mientras que screenRect describe la resolución completa de la pantalla (1440x877).

Vista de Contenido

<view key="contentView" id="se5-gp-TjO">
    <rect key="frame" x="0.0" y="0.0" width="651" height="497"/>
    <subviews>

La vista de contenido principal llena la ventana y contiene todos los elementos de la interfaz de usuario (subvistas).

Elementos de la Interfaz de Usuario (Subvistas) Aquí hay algunos elementos clave dentro de la vista de contenido:
- Campos de Texto
```
<textField ... id="G1C-Td-n9Y">
    <rect key="frame" x="18" y="425" width="187" height="17"/>
    <textFieldCell ... title="Custom Menu Items" ...>
```
  - Una etiqueta que dice “Custom Menu Items” en la posición (18, 425).
  - Otros campos de texto incluyen “Menu Title,” “⌃⇧⌘ +” (atajo de teclado Control+Shift+Command) y “URL Pattern.”
- Botones
```
<button ... id="EuN-9g-Vcg">
    <rect key="frame" x="14" y="13" width="137" height="32"/>
    <buttonCell ... title="Save" ...>
    <connections>
        <action selector="saveButtonClcked:" target="-2" id="efd-QE-4aQ"/>
    </connections>
```
  - Un botón “Save” en (14, 13) que activa el método saveButtonClcked: en el controlador.
  - Otros botones incluyen “Clear Default Repos” y “Reset Default Menus,” cada uno vinculado a acciones específicas.
- Vista Personalizada
```
<customView ... id="IKd-Ev-B9V" userLabel="Config View">
    <rect key="frame" x="20" y="54" width="611" height="330"/>
```
  - Un espacio reservado para una vista personalizada (probablemente poblada programáticamente) que ocupa la mayor parte de la ventana.
Conexiones
- Los botones están cableados a métodos en el RIGSettingWindowController (por ejemplo, saveButtonClcked:, clearButtonClicked:), permitiendo que las interacciones del usuario desencadenen el código.

¿Qué Hace Esto?

Este archivo XIB crea una ventana de configuración para una aplicación macOS llamada “Reveal-In-GitHub,” probablemente una herramienta para integrar la funcionalidad de GitHub en otra aplicación. La ventana permite a los usuarios:

Personalizar los elementos del menú (con títulos y patrones de URL).
Guardar sus configuraciones.
Borrar los repositorios predeterminados o restablecer los menús a los valores predeterminados.

El diseño está fijo (fixedFrame="YES") en lugar de aprovechar completamente las restricciones de Auto Layout, lo que significa que las posiciones están codificadas en píxeles. Esto podría hacer que sea menos flexible en diferentes tamaños de pantalla, pero más sencillo de diseñar.

¿Por Qué Usar XIB?

Los archivos XIB permiten a los desarrolladores diseñar interfaces visualmente en el Interface Builder de Xcode, conectándolos al código a través de salidas y acciones. Este archivo conecta la interfaz de usuario (botones, texto, etc.) con la clase RIGSettingWindowController, que maneja la lógica.

Back 2025.04.02 Donate