uitableviewcontroller - Problema de redimensionamiento automático en UITableView en Xcode 6
uitableviewcontroller swift 4 (3)
Estoy usando cambio de tamaño automático en xcode 6 en UITableview pero no está funcionando correctamente. Quiero usar el ajuste automático. He agregado un campo de texto en una celda estática en la clase UITableviewController desde el guión gráfico. Campo de texto más allá de la pantalla, ya sea en paisaje o retrato. No quiero usar autolayout todo mi proyecto está en autorizar.
Después de horas de problemas con esto, simplemente cellForRowAtIndexPath
los marcos manualmente en cellForRowAtIndexPath
...
En mi situación, la etiqueta que tenía debía estar siempre a 8 puntos del borde derecho de la celda ... La ejecutaría y la etiqueta desaparecería. Así que en el cellForRowAtIndexPath
, agregué un pequeño "hack" para arreglar el marco ...
if (cell.weight.frame.origin.x != cell.frame.size.width - 138) {
CGRect frame = cell.weight.frame;
frame.origin.x = cell.frame.size.width - 138;
cell.weight.frame = frame;
}
138 en ese caso era el ancho de mi etiqueta (131) más el relleno que quería del lado derecho de la celda (7) ...
No es exactamente bonito, pero funciona para mí!
Es un problema de manejo de Xcode 6 .xib y .storyboard. En breve, Xcode establece un marco inadecuado para la celda de vista de tabla y su contentView
. Déjame explicarte un poco más profundo.
Cómo funcionan las máscaras de autorización
Básicamente, limita el frame
vista al frame
de su supervisión. Podemos especificar qué márgenes y dimensiones serán flexibles y cuáles serán fijos. Cuando superview cambia sus límites, nuestros límites de vista también cambiarán de acuerdo con nuestras especificaciones de tamaño automático. Esto ocurrió no solo en el tiempo de ejecución, sino también en Xcode Interface Builder. Intente obtener una vista con subvistas, configure diferentes opciones de tamaño automático para las subvistas y cambie el tamaño de la vista maestra. Verás que las subvistas se redimensionan justo en Xcode. Conveniente, ¿eh?
La fuente de error
La primera vez que descubrí exactamente el mismo problema después de copiar las celdas de vista de tabla del guión gráfico del iPhone al guión del iPad. Después de profundizar en el archivo .storyboard, descubrí que la celda y su contentView
todavía tienen marcos 320x91 (en lugar de un tamaño de iPad de 768x91) en .storyboard, mientras que en la pantalla y en los inspectores ambos tenían el tamaño correcto. es una inconsistencia entre los datos seriales reales y la representación visual.
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="91" sectionHeaderHeight="22" sectionFooterHeight="22" id="nKc-Lp-03y">
<rect key="frame" x="0.0" y="58" width="768" height="901"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<prototypes>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" accessoryType="disclosureIndicator" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" reuseIdentifier="PriceEvaluateCell" rowHeight="91" id="cis-7J-9wV" customClass="PriceEvaluateCell">
<rect key="frame" x="0.0" y="434" width="320" height="91"/>
<!-- note how small frame is! But it is drawn with iPad width -->
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="cis-7J-9wV" id="cYU-lI-DGN">
<rect key="frame" x="0.0" y="0.0" width="320" height="90"/>
<!-- here is same issue -->
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="TItle" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="AOE-zL-Dv0">
<rect key="frame" x="9" y="3" width="305" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<!-- this view draws OK, it has small size, left alignment and flexible right margin -->
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="FGPrice" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="wPa-dC-JzV">
<rect key="frame" x="623" y="20" width="104" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<!-- this is bad view, it has flexible LEFT and will misplace every time you open the file -->
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" red="0.40000000600000002" green="1" blue="0.40000000600000002" alpha="1" colorSpace="calibratedRGB"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
</tableViewCellContentView>
<connections>
<!-- ... -->
</connections>
</tableViewCell>
</prototypes>
<connections>
<!-- ... -->
</connections>
</tableView>
Por lo tanto, cuando configuro el frame
subvista de celda según el tamaño del iPad (por ejemplo, x = "624" y = "19" ancho = "80" altura = "21"), y el margen izquierdo flexible. Se convierte más allá de los límites de la celda internamente , mientras que visualmente todavía aparece correctamente configurado. Y cuando el guión gráfico se guardó y luego se volvió a cargar desde el archivo, la celda y su contentView
se redimensionaron automáticamente de 320x91 a 768x91, y esa subvista debido a su tamaño automático automáticamente va muy a la derecha.
Ahora echemos un vistazo a su caso. Tienes el campo de texto con ancho flexible. Y su marco se hace cada vez más amplio cada vez que abro el proyecto. Parece la misma inconsistencia entre el ancho almacenado y el ancho visual. Después de abrir .storyboard de su proyecto, podemos ver que tanto la celda de vista de tabla como su contentView
no tienen ningún frame
especificado. Así que podemos decir que en su caso Xcode establece implícitamente un marco muy pequeño tanto para su celda como para su contentView
.
Así es como se ve dentro.
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="plain" separatorStyle="default" rowHeight="246" sectionHeaderHeight="22" sectionFooterHeight="22" id="zuY-va-uVD">
<rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<sections>
<tableViewSection id="KFU-cy-GoW">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" rowHeight="245" id="WCc-Ec-YKn">
<!-- note there is no frame at all -->
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="WCc-Ec-YKn" id="DtD-vs-Xwy">
<!-- and here too -->
<autoresizingMask key="autoresizingMask"/>
<subviews>
<textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" text="autorsizing" borderStyle="roundedRect" minimumFontSize="17" id="NCA-qk-Isa">
<!-- and here frame is already went wrong... -->
<rect key="frame" x="60" y="108" width="900" height="30"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" red="0.89019607840000003" green="0.89019607840000003" blue="0.89019607840000003" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<textInputTraits key="textInputTraits"/>
</textField>
</subviews>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
<connections>
<outlet property="dataSource" destination="1kU-E8-zzp" id="pca-5d-SRg"/>
<outlet property="delegate" destination="1kU-E8-zzp" id="WxC-Qa-ToS"/>
</connections>
</tableView>
Como arreglar
Todavía no se ha encontrado una solución final, pero podemos solucionar el error. Si Xcode no puede establecer los marcos adecuados, podemos hacerlo manualmente. Abra el guión gráfico con cualquier editor de texto (es XML simple) y corrija los marcos:
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="plain" separatorStyle="default" rowHeight="246" sectionHeaderHeight="22" sectionFooterHeight="22" id="zuY-va-uVD">
<rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<sections>
<tableViewSection id="KFU-cy-GoW">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" rowHeight="245" id="WCc-Ec-YKn">
<autoresizingMask key="autoresizingMask"/>
<!-- we insert the correct frame (exact size we can get from xcode editor, which draws it properly) -->
<rect key="frame" x="0.0" y="0.0" width="320" height="245"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="WCc-Ec-YKn" id="DtD-vs-Xwy">
<!-- and here we do the same -->
<rect key="frame" x="0.0" y="0.0" width="320" height="244"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" text="autorsizing" borderStyle="roundedRect" minimumFontSize="17" id="NCA-qk-Isa">
<!-- set any size that is smaller than parent frame. You will be able to change it with Xcode later -->
<rect key="frame" x="60" y="108" width="200" height="30"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" red="0.89019607840000003" green="0.89019607840000003" blue="0.89019607840000003" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<textInputTraits key="textInputTraits"/>
</textField>
</subviews>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
<connections>
<outlet property="dataSource" destination="1kU-E8-zzp" id="pca-5d-SRg"/>
<outlet property="delegate" destination="1kU-E8-zzp" id="WxC-Qa-ToS"/>
</connections>
</tableView>
Luego cierre Xcode, guarde el guión gráfico de su editor y vuelva a abrir Xcode. Voila! El campo de texto dejó su manera loca y ahora se comporta como se espera.
Tuve el mismo problema recientemente. Agregué una etiqueta en la vista de contenido de mi UITableViewCell y cada vez que está oculta (x >> 320). Me di cuenta de que el problema estaba en el CÓDIGO FUENTE XML.
El XML fue:
<tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="InvoiceCell" rowHeight="60" id="B9T-xx-TCx" customClass="InvoiceCell">
// My custom cell is 60 height
<rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
// Wrong Autoresizing
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="B9T-xx-TCx" id="nvL-MG-mGs">
//No rect frame and wrong autoresizing mask
<autoresizingMask key="autoresizingMask"/>
Para resolver mi problema es simplemente cambiar "tableViewCell" y "tableViewCellContentView" a:
<tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="InvoiceCell" rowHeight="60" id="B9T-xx-TCx" customClass="InvoiceCell">
//Add/change this 2 lines in <tableViewCell>
<rect key="frame" x="0.0" y="0.0" width="320" height="60"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES"/>
y
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="B9T-xx-TCx" id="nvL-MG-mGs">
//Add/change this 2 lines in <tableViewCellContentView>
<rect key="frame" x="0.0" y="0.0" width="320" height="60"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES"/>
Por lo tanto, problema resuelto! Espero que esto les ayude chicos.