Five minutes, I used the cocoaui library to build my interface in mainstream iOS apps, cocoauiios

Five minutes, I used the cocoaui library to build my interface in mainstream iOS apps, cocoauiios

This project is based on the daily group purchase project, which was mentioned in the previous article!

First, we will introduce some cocoaui, which is an open-source system developed by a programmer in China to simplify the ios layout! Official website address: www.cocoaui.com, github address: https://github.com/ideawu/cocoaui

Here we use xml to define the layout interface, which is actually the traditional html + css definition interface. Most people have experience in Webpage layout, so it is easy and quick to get started with ios layout! First, let's take a look at the interface we want to do:

　　

We define this interface in html + css format:

<Div> <style>. headDiv {width: 100% ;}. divStyle {width: 100%; height: auto; border-bottom: 1 solid # eee; background: # fff; vertical-align: middle ;}. subdivStyle {height: auto; border: 1 solid # eee; height: 40px; background: # fff ;}. textStyle {float: left; height: 40px; valign: middle ;}. btnStyle {background: # EDA67B; width: 80%; height: 50px; float: center ;} </style> <div id = "headContent" class = "headDiv">  </div> <div id =" mydeskcar "class =" subdivStyle "style =" width: 50%; height: 80px; ">  <span type =" text "class =" textStyle "> consumption volume </span> </div> <div id =" myCoupon "class = "subdivStyle" style = "width: 100%; height: 80px; ">  <span class =" textStyle "style =" vertical-align: middle; "> my favorites </span> </div> <div id =" myCar "class =" divStyle ">  <span type =" text "class =" textStyle "> my orders </span>  </div> <div id =" myMsg "class =" divStyle ">  <span class =" textStyle "> my comments </span>  </div> <div id =" myVersion "class =" divStyle ">  <span type =" text "class =" textStyle "> Version update </span>  </div>

Put the file named profile. xml in the project. Does the format look like a common html + css interface! Supports most html tags and css attributes!

Then introduce the profile. xml file in ProfileViewController: the code is as follows:

- (void)viewDidLoad{    [super viewDidLoad];        [self initSystemBtn];            root = [IView namedView:@"profile.xml"];    [self addIViewRow:root];    [self reload];            [self initEvent];}

To click the Avatar, you need to go to the player Information Modification page. You need to monitor the click events of the Avatar:

-(void)initEvent{    __weak typeof(self) me = self;    IImage *profileHeader = (IImage *)[root getViewById:@"profileHeader"];    [profileHeader addEvent:IEventClick handler:^(IEventType type,IView *view){        [me gotoProfileEdit];    }];}

Is it easy to define an interface!

Supplement

1: Support for SdWebImage. The UIImageView interface is exposed in the IImage (re-encapsulation of UIIMageView) to facilitate the use of sdWebImage. It is not supported at the beginning. I communicated with the author, this interface is exposed!

2: supports pull-on refresh and pull-down loading. Example: http://www.cocoaui.com/docs/api/IRefreshControl

3: Support for webview! The control does not support webview. If webview needs to be embedded in the page, it needs to be dynamically created!

4: The support for radio and checkbox is not yet supported. dynamic creation is required, but it is very easy!

5: because many apps require terminals, xml file layout can be directly transplanted to mobile terminals!