The latest articles on DEV Community by Swift Proof of Work (@swiftpow). https://dev.to/swiftpow https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F9864%2F0eb1e48f-7cae-46b6-91ec-774f63dfac03.jpeg https://dev.to/swiftpow en Luiz Gabriel Sat, 06 Jan 2024 12:47:40 +0000 https://dev.to/swiftpow/content-mode-ios-swift-39n8 https://dev.to/swiftpow/content-mode-ios-swift-39n8 <p>In this article we will talk about the ways in which elements can be worked with within a view, the value of this property by default comes as .scaleToFill.</p> <p>We use this property when we want to implement resizable controls. For example, instead of having to redraw every time, we use content mode so that the element adapts as necessary.</p> <h2> .scaleToFill </h2> <ul> <li>Fills the entire view, so it can lose proportion <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3wg380f9rkmyy7sraadw.png" alt="Image description" width="588" height="1072"> </li> </ul> <h2> .scaleAspectFit </h2> <ul> <li>Adjusts the content to fit the view while maintaining the aspect ratio, any remaining area is transparent <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frlplq00ftyrovwsdfmj6.png" alt="Image description" width="588" height="1072"> </li> </ul> <h2> .scaleAspectFill </h2> <ul> <li>It fills the view while maintaining the proportion, but the element may go beyond the limits of the view.</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzw54f6h7avtdjapfda46.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzw54f6h7avtdjapfda46.png" alt="Image description" width="588" height="1072"></a></p> <h2> .center </h2> <ul> <li>Centers the content and maintains the same proportions</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz6v0vcqu7o1kybvs6eln.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz6v0vcqu7o1kybvs6eln.png" alt="Image description" width="588" height="1072"></a></p> <h2> .top </h2> <ul> <li>Aligns and centers the content at the top of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7xpoovbhd4hj12tm1y3.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7xpoovbhd4hj12tm1y3.png" alt="Image description" width="588" height="1072"></a></p> <h2> .bottom </h2> <ul> <li>Aligns and centers the content at the bottom of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzfctcd70qo9v0qj5gf1.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzfctcd70qo9v0qj5gf1.png" alt="Image description" width="588" height="1072"></a></p> <h2> .left </h2> <ul> <li>Aligns and centers the content on the left side of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F40quoot2qzjc4027lhwa.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F40quoot2qzjc4027lhwa.png" alt="Image description" width="588" height="1072"></a></p> <h2> .right </h2> <ul> <li>Aligns and centers the content on the right side of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0ys1iyf3nepmkbkxcmd.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0ys1iyf3nepmkbkxcmd.png" alt="Image description" width="588" height="1072"></a></p> <h2> .topLeft </h2> <ul> <li>Aligns content to the left at the top of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj1hsq6nkh2iqxktwjndn.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj1hsq6nkh2iqxktwjndn.png" alt="Image description" width="588" height="1072"></a></p> <h2> .topRight </h2> <ul> <li>Aligns content to the right at the top of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtavj6xbjfgpkt3xepzv.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtavj6xbjfgpkt3xepzv.png" alt="Image description" width="588" height="1072"></a></p> <h2> .bottomLeft </h2> <ul> <li>Aligns content to the left at the bottom of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71dt6wl8u5clm8m3tn7z.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F71dt6wl8u5clm8m3tn7z.png" alt="Image description" width="588" height="1072"></a></p> <h2> .bottomRight </h2> <ul> <li>Aligns content to the right at the bottom of the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpn0fgojrwj1tb0wet9s.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpn0fgojrwj1tb0wet9s.png" alt="Image description" width="588" height="1072"></a></p> <h2> .redraw </h2> <ul> <li>Indicates that the view needs to be redrawn every time the size is changed, we use this when the content of the view depends on the view</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjp28twuuvbe4tek5twdw.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjp28twuuvbe4tek5twdw.png" alt="Image description" width="588" height="1072"></a></p> <p>Thanks for read this article!</p> ios swift beginners braziliandevs