Show No Internet Connection Message Like Instagram

Question

I was wondering how can i show a 'No Internet Connection' Just how like Instagram does it,

As an Example :

That see-through custom message animating to show under the navigationController . Would really love to get this to my project , thank you for you help

Check https://stackoverflow.com/questions/13735611/check-for-internet-connection-using-the-ios-sdk — adev, Jul 03 '17 at 01:13
Are you asking about how to check the connection or how to create this view? — henrique, Jul 03 '17 at 01:18
i guess how to create this view and present it when there is no connection @valcanaia — RandomGeek, Jul 03 '17 at 01:40
I think it pops down from nav bar and then hides up back.. If this is what I am thinking, I'll post an answer soon — Dark Innocence, Jul 03 '17 at 06:33
I think I can design one, will post in one or two days for sure, I cannot guarantee that it will be EXACTLY same but yeah you'll get the core idea... stay tuned.. — Dark Innocence, Jul 05 '17 at 17:57
Okay, I'm gonna post my answer. It was really easy and you can experiment around with it — Dark Innocence, Jul 09 '17 at 09:35

score 8 · Answer 1 · answered Jul 09 '17 at 09:54

So here's a pic of the storyboard like this :-

"No internet connection" is a label, and the red view underneath is just to test the see through property of the label. If you are designing the UI in code, you can probably make a label similar to mine and place it to the top of the Navigation bar by using it's frame property.

The button here I'm using is just to show the label pop up on the scene (since it's just a demo answer). In your case, if the internet is not available, you will proceed to show the pop up.

So if you are making the UI in code, make sure to make the label in the viewDidLoad method. I have made an IBOutlet and the viewDidLoad now looks like this:-

override func viewDidLoad() {
        super.viewDidLoad()

        let transform = CGAffineTransform(translationX: 0, y: -label.frame.height)
        label.alpha = 0
        label.transform = transform
    }

On the view loading, I'm moving the label behind the navigation bar, using CGAffineTransform. The distance, how much to move up is the label's height, since we don't want any part to be clipped on the scene.

Next step, is just a fix. I'm making alpha = 0, because navBar is translucent is nature and hence will change it's colour, since our label is behind it. So setting alpha to 0, takes care of it, and in third step apply the transform.

Now, if the internet connection is not available, we should pop out the label under the navBar. The code will look something like this:-

fun checkInternet() {
// called by some of your observer, which checks for changes in internet connection

    if !isInternetAvailable {

       UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveLinear, animations: {

        self.label.alpha = 0.5
        self.label.transform = .identity
    }, completion: nil)
     }
}

So here, I'll show the pop up with an animation using UIView.animate with some spring damping, so it has a nice bouncy effect to it. I'm setting the alpha to 0.5, since you mentioned you want a see through label, and I'm setting the label to a transform which will bring it back to it's original position when it was created, that's why I'm using .identity. You can play around usingSpringWithDamping values and change options to have different effects.

Show No Internet Connection Message Like Instagram

As an Example :

1 Answers1