TweetBot is sexy, no one can deny it. One of the coolest aspect of TweetBot is the unobtrusive panels that show what is happening on the app. Some apps like Reeder have resorted to HUDs. The problem with HUDs are that, they are shown on a different “z-index” and human eye has to shift the focus to read what’s on it. For the same reason, HUDs feel a bit disconnected from the UI which could be why on both iOS and Mac, Apple uses HUDs to show global system level notifications.

Apple uses HUD for miscellaneous disconnected information


For example, as in the screenshot above, like volume increased or mouse disconnected. Apple uses a HUD for “disconnected” errors/alerts but unfortunately, most apps have been using them for showing a modal progress or other miscellaneous information. A cleaner way would be to use a sliding alert panel like TweetBot. To make life easier for developers, I have made a class, MKInfoPanel which does exactly that.

How to use

Using MKInfoPanel is as easy as using an UIAlertView, or in fact even easier. You just make one single call and the panel shows and hides itself.

    [MKInfoPanel showPanelInView:self.view
                            type:MKInfoPanelTypeError
                           title:@"Network Failure!"
                        subtitle:@"Check your internet connection and try again later!"
                       hideAfter:2];

To use this in your own apps, open the project on XCode, drag the MKInfoPanel group into your project. Link your project against QuartzCore.Framework if you haven’t already. You are good to go!

Demo


Here is a quick 20 sec demo of the panel in action.

Source code

The source code is available, royalty free, on github. However, a tweet wouldn’t cost you either. :P


Mugunth

Follow me on Twitter

  • http://critz.org Critter

    Nice one mate. Can’t wait to give this a go. Cheers

  • Pingback: MKInfoPanel at Under The Bridge

  • Baalbers

    Really like this but i have noticed some bugs when showPanelInView is called on a view with a NavigationBar. Any hints how to change that?

  • Pingback: Exibir alertas como no app TweetBot « Base de Conhecimento

  • Pete B

    Could you add a method to rotate it to landscape – manually and without “shouldautoRotateTo…”

    Because I’m using cocos2d -> OpenGLView and if I add it to the openGlView it will be always potrait….

    Thank you very much! Great class!

  • Anonymous

    it could be cool if you insert an additional “yellow” alert! for the rest i love it! ;)
    i am going to make this editing by myself…. ;)

  • Pingback: oF関連リンク〜気になった〜 | oF / iOS Thinking.

  • Pingback: TweetBot風のアラート表示、MKInfoPanelが便利! « ssdkfk

  • steve tan

    Nice work! 

  • J Weinert

    MKInfoPanel looks great!
    But please could you make it ARC conform?

    I edited the class that it returns no failure anymore.
    But now I receive memory warning when I try to open one.

  • Yuchen

    I downloaded it from github. But when I tried the demo program, I got an error: 
    error: MugunthKumar-MKInfoPanelDemo-1661c3b/MKInfoBundle/Blue.png: No such file or directory When I took a look, none of the images is included. Do you know where can I find those images? Thank you very much!

  • Pingback: Dropdown Alerts

  • 8tan

    The images used in the MKInfoPanel are missing, they are not in the git repository

  • rodnoy

    really like what you do. Thank you