×

一、简介与环境搭建

CrossApp简介CrossApp摘要CrossApp坐标系浅谈CrossApp屏幕适配方案CrossApp源码结构CrossApp的MVC模式CrossApp项目结构及入口CrossApp内存管理CrossApp类结构图创建CrossApp工程CAVector、CAList、CADeque、CAMap(数据容器)Windows 开发下VS2013环境搭建Windows 开发下Android环境配置Mac OS 开发下Xcode环境搭建Mac OS 下iOS移植android环境配置

二、CrossApp简单控件的使用

DLayout(自适应布局)CALabel(显示文本)CAImage、CAImageView(显示一张图片)CAScale9ImageView(九宫格图片拉伸)CAButton(按钮)CATextView(多行输入框)CATextViewDelegateCASwitch(开关控件)CAProgress(进度条)CAAlertView(提示框)CAScrollView(滚动视图)CAScrollViewDelegateCAListView(列表)CAListViewDataSourceCAListViewDelegateCATableView(表单视图)CATableViewDataSourceCATableViewDelegateCATableViewCellCACollectionView(容器)CACollectionViewDataSourceCASlider(滑动条)CAStepper(步进控件)CAPageView(页面切换)CAPageViewDelegateCAWaterfallView(瀑布流控件)CAWaterfallViewDataSourceCAWaterfallViewDelegateCAWaterfallViewCellCATextField(输入框)CATextFieldDelegateCAAutoCollectionView(自动化布局容器)CAAutoCollectionViewDataSourceCAAutoCollectionViewDelegateCAVideoPlayerControlView(视频播放器控制视图)CAVideoPlayerControlViewDelegateCAWebView(Web视图控件)CAWebViewDelegateCAGifView(显示Gif图片)CARenderImage(图像渲染)CASegmentedControl(分段控制)CAPickerView(视图选择器)CAPickerViewDataSourceCAPickerViewDelegateCAActivityIndicatorView(活动指示器)CrossApp UIEdit(UI编辑器)

三、视图控制

CAViewController(视图控制器)CADrawerController(抽屉控制器)CANavigationController(导航控制器)CANavigationBarDelegateCANavigationBarItemCANavigationBarCATabBarController(标签栏控制器)CATabBarDelegateCATabBarItem

四、调用系统支持

CADevice

五、数据的解析与存储

CAUserDefault简单存储SQlite的使用json解析xml解析

六、网络

网络通信之httphttp请求网络图

七,动画

CAViewAnimation(动画实现)

八、宏定义

宏定义

九、其他控件的使用

CAViewCAViewDelegateCATextField(输入框1.2以前版本)CAObjectCAResponderCAPullToRefreshViewCAControlCAWindowCABarItemCABarButtonItemCASchedulerCAMediaDelegateCAKeypadDelegate

CrossApp坐标系浅谈


大家学习CrossApp的时候,搞清楚基础概念性的东西,能够大大提高我们学习CrossApp的效率。今天就和大家简单谈谈CrossApp的坐标系统。

基础坐标系

CrossApp采用的坐标系是屏幕坐标系,即左上角为原点,向右为X轴增长方向、向下对应Y轴增长方向。如图:

CrossApp坐标系
        

节点的概念

谈到CrossApp的坐标系,不得不谈到视图类CAView。我们来看看API中CAView的类说明 : 
视图类CAView是整个CrossApp引擎最基本的类,负责将各式各样的界面呈现出来,我们在App中所能看见的的一切界面其实就是一个个CAView的组合。CAView负责在屏幕上定义矩形区域,在展示用户界面及响应用户界面交互方面发挥关键作用。每个视图对象要负责渲染试图矩形区域中的内容,并响应该区域内发生的操作事件,视图是应用程序用户交互的重要机制。

除了显示内容和处理事件之外,试图还可以管理一个或多个子视图。我们可以在一个view上面添加多个子view,而作为父view,即父节点,负责管理其直接子视图,并根据需要调整他们的位置和尺寸,以及响应他们没有处理的事件。

