• 2015-01-14

    Create native iOS login and register form UI with XML + CSS

    Views: 20851 | 5 Comments

    Have you ever dreamed of creating iOS App’s UI with clean and human nature HTML/XML? Now CocoaUI provides you an easy way to do this, the UI develop of an App is not a big deal any more!

    I will show you how to create a register form UI with XML, it is native, not webview based, nor hybrid.

    cocoaui-register-ui

    Let’s first see how a register form look like on iPhone 5(simulator):

    It is a normal register form, with:

    • A logo of your company or product, on top of the form, center-aligned.
    • Then a text input for user to input user name to register, there is a small icon on the left, also, there is a bottom line below the icon and the text input.
    • Much the same as user name input.
    • A line of text, which contains two links(buttons) to show Terms of Service and Privacy Policy.
    • Last, at the bottom there is a button which is 100% width stretched to fill the screen horizontally, with blue background.

    As described above, with CocoaUI‘s powerful HTML/XML UI descriptive language, you are able to simply translate human readable sentences into CocoaUI’s UI codes.

    The logo

    <img id="logo" src="logo.png"
        style="float: center; clear: both; width: 64; height: 64; margin: 10 0;" />
    

    The logo image is floating horizontally centered, and clear any possible controls on its both sides(left and right), it has 10pt blank spaces above and below it, and no addition blank spaces on its left and right(float: center has already give it blank spaces as well), which is defined by margin.

    The Username and Password inputs

    <div style="margin: 15 0; border-bottom: 1 solid #eee;">
        <img src="name.png" style="width: 18; height: 24; margin: 8 8 0 0;" />
        <input type="text" placeholder="Username" style="width: 100%; height: 40;" />
    </div>
    

    The div is the wrapper box of the small icon and the text input. There is 15pt blank spaces above and below the wrapper box, and the box has a bottom line.

    Then the small icon given by image file name.png. The text input will layout to the right side of the icon, and fill the whole space(by 100% width).

    The password input is almost the same, but with password input type, not text.

    The Submit button

    <button id="submit"
        style="clear: both; width: 100%; height: 40; font-size: large; margin: 15 0 0 0; color: #fff; background: #6cf; border-radius: 5;">
        Register
    </button>
    

    The Submit button fills the screen horizontally(by 100% width), before it stretch to 100% width, it clear(avoid) any possible controls on its left, and not allow any controls to layout on its right. The text color is white(#fff), and the background color is blue(#6cf). And border-radius makes it rounded ranctangle shape.

    Is it EXCITING? Get rid of long nonsense iOS contraint based layout codes now!

    Posted by ideawu at 2015-01-14 14:18:33 Tags: , , ,
|<<<1>>>| 1/1 Pages, 1 Results.