先说下思路,将设计分辨率划分为9格,当屏幕分辨率和设计分辨率宽高比不同时,
调整每个格子的大小和位置,保证屏幕中所有元素完全显示在屏幕内,保证相对位置不变并且不变形。
下面是实现代码,欢迎大家拍砖、批评(自定义坐标点的代码还没有实现,为了看效果我使用了LayerColor)
UILayer9.h
#ifndef __UI_LAYER_9_H__
#define __UI_LAYER_9_H__
#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;
class UILayer9 : public CCLayer
{
public:
enum positionType
{
E_CENTER = 0,
E_TOP,
E_BOTTOM,
E_LEFT,
E_RIGHT,
E_TOP_LEFT,
E_TOP_RIGHT,
E_BOTTOM_LEFT,
E_BOTTOM_RIGHT,
};
static UILayer9* create();
/**
* 根据center的大小确定9宫格布局的位置和大小
*
* _______________________________
* | | | |
* |__________|__________|_________|
* | | center | |
* |__________|__________|_________|
* | | | |
* |__________|__________|_________|
*
*
*/
static UILayer9* create(float centerWidth, float centerHeight);
/**
*
* 根据4个点的位置来确定9宫格布局的位置和大小
* _______________________________
* | | | |
* |__________|__________|_________|point3Y
* | | center | |
* |__________|__________|_________|point4Y
* | | | |
* |__________|__________|_________|
* point1X point2X
*
*/
static UILayer9* create(float point1X, float point2X, float point3Y, float point4Y);
virtual bool init(float centerWidth, float centerHeight);
private:
UILayer9();
~UILayer9();
//UILayer* m_pLayerCenter;
CCLayerColor* m_pLayerCenter;
CCLayerColor* m_pLayerTop;
CCLayerColor* m_pLayerBottom;
CCLayerColor* m_pLayerLeft;
CCLayerColor* m_pLayerRight;
CCLayerColor* m_pLayerTopLeft;
CCLayerColor* m_pLayerTopRight;
CCLayerColor* m_pLayerBottomLeft;
CCLayerColor* m_pLayerBottomRight;
};
#endif//__UI_LAYER_9_H__
UILayer9.cpp
#include "UILayer9.h"
UILayer9::UILayer9()
:m_pLayerTop(nullptr), m_pLayerCenter(nullptr), m_pLayerBottom(nullptr)
,m_pLayerLeft(nullptr), m_pLayerRight(nullptr)
,m_pLayerTopLeft(nullptr), m_pLayerTopRight(nullptr)
,m_pLayerBottomLeft(nullptr), m_pLayerBottomRight(nullptr)
{
}
UILayer9::~UILayer9(){}
UILayer9* UILayer9::create()
{
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
const CCSize& designSize = pEGLView->getDesignResolutionSize();
return UILayer9::create(designSize.width * 0.33f, designSize.height * 0.33f);
}
UILayer9* UILayer9::create(float centerWidth, float centerHeight)
{
UILayer9* pLayer = new UILayer9;
if (pLayer && pLayer->init(centerWidth, centerHeight))
{
pLayer->autorelease();
return pLayer;
}else
{
delete pLayer;
pLayer = nullptr;
return nullptr;
}
}
bool UILayer9::init(float centerWidth, float centerHeight)
{
if (!CCLayer::init())
{
return false;
}
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
const CCSize& screenSize = pEGLView->getFrameSize();
const CCSize& designSize = pEGLView->getDesignResolutionSize();
float scaleX = (float) screenSize.width / designSize.width;
float scaleY = (float) screenSize.height / designSize.height;
float scale = pEGLView->getScaleX();
float scaleLayer = scaleX > scaleY ? scaleY / scaleX : scaleX / scaleY;
this->setContentSize(CCSize(designSize.width, designSize.height));
this->setPosition(0, 0);
// center
this->m_pLayerCenter = CCLayerColor::create(ccc4(255, 0, 0, 64), centerWidth, centerHeight);
this->m_pLayerCenter->ignoreAnchorPointForPosition(false);
this->m_pLayerCenter->setAnchorPoint(ccp(0.5, 0.5));
this->m_pLayerCenter->setScale(scaleLayer);
this->m_pLayerCenter->setPosition(designSize.width * 0.5f, designSize.height * 0.5f);
this->addChild(this->m_pLayerCenter, 0, E_CENTER);
//top left
this->m_pLayerTopLeft = CCLayerColor::create(ccc4(0, 255, 64, 64),
(designSize.width - centerWidth) * 0.5f,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerTopLeft->ignoreAnchorPointForPosition(false);
this->m_pLayerTopLeft->setAnchorPoint(ccp(0, 1));
this->m_pLayerTopLeft->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerTopLeft->setPosition(0,
designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerTopLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale,
designSize.height);
}
this->addChild(this->m_pLayerTopLeft, 0, E_TOP_LEFT);
//top
this->m_pLayerTop = CCLayerColor::create(ccc4(0, 255, 0, 64),
centerWidth,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerTop->ignoreAnchorPointForPosition(false);
this->m_pLayerTop->setAnchorPoint(ccp(0.5, 1));
this->m_pLayerTop->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerTop->setPosition(designSize.width * 0.5f,
designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerTop->setPosition(designSize.width * 0.5f, designSize.height);
}
this->addChild(this->m_pLayerTop, 0, E_TOP);
//top right
this->m_pLayerTopRight = CCLayerColor::create(ccc4(0, 255, 128, 64),
(designSize.width - centerWidth) * 0.5f,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerTopRight->ignoreAnchorPointForPosition(false);
this->m_pLayerTopRight->setAnchorPoint(ccp(1, 1));
this->m_pLayerTopRight->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerTopRight->setPosition(designSize.width,
designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerTopRight->setPosition(designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale,
designSize.height);
}
this->addChild(this->m_pLayerTopRight, 0, E_TOP_RIGHT);
//left
this->m_pLayerLeft = CCLayerColor::create(ccc4(255, 0, 64, 64),
(designSize.width - centerWidth) * 0.5f,
centerHeight);
this->m_pLayerLeft->ignoreAnchorPointForPosition(false);
this->m_pLayerLeft->setAnchorPoint(ccp(0, 0.5));
this->m_pLayerLeft->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerLeft->setPosition(0, designSize.height * 0.5f);
}else
{
this->m_pLayerLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale,
designSize.height * 0.5f);
}
this->addChild(this->m_pLayerLeft, 0, E_LEFT);
//right
this->m_pLayerRight = CCLayerColor::create(ccc4(255, 0, 128, 64),
(designSize.width - centerWidth) * 0.5f,
centerHeight);
this->m_pLayerRight->ignoreAnchorPointForPosition(false);
this->m_pLayerRight->setAnchorPoint(ccp(1, 0.5));
this->m_pLayerRight->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerRight->setPosition(designSize.width, designSize.height * 0.5f);
}else
{
this->m_pLayerRight->setPosition(designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale,
designSize.height * 0.5f);
}
this->addChild(this->m_pLayerRight, 0, E_RIGHT);
//bottom left
this->m_pLayerBottomLeft = CCLayerColor::create(ccc4(0, 0, 255, 64),
(designSize.width - centerWidth) * 0.5f,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerBottomLeft->ignoreAnchorPointForPosition(false);
this->m_pLayerBottomLeft->setAnchorPoint(CCPointZero);
this->m_pLayerBottomLeft->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerBottomLeft->setPosition(0, designSize.height * 0.5f - screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerBottomLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale, 0);
}
this->addChild(this->m_pLayerBottomLeft, 0, E_BOTTOM_LEFT);
//bottom
this->m_pLayerBottom = CCLayerColor::create(ccc4(64, 0, 255, 64),
centerWidth,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerBottom->ignoreAnchorPointForPosition(false);
this->m_pLayerBottom->setAnchorPoint(ccp(0.5, 0));
this->m_pLayerBottom->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerBottom->setPosition(designSize.width * 0.5f,
designSize.height * 0.5f - screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerBottom->setPosition(designSize.width * 0.5f, 0);
}
this->addChild(this->m_pLayerBottom, 0, E_BOTTOM);
//bottom right
this->m_pLayerBottomRight = CCLayerColor::create(ccc4(128, 0, 255, 64),
(designSize.width - centerWidth) * 0.5f,
(designSize.height - centerHeight) * 0.5f);
this->m_pLayerBottomRight->ignoreAnchorPointForPosition(false);
this->m_pLayerBottomRight->setAnchorPoint(ccp(1, 0));
this->m_pLayerBottomRight->setScale(scaleLayer);
if (scale == scaleX)
{
this->m_pLayerBottomRight->setPosition(designSize.width,
designSize.height * 0.5f - screenSize.height * 0.5f / scale);
}else
{
this->m_pLayerBottomRight->setPosition(
designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale, 0);
}
this->addChild(this->m_pLayerBottomRight, 0, E_BOTTOM_RIGHT);
auto pImg = CCSprite::create("img/m_1.png");
pImg->setAnchorPoint(CCPointZero);
pImg->setPosition(CCPointZero);
this->m_pLayerCenter->addChild(pImg);
pImg = CCSprite::create("img/m_1.png");
pImg->setAnchorPoint(CCPointZero);
pImg->setPosition(CCPointZero);
this->m_pLayerTopLeft->addChild(pImg);
pImg = CCSprite::create("img/m_1.png");
pImg->setAnchorPoint(CCPointZero);
pImg->setPosition(CCPointZero);
this->m_pLayerBottomLeft->addChild(pImg);
return true;
}
UILayer9* UILayer9::create(float point1X, float point2X, float point3Y, float point4Y)
{
return nullptr;
}