ios - Show No Internet Connection Message Like Instagram -

i wondering how can show 'no internet connection' how instagram it,

as example :

that see-through custom message animating show under navigationcontroller . love project , thank you help

so here's pic of storyboard :-

"no internet connection" label, , red view underneath test see through property of label. if designing ui in code, can make label similar mine , place top of navigation bar using it's frame property.

the button here i'm using show label pop on scene (since it's demo answer). in case, if internet not available, proceed show pop up.

so if making ui in code, make sure make label in viewdidload method. have made iboutlet , viewdidload looks this:-

override func viewdidload() {         super.viewdidload()          let transform = cgaffinetransform(translationx: 0, y: -label.frame.height)         label.alpha = 0         label.transform = transform     } 

on view loading, i'm moving label behind navigation bar, using cgaffinetransform. distance, how move label's height, since don't want part clipped on scene.

next step, fix. i'm making alpha = 0, because navbar translucent nature , hence change it's colour, since our label behind it. setting alpha 0, takes care of it, , in third step apply transform.

now, if internet connection not available, should pop out label under navbar. code this:-

fun checkinternet() { // called of observer, checks 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 pop animation using uiview.animate spring damping, has nice bouncy effect it. i'm setting alpha 0.5, since mentioned want see through label, , i'm setting label transform bring it's original position when created, that's why i'm using .identity. can play around usingspringwithdamping values , change options have different effects.