• 2015-01-23

    ILabel – the self sized UILabel for iOS

    Views: 32 | No Comments

    One of the fundamental basis of CocoaUI is Auto Flow(Auto Layout), so self-sizing is supported by all CocoaUI controls including ILabel, IButton, IInput, IImage, and so on. In this article, I would like to introduce ILabel, the self sized UILabel for iOS.

    When using ILabel to display single-line text or multi-line text, you don’t have worry about the frame size of the text label, ILabel will calculate the width and height of the text, and resize the frame size automatically.

    This is the bad codes when using UIKit’s UILabel:

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 120, 30)];
    label.text = @"Text here...";
    [label sizeToFit];
    

    The sizeToFit sometimes don’t work as you would expect.

    This is the good codes when using CocoaUI’s ILabel:

    ILabel *label = [ILabel labelWithText:@"Text here..."];
    

    I am not missing any codes there, it is a single line of code! Whenever you change the text of the label, it will auto resize its’ frame size.

    Posted by ideawu at 2015-01-23 11:00:55 Tags: ,
  • 2015-01-17

    Using dynamic height image/content with UITableViewCell

    Views: 116 | No Comments

    The UITableViewCell itself is not dynamic height, it never knows its height, the UITableView containing it asks UITableViewDatasource for its height. If you want to support dynamic height cells, you have to force UITableView to ask for the height of a cell just after the cell’s height changed.

    So, for your iOS App to use UITableViewCell with dynamic height, you have to follow these two steps:

    1. Return a default height when UITableView first time ask for cell’s height.
    2. After the cell is layed out(UIView’s layoutSubviews method executed), tell the UITableView to reload the cell, so it will ask the cell’s height for the second time.

    This is not an easy task, because the cell has to concern about the modification of it’s subviews, no matter the subview is type of UILabel, UIImageView, UIButton, or other custom UIView. So the cell becomes too complicated and not reusable.

    It is a waste of time, it is doing the same thing over and over again, every programmer should never bear it! Things have to be changed! If Apple don’t change it, I will!

    With CocoaUI‘s powerful auto layout(flow layout) feature, you don’t have to worry about UI controls’ width and height it you choose not to. You want a label, OK, just add it into CocoaUI’s IView and set that label with a text, CocoaUI will calculate the width and heigth of the label, layout it on the proper position. If you want an image control with image loaded from network, sure, just add the image into IView, set the image src just like you do with Web, CocoaUI will load the image from network, determine the size of the image, layout it right.

    IView will update its width and height every time its sub controls are layouted and rendered, and then update the wrapping UITableViewCell. Which means you will see your iPhone App’s content auto grows.

    I will show some code.

    ITable *table = [[ITable alloc] init];
    [table addIView:[ILabel labelWithText:@"first line"]];
    [table addIView:[ILabel labelWithText:@"first line\nsecond line"]];
    

    After this code executed, you will see a table with two rows, the second row is two times the height of the first row, because the the second row contains two lines of text, and the first row contains only one line of text.

    A dynamic height table cell is as easy as above.

    CocoaUI is a powerful iOS UI framework. With CocoaUI, you get the power of:

    • Flow Layout(real Auto Layout) of UI controls.
    • App UI scrollable as Web page.
    • Define native iOS App’s appearance width XML and simple CSS properties.

    UI development is usually 30% ~ 50% of Objective-C program work, with CocoaUI, it is 1% ~ 5%, iOS developers are set free from stupid Apple-style UI coding, they can put more time to strenthen their Apps’ functionalities.

    Posted by ideawu at 2015-01-17 12:35:08 Tags: ,
  • 2015-01-15

    What is wrong with HTML+CSS+JavaScript UI for mobile?

    Views: 145 | No Comments

    I must say ALL web technology frameworks for mobile go in the wrong way! Every of these frameworks aims to be a web framework, which recreates native look and feel controls.

    CocoaUI framework goes in the right and bright way! CocoaUI is a native UI framework, builds native UI apps with web technologies.

    Why mobile web frameworks are doing wrong?

    Performace is a vital weakness!

    There is no doubt that web apps are much slower than native Apps, especially when they try to draw native look like UI.

    The goal of web browsers or webview widgets embed in native Apps, is to render a wide range of user interfaces, and to process user interactions. But most native Apps are made to do exactly one or two things. So native Apps are optimized, but web Apps are not, and not able to be efficiently optimized.

    A lot more work to do

    There are two major things mobile web frameworks have to do, one is the UI thing, the another is event handling.

    Mobile web frameworks wasted too much times on drawing native UI look like controls, when native UI changed, they do the same thing again. They draw native UI look like controls with HTML+CSS, again and again. They act like DongShiXiaoPin, an ancient Chinese idiom, which tells an ugly woman named DongShi clumzily copy every motion of a beatiful woman.

    The right way!

    The right way is not building a mobile web App framework, but building a native App framework using web technologies. This is what CocoaUI doing now.

    Posted by ideawu at 2015-01-15 15:45:25 Tags: ,
  • 2015-01-14

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

    Views: 258 | No 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: , , ,
  • 2015-01-10

    Build adaptive UI for iOS Apps with flow-layout and CSS properties

    Views: 201 | No Comments

    The project CocoaUI helps you build fluid User Interfaces for iOS Apps run in iOS devices with different screen sizes and resolutions.

    The code demo has shown in this post.

    It is time to get rid you Apple’s AutoLayout and LayoutContraints things, write your UIs with simple CSS properties like float, clear, width, height, and let CocoaUI do the magic for you!

    Posted by ideawu at 2015-01-10 23:32:24 Tags:
|<<<123456789>>>| 1/17 Pages, 85 Results.