先说下思路,将设计分辨率划分为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__
#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; }