关于屏幕适配这件事,翻了半天资料,全是没什么实际用处的理论和空谈,最后还是自己动手解决最靠谱。下面直接贴出我采用的做法:做一个专门处理屏幕适配的 Layer,在上下两端各贴一张背景图补齐黑边,然后在 AppDelegate 里按 FIXED_WIDTH 策略设置设计分辨率。

适配层:上下补背景图

思路很简单:以 540 宽度为基准横向铺满,纵向超出的部分用同一张 bg_bottom_all.png 分别贴到上下两端,把因高度差产生的黑边覆盖掉。

class HeightFix :public Layer//屏幕适配 层
                {
                public:
                	HeightFix()
                	{
                		Layer::init();
                
                		auto up = Sprite::create("bg_bottom_all.png");
                		auto down = Sprite::create("bg_bottom_all.png");
                
                		this->addChild(down);
                		this->addChild(up);
                
                		up->setPosition(540/ 2, HEIGHT_MAX/2+810/2+197/2		);
                		down->setPosition(540 / 2,HEIGHT_MAX / 2 - 810 / 2 - 197 / 2);
                	}
                };

AppDelegate:设置设计分辨率

在 applicationDidFinishLaunching 里走常规流程:拿到 Director 和 GLView,没有就创建一个,然后按 5S 的 640x1136 设置 FrameSize,并把设计分辨率定为 540x1204,策略选 FIXED_WIDTH,剩下的高度差就交给上面那个 HeightFix 层去补。

bool AppDelegate::applicationDidFinishLaunching() {
                    // initialize director
                    auto director = Director::getInstance();
                    auto glview = director->getOpenGLView();
                    if(!glview) {
                        glview = GLViewImpl::create("SGZonline");
                        director->setOpenGLView(glview);
                		glview->setFrameSize(640, 1136);// 5S
                		//glview->setFrameSize(640, 960);// 4S
                
                		glview->setFrameZoomFactor(0.5);
                    }
                
                    director->getOpenGLView()->setDesignResolutionSize(540, 1204, ResolutionPolicy::FIXED_WIDTH);
                
                    ........