根据类说明我们可以得出以下结论:

  1. 所有能看到的都是CAView的派生类。
  2. CAView上面可以添加子CAView。
  3. 父节点管理子视图


新手朋友可能不看明白父节点和子视图的概念 并且B是添加在A上的,假如这时候,我们调整A的坐标位置,那么B也将随A的坐标改变而改变。这样我们就说:B是A的子节点(也称子视图),A是B的父节点。 由于B是A的子节点(子视图),那么B则可以使用A的节点坐标系        
,我画图来说明:

CrossApp坐标系2

如图所示,屏幕上显示了两个CAView分别是A和B,


上下左右边距、中心点、宽高

CAView在坐标系中定义了属性:DLayout。API定义如下:

示意图.jpg

Layout

类型:DLayout
解释:确定view在屏幕上显示的自适应方式。


起始点、中心点、宽高(旧版本)

那么CAView在坐标系中分别定义了三个属性:Frame、Bounds、Center。API定义如下:
E715A5A28490D0516B11CAEC7F3F488.jpg
Frame
类型:DRect
解释:确定view在屏幕上显示的位置和大小,参考的是父视图的坐标系统,frame属性是view及其子类共有属性。DRect包括两个成员,一个是起点坐标origin,另一个是宽高size,创建一个view必须指定Frame,否则看不见任何效果。对于CAView及其子类的frame操作,在createWithFrame、setFrame等操作时,如果DRect的size成员设置为(0,0),则不改变view的大小;如果只想改变view的坐标,不需要改变view的大小,则可采用setFrameOrigin方法来进行设置,get/set{}。

Bounds
类型:DRect
解释:view在自身坐标系统中的位置和大小,参考的是自身的坐标系统,DRect的origin值永远都是(0,0),bounds属性是view及其子类共有属性。在设置frame时,bounds也确定,其值等于frame的值。bounds和frame是有区别的,frame的值会随着view的缩放操作改变,bounds的值则不会改变,get/set{}。

Center
类型:DRect
解释:view的中心点在屏幕上的位置,CrossApp采用的坐标系是屏幕坐标系,即左上角为原点,向右和向下分别对应X和Y轴。在CrossApp中我们确定一个view的位置,是通过origin和size来设定的,为了方便,这里可以直接使用Center将view的中心点设置在我们想要的位置。如果只想改变view的坐标,不需要改变view的大小,则可采用setFrameOrigin方法来进行设置,get/set{}。

测试代码:

//Frame
    CAView * frameView = CAView::createWithColor(CAColor_blue);
    frameView->setFrame(DRect(100, 100, 100, 100));
    //this->getView()->addSubview(frameView);
     
    //添加并设置z为2
    this->getView()->insertSubview(frameView, 2);
     
    //Bounds
    CAView* boundsView = CAView::createWithColor(CAColor_red);
    boundsView->setBounds(DRect(300, 300, 100, 100));
    this->getView()->addSubview(boundsView);
     
    //Center
    CAView* centerView = CAView::createWithColor(CAColor_orange);
    centerView->setCenter(DRect(100, 100, 100, 100));
    //this->getView()->addSubview(centerView);
     
    //添加并设置z为1
    this->getView()->insertSubview(centerView, 1);


测试View缩放后,frame和bounds的变化:

    //缩放后的Frame和Bounds
    frameView->setScale(2);
     
    DRect frameRect = frameView->getFrame();
    DRect boundsRect = frameView-> getBounds();
    CCLog( "frameView->getFrame():x:%f,y:%f,width:%f,height:%f", frameRect.getMinX(), frameRect.getMinY(), frameRect.getMaxX() - frameRect.getMinX(), frameRect.getMaxY() - frameRect.getMinY() );
    CCLog( "frameView->getBounds():x:%f,y:%f,width:%f,height:%f", boundsRect.getMinX(), boundsRect.getMinY(), boundsRect.getMaxX() - boundsRect.getMinX(), boundsRect.getMaxY() - boundsRect.getMinY() );


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)