Screenshot in iPhone

darshit solanki

Jan 06, 2021 | 6 min read

Introduction

A Screenshot, also known as Screen capture or Screen grab, is a digital image that shows the contents of a computer display. A common screenshot is created by the operating system or software running on the device. A screenshot or screen capture may also be created by taking a photo of the screen.

How to take a Screenshot in iPhone device?

A screenshot can be taken on iPhone by simultaneously pressing the Home button and the Lock button, however on the newer iPhones X, XR, XS and 11, it is achieved by pressing the Volume up and Lock button. The screen will flash and the picture will be stored in PNG format in the "Camera Roll" if the device has a camera, or in "Saved Photos" if the device does not. From the iOS 11 update a little preview will pop up in the bottom left corner, which can be swiped left to save or clicked to open up an editor where the screenshot can be cropped or doodled on before being saved or shared. The screenshot feature is available with iOS 2.0 and later.

What are the Different uses of Screenshots in iOS Apps Development?

Screenshots can be extremely helpful when we need to demonstrate something that would otherwise be difficult to explain in words. After all, a picture is worth a thousand words!

1. Collaborate with Others

When our team mates wants our input on new app or they need us to look over a screen they're creating, instead of writing a lengthy email with edits, we can take a screenshot and send it to them with marked changes.

Marking up design concepts onscreen is faster and more effective than a wordy email.

Different uses of screenshots

2. Demonstrate How to Perform a Function

We Don’t just need to tell but also show, demonstrate exactly what we’re talking about with a screenshot. By using a screenshot which shows exactly what we mean, there’s less chance that they’ll be misunderstood. And that means less confusion, less time explaining, and more time back in our day.

For example, explain to a new employee how to login. Instead of telling them, we can quickly send them a screenshot that they can reference again and again without having to repeatedly ask you.

A screenshot with numbered steps is quick to make and easy to understand.

3. Show Exactly What’s Happening

Whenever we report a bug, we’ve likely been asked to provide a screenshot. That’s because not everyone’s device is the same. Depending on our screen, the processor that our device have, the way something appears for us could be completely different for them.

The best part about screenshots? They’re easy! As Buffer notes, screenshots are powerful yet simple to use. In fact, it only takes a second to make a screenshot.

A screenshot of an error message helps avoid confusion by showing them exactly what we’re seeing.

4. Show Users How App is Look a Like Through App Screenshots

When publishing an app in the Apple App Store, we need to provide app screenshots. The screenshots are shown in your App Store listing and play a huge role in driving more downloads.

Many mobile users will use our app screenshots to form a first impression and decide whether or not they want to download our app.

Every screenshot that we provide needs to have a purpose and ultimately boast the best features of our app.

A well-designed set of iOS app screenshots are:

  • appealing and eye-catching
  • clean and easy to read
  • straight to the point
  • on-brand

Apple actually gives us 10 slots for screenshots. We should use all 10 slots. Every additional screenshots is an added opportunity to advertise why people should download our app.

How to Create a Screenshot of Any View Inside our iPhone App?

Initially we have following screen.

view with button for taking screenshot

What we want is to snapshot the direction, transform it into an UIImage, then save the image in the photo gallery.

To start responding to button taps let’s add the IBAction  of the button. So we have the following initial structure inside our ViewController for button:

import UIKit

class ViewController: UIViewController {

    // MARK:- IBOutlet of take a screenshot button
    @IBOutlet weak var takeAScreenShotButton: UIButton! {
	didSet {
    		
            guard let button = self.takeAScreenShotButton else { return }
            button.backgroundColor = .blue
            button.setTitle("Take a Screenshot", for: .normal)
            button.setTitleColor(.white, for: .normal)
            button.layer.cornerRadius = button.frame.height / 2
        }
    }
    
    // MARK:- IBAction of take a screenshot button
    @IBAction func takeAScreenShot(_ sender: UIButton) {
		
        UIView.animate(withDuration: 0.2, animations: {
            self.takeAScreenShotButton.isHidden = true
        }) { _ in
            self.takeAScreenShotButton.isHidden = false
        }
        
		//Take a screenshot here

	}
}

Now let’s add the actual screenshot-taking logic under buttons IBAction

	// MARK:- IBAction of take a screenshot button
	@IBAction func takeAScreenShot(_ sender: UIButton) {
            UIView.animate(withDuration: 0.2, animations: {
                self.takeAScreenShotButton.isHidden = true
            }) { _ in
                self.takeAScreenShotButton.isHidden = false
            }
            takeScreenshot(of: self.view)
        }
        
        func takeScreenshot(of view: UIView) {
        	UIGraphicsBeginImageContextWithOptions(
            	CGSize(
                	width: view.bounds.width, 
                    height: view.bounds.height
                    ),
            	false,
	            2
    	    )

            view.layer.render(in: UIGraphicsGetCurrentContext()!)
            let screenshot = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()

            //MARK:- to save screenshot in photo album
            UIImageWriteToSavedPhotosAlbum (
            	screenshot, 
            	self, 
                #selector(imageWasSaved), 
                nil
            )
    	}
        
        //Mark:- to perform a certain action on photo write
        @objc func imageWasSaved (
        	_ image: UIImage, 
            error: Error?, 
            context: UnsafeMutableRawPointer
         ) {
                if let error = error {
                    print(error.localizedDescription)
                    return
                }

                print("Image was saved in the photo gallery")
                
                // MARK:- to open photo gallery for preview screenshot
                UIApplication.shared.open(
                	URL(string:"photos-redirect://")!
                )
          }

As we can see, inside the takeScreenshot(of:) method we perform the following:

  • Begin creating image context based on the size of a view parameter.
  • Render the layer of view into that context.
  • Get the actual image from the context.
  • End image context.
  • Write the resulting image to saved photos album.

The UIImageWriteToSavedPhotosAlbum operation requires permission to access the photo library, so we have to add the following to the Info.plist

Info.plist

If we have any errors during the process, we simply print them. Otherwise, we open the Photos app to see our brand new screenshot.

As a result, we have the following workflow:

workflow of taking screenshot in app

As we can see we took a screenshot of direction and saved that screenshot in albums where button is not visible.

How Screenshot can Expose Sensitive Information?

Here are some cases where screenshot can expose sensitive information.

1. Login information can be recorded

Any app that requires a login to get access to sensitive information. We need to make sure that only the intended person can log in. If screen recording or screen capture is allowed on the login it can expose confidential information.

2. Payment Information

Any retail or banking app deals with payment/transactions. From a security point of view, we need to be watchful of any information being captured from the app to protect the user's account. If we aren't careful it will lead to a major leak in from application and secured transaction details will be compromised.

3. Private Conversation

People now days takes screenshot of the private conversations and passes them to others without his/her consent. It is the major case of exposing sensitive information using screenshot.

Is There Any Way to Detect Screenshot is Taken or Prevent Taking Screenshot?

There's no way to prevent taking screenshots entirely. We can do what Snapchat does, which is by requiring the user to be touching the screen to view whatever information we are displaying. This is because the system screenshot event interrupts touches. It's not a perfect method and we can't prevent users from taking screenshots 100% of the time.

How to Detect Screenshot is Taken?

We can't prevent the screenshot but we can track if anyone is taking screenshots and how prevalent the issue is within our app. If our app uses a login mechanism we can identify the user and restrict app access or provide a notice (if desired) to the user.

The key is to watch for the .UIApplicationUserDidTakeScreenshot message to be posted, which will happen whenever a screenshot happens. For example, this runs a screenshotTaken() method.

NotificationCenter.default.addObserver(
    self,
    selector: #selector(screenshotTaken),
    name: UIApplication.userDidTakeScreenshotNotification,
    object: nil
)

And we can add our logic inside screenshotTaken() method, or we can do the following.

NotificationCenter.default.addObserver(
    forName: UIApplication.userDidTakeScreenshotNotification, 
    object: nil, 
    queue: OperationQueue.main
) { notification in
    	//MARK:- Here we will enter logic of our need
    	print("Screenshot taken!")
}

And we can perform action based on our need.

Conclusion

Taking, saving, and sharing screenshots can be extremely helpful.

Not only do they help us prove our case, they also help us archive the past. For example,  a juicy gossip article we don’t want to risk forgetting.

For more information about the aforementioned UIGraphics operations, see the official Apple documentation:

UIGraphicsBeginImageContextWithOptions(::_:)

UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()

Thanks for reading!