五分鐘，運(yùn)用cocoaui庫(kù)，搭建主流iOSapp中我的界面

2019-11-14 18:18:42

字體：大中小

供稿：網(wǎng)友

　　本項(xiàng)目基于天天團(tuán)購(gòu)項(xiàng)目，在上一篇中有說(shuō)到！

　　首先介紹一些cocoaui，是國(guó)內(nèi)的一名程序員做的開(kāi)源的開(kāi)源系統(tǒng)，目的是為了簡(jiǎn)化ios布局！官網(wǎng)地址：www.cocoaui.com，github地址：https://github.com/ideawu/cocoaui

　　我們這里使用xml定義布局界面，其實(shí)就是傳統(tǒng)的html + CSS定義界面，大部分人都有網(wǎng)頁(yè)布局的經(jīng)驗(yàn)，搞ios布局還是很容易入手并且快捷的！我們首先看下我們要做的界面：

　　我們按照html+css的格式來(lái)定義這個(gè)界面：　　

<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">        <img id=" style="width:80px;height:80px;float:center;margin:10px;" src="default_head.png" />    </div>        <div id="myWashCar" class="subdivStyle" style="width:50%;height:80px;">        <img style="margin:10px;width:50px;height:50px;valign:middle;" src="ic_mt_coupon" />        <span type="text" class="textStyle" >消費(fèi)卷</span>    </div>    <div id="myCoupon" class="subdivStyle" style="width:100%;height:80px;">        <img style="margin:10px;width:50px;height:50px;valign:middle" src="ic_user_main_favorite.png" />        <span class="textStyle" style="vertical-align:middle;" >我的收藏</span>    </div>        <div id="myCar" class="divStyle">        <img style="margin:10px" src="myfollow.png" />        <span type="text" class="textStyle">我的訂單</span>        <img style="float:right;margin:10px;" src="ic_arrow.png" />    </div>            <div id="myMsg" class="divStyle">        <img style="margin:10px" src="mylike.png" />        <span class="textStyle">我的評(píng)價(jià)</span>        <img style="float:right;margin:10px;" src="ic_arrow.png" />    </div>    <div id="myVersion" class="divStyle">        <img style="margin:10px" src="moreitems_version.png" />        <span type="text" class="textStyle">版本更新</span>        <img style="float:right;margin:10px;" src="ic_arrow.png" />    </div>        </div>

　　將其命名為profile.xml文件放到工程中。格式是不是和普通的html+css界面一模樣！支持大部分的html標(biāo)記和css屬性！

　　然后在ProfileViewController中引入profile.xml文件：代碼如下：

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

　　點(diǎn)擊頭像需要進(jìn)入修改玩家信息界面，需要監(jiān)聽(tīng)頭像的點(diǎn)擊事件:

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

　　　是不是很簡(jiǎn)單就能定義一個(gè)界面！

　　補(bǔ)充

　　1：對(duì)SdWebImage的支持，IImage(UIImageView的再次封裝)中暴露了UIIMageView的接口，可以方便的使用sdWebImage，開(kāi)始是不支持的，和作者溝通了一下，暴露了這個(gè)接口！

　　2：對(duì)上拉刷新和下拉加載的支持。有例子為證：http://www.cocoaui.com/docs/api/IRefreshControl

　　3: 對(duì)于webview的支持！控件中沒(méi)有對(duì)于webview的支持，如果頁(yè)面中需要嵌入webview則需要?jiǎng)討B(tài)創(chuàng)建！

　　4：對(duì)于radio和checkbox的支持，目前還不支持，需要?jiǎng)討B(tài)創(chuàng)建，不過(guò)非常easy!

　　5: 由于很多app 都需要微信端，xml文件布局可以直接移植到移動(dòng)端下面！