五分钟,运用cocoaui库,搭建主流iOS app中我的界面

简介: <span style="font-size:16px">         本项目基于天天团购项目 !</span> <p><span style="font-size:16px">  首先介绍一些cocoaui,是国内的一名程序员做的开源的开源系统,目的是为了简化ios布局!官网地址:www.cocoaui.com,github地址:https://github.com/ideawu/
         本项目基于天天团购项目 !

  首先介绍一些cocoaui,是国内的一名程序员做的开源的开源系统,目的是为了简化ios布局!官网地址:www.cocoaui.com,github地址:https://github.com/ideawu/cocoaui

  我们这里使用xml定义布局界面,其实就是传统的html + css定义界面,大部分人都有网页布局的经验,搞ios布局还是很容易入手并且快捷的!我们首先看下我们要做的界面:

  

   我们按照html+css的格式来定义这个界面:

   

<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="profileHeader" 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" >消费卷</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">我的评价</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标记和css属性!

  然后在ProfileViewController中引入profile.xml文件:代码如下:

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

点击头像需要进入修改玩家信息界面,需要监听头像的点击事件:

-(void)initEvent
{
    __weak typeof(self) me = self;
    IImage *profileHeader = (IImage *)[root getViewById:@"profileHeader"];
    [profileHeader addEvent:IEventClick handler:^(IEventType type,IView *view){
        [me gotoProfileEdit];
    }];
}
是不是很简单就能定义一个界面!

  补充

  1:对SdWebImage的支持,IImage(UIImageView的再次封装)中暴露了UIIMageView的接口,可以方便的使用sdWebImage,开始是不支持的,和作者沟通了一下,暴露了这个接口!

  2:对上拉刷新和下拉加载的支持。有例子为证:http://www.cocoaui.com/docs/api/IRefreshControl

  3: 对于webview的支持!控件中没有对于webview的支持,如果页面中需要嵌入webview则需要动态创建!

  4:对于radio和checkbox的支持,目前还不支持,需要动态创建,不过非常easy!

  5: 由于很多app 都需要微信端,xml文件布局可以直接移植到移动端下面!


相关文章
|
8月前
|
供应链 前端开发 JavaScript
Java开源进销存系统源码,支持手机APP扫码进出库
管店云主要应用于零售门店、商贸批发、生产工厂等行业领域,并可定制开发以满足各行各业的特定需求。管店云包括电脑端和手机APP端,APP支持扫码进出库,操作非常方便。
151 0
Java开源进销存系统源码,支持手机APP扫码进出库
|
29天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
26 2
|
4月前
|
XML Java 语音技术
Android App开发在线语音识别处理中实现中文转拼音(Pinyin4j库)功能(超详细 附源码和演示)
Android App开发在线语音识别处理中实现中文转拼音(Pinyin4j库)功能(超详细 附源码和演示)
61 0
|
大数据 数据挖掘 BI
几款主流的App统计工具解析:友盟、Talking Data、openinstall
本文简要分析友盟、Talking Data、openinstall的优劣势以及特点,希望能给入门人员一点帮助
4768 0
|
10月前
|
Java Shell Android开发
支付宝二维码脱机认证库在android的app下测试过程记录
支付宝二维码脱机认证库在android的app下测试过程记录
|
缓存 负载均衡 网络协议
短视频app制作,主流负载均衡方案的分析
短视频app制作,主流负载均衡方案的分析
|
存储 Oracle 关系型数据库
数据火器库 - 八卦系列之瑞士军刀: 随APP携带的SQLite
来源:云数据库技术,数据库打工仔喃喃自语的八卦历史,1. 为导弹巡洋舰设计,用在手机上的数据库,2. Small and Simple, and Better,3. 如何看出是自己的娃:产品定位,特点和边界
170 0
数据火器库 - 八卦系列之瑞士军刀: 随APP携带的SQLite
|
Kotlin 容器
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
312 0
Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
|
消息中间件 机器学习/深度学习 监控
02.Android崩溃Crash库之App崩溃分析
02.Android崩溃Crash库之App崩溃分析
949 0
|
前端开发
浅析三大主流的APP开发方式
我们都知道目前的几大主流的移动应用开发方式:Native App,Web App,Hybrid App。那他们之间的联系和优缺点各是什么呢? 1.Native App:本地应用程序(原生App) Native开发也即原生开发,如果你是做Android 开发,那么大部分都是用Java 语言来编写的,如果你是做IOS开发,则是使用Objecttive C 或者Swift来进行编写的,这些都是官方的标准,好处显而易见,利用官方提供的API ,开发的APP有更好的性能,可以实现各种酷炫的效果,有更好的兼容性,对用户来说体验更好。
2076 0

热门文章

最新文章