• 2015-02-02

    Add Pull to Refresh feature to your iOS App

    Views: 7453 | No Comments

    With CocoaUI’s ITable view controller, you can easily add Pull to Refresh feature to your iOS App, you can add “Pull Down to Refresh” and “Pull Up to Load More” at the same time.

    if(!self.headerRefreshControl){
        IRefreshControl *header = [[IRefreshControl alloc] init];
        self.headerRefreshControl = header;
    }
    if(!self.footerRefreshControl){
        IRefreshControl *footer = [[IRefreshControl alloc] init];
        self.footerRefreshControl = footer;
    }
    

    That’s it, put this code in your view controller’s viewDidLoad method, then your App has the ability of “Pull to Refresh”.

    Continue reading »

    Posted by ideawu at 2015-02-02 14:41:19 Tags: ,
  • 2015-01-26

    Flow Layout UI for iOS Apps

    Views: 7221 | No Comments

    Flow Layout is the key of Web UI, it is a more human natural mechanism of laying out UI/GUI widgets in the screen. With Flow Layout, UI widgets like buttons, labels, text-inputs are placed one by one into an area(rectangle) of the screen, each widget occupy its own area, normally, widgets are not overlapped.

    Years ago, there is only Fixed Layout for iOS Apps development, Fixed Layout requres developers to determine the exact position(x, y) and size(width, height) of each widget, so it is so limited functionality, one of its most noticable weakness is that it can not properly deal with iPhone 4 and iPhone 5, because they have different screen resolutions.

    Later Apple introduced Auto Layout layout, which is yet another Relative Layout. Flow Layout and Auto Layout(Relative Layout) are both adaptive UI layout mechanisms, both work fine with multi screen resolutions.

    But the most significant between them is that:

    • Flow Layout focus on one widget at a time.
    • Auto Layout requires two or more widgets to work around.

    Apparently, dealing with one thing is simpler than dealing with many things. So, Flow Layout is superior to Auto Layout, not mention that Apple’s Auto Layout over complicated.

    Continue reading »

    Posted by ideawu at 2015-01-26 12:42:30 Tags: ,
  • 2015-01-26

    ITable demo – fixed header for UITableView datagrid

    Views: 6784 | No Comments

    The table has header row(like th in html) that anchors at the top.

    //
    //  ITableFixedHeaderDemo.h
    //  IKit
    //
    //  Created by ideawu on 15-1-22.
    //  Copyright (c) 2015年 ideawu. All rights reserved.
    //
    
    #import "IKit/IKit.h"
    
    @interface ITableFixedHeaderDemo : ITable
    
    @end
    
    //
    //  ITableFixedHeaderDemo.m
    //  IKit
    //
    //  Created by ideawu on 15-1-22.
    //  Copyright (c) 2015 ideawu. All rights reserved.
    //
    
    #import "ITableFixedHeaderDemo.h"
    
    @implementation ITableFixedHeaderDemo
    
    - (id)init{
        self = [super init];
        self.navigationItem.title = @"ITableFixedHeaderDemo";
        self.tableView.backgroundColor = [UIColor groupTableViewBackgroundColor];
    
        {
            ITableRow *headerRow = [[ITableRow alloc] initWithNumberOfColumns:3];
            [headerRow.style set:@"font-weight: bold; text-align: center; background: #6cf;"];
            [headerRow column:0 setText:@"Id"];
            [headerRow column:1 setText:@"Name"];
            [headerRow column:2 setText:@"Age"];
            self.tableHeader = headerRow;
        }
        
        for(int i=0; i<20; i++){
            ITableRow *row = [[ITableRow alloc] initWithNumberOfColumns:3];
            [row.style set:@"text-align: center; border-bottom: 1 solid #eee; background: #fff;"];
            [row column:0 setText:[NSString stringWithFormat:@"%d", i+1]];
            [row column:1 setText:[NSString stringWithFormat:@"name-%d", i+1]];
            [row column:2 setText:[NSString stringWithFormat:@"%d", rand()%50+1]];
            [self addIViewRow:row];
        }
        
        return self;
    }
    
    @end
    
    Posted by ideawu at 11:37:23 Tags: ,
  • 2015-01-23

    ILabel – the self sized UILabel for iOS

    Views: 4692 | 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: 5577 | 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 with XML and simple CSS properties.

    UI development is usually 30% ~ 50% of Objective-C programming 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: ,
|<<<12>>>| 1/2 Pages, 7 Results.