PhoneGap Plugins——NativeControls Plugin的使用与change orientation问题的解决方案

由於在JQuery的插件和3rd框架裡找不到比較完美的TabBar供現有的項目使用，因此我們使用了Github裡的PhoneGap Plugins，裡面有一個NativeControls就是間接調用Apple SDK裡的TabBar，因此在iOS項目裡使用此插件是一個明智的選擇，具體使用方法請參閱Github上的readme文件。

而在使用此插件中遇到一個比較重要的問題就是在Device翻屏時在屏幕底部的TabBar變成了黑色的一塊，翻查了許多國外網站發現有少許人都遇到此問題但都找不到解決方案，而在我和項目夥伴的研究下找到了一個解決方案，如下

我們找到此Plugin的.m文件，裡面有一showTabBar方法，此方法包含了對TabBar的定位等方法，因為此定位方法沒有考慮到change orientation的問題，所以翻屏後的坐標都沒有定位好，因此我們在這裡修改他的.m文件下的showTabBar方法：

//if (!tabBar.hidden) {

//return;

//}

把以上三句注釋掉，然後一部分代碼修改為以下形態

 if (atBottom && [[optionsobjectForKey:@"orientation"]isEqualToString:@"portrait"]) 

    {

        tabBarBounds =CGRectMake(0,411,320,49);

                                  

        webViewBounds =CGRectMake(0,0,320,411);

    } 

    else if(atBottom && [[options objectForKey:@"orientation"] isEqualToString:@"landscape"])

    {

                                

        tabBarBounds =CGRectMake(0,251,480,49);

                                  

         webViewBounds =CGRectMake(0,0,480,251);

    }

.m文件修改到此為止，最後一步就是在調用此方法時傳入一個JSON參數，如下

if(e.orientation=="landscape")

yourTabBar.showTabBar({'position' :'bottom','orientation' :'landscape'}); 

elseif(e.orientation=="portrait")

yourTabBar.showTabBar({'position' :'bottom','orientation' :'portrait'});

此解決方法唯一不足之處就是翻屏時定位比較慢，因此沒那麼美觀，不過使用起來也是不錯的

轉載請注明出處，作者：SamFung