Search This Blog

Sunday, March 5, 2017

UIImageView Content Modes

For new people in ios development slightly unclear how work content mode for UIImage View. What is the difference between scale modes for UIImageView?
There are three main scales modes
  • scale to fill (FILL image in UIIMageView frame - image will be changed)
  • scale aspect fit (scale image to FULLY FIT in UIIMageView frame - image will be the same but may change size)
  • scale aspect fill (scale image until smallest side fits UIImageView frame - some part of image may be clipped)
I wrote a demo program to show how this modes work.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var switcher: UISwitch!
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBOutlet weak var segmentedControl: UISegmentedControl!
    
    @IBAction func segmentSelected(_ sender: Any) {
        let index = self.segmentedControl.selectedSegmentIndex
        switch index {
        case 0:
            self.imageView.contentMode = .scaleToFill
            break
        case 1:
            self.imageView.contentMode = .scaleAspectFit
            break
        case 2:
            self.imageView.contentMode = .scaleAspectFill
            break
        default:
            self.imageView.contentMode = .scaleAspectFit
            break
        }
    }
    
    @IBAction func switcherChanged(_ sender: Any) {
        self.imageView.clipsToBounds = self.switcher.isOn
    }
    
}

Original Image




Scale To Fill



Scale Aspect Fit




Scale Aspect Fill (NO Clip To Bounds)



Scale Aspect Fill (Clip To Bounds)






6 comments:

  1. Thank you so much for sharing your articles with us. Hopefully, you will be able to benefit us with more informative article.
    -Custom Website Design

    ReplyDelete
  2. You've written a fascinating piece of writing. This is exactly the kind of information I was looking for. Please provide me with more relevant information so that I can learn more. Best Custom Websites

    ReplyDelete
  3. Nice content, appreciable. It is such a kind of reading material that I was looking for to read.
    Uniqueness is the key to this content. Keep on providing me with such a great article.
    Create Custom Website

    ReplyDelete
  4. Thank you very much for drawing my notice to this. Your blog is jam-packed with useful facts. Until I read that, I would have no idea. I'll come back for more fantastic material.
    Best wishes, and good luck.
    Web Design USA

    ReplyDelete
  5. Good content. I was looking for this type of content. Saved my time for further search.
    You should always provide that type of content. I appreciate your determination to give the students a good title.Custom Designed Websites

    ReplyDelete
  6. Amazing write-up! The blog was very informative. Keep it up!
    Custom Web Developer

    ReplyDelete