ionic預設樣式android和ios差異

標籤：

ionicframework中android和ios在預設樣式上有一些不同的地方，官方文檔中都有說明，但是經常會想不起。

一、差異：

1.tab位置，$ionicConfigProvider, tabs.position(value)

Android 預設是頂部(top)，Ios是底部 (bottom)

2.標題android預設靠左邊，ios預設置中

navBar.alignTitle(value)

 

二：解決方案：

1.將Android的tab預設設定是底部顯示：

修改app.js檔案如下：

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {  //Modify the tabs of android display position! start  $ionicConfigProvider.platform.ios.tabs.style(‘standard‘);  $ionicConfigProvider.platform.ios.tabs.position(‘bottom‘);  $ionicConfigProvider.platform.android.tabs.style(‘standard‘);  $ionicConfigProvider.platform.android.tabs.position(‘standard‘);  $ionicConfigProvider.platform.ios.navBar.alignTitle(‘center‘);  $ionicConfigProvider.platform.android.navBar.alignTitle(‘left‘);  $ionicConfigProvider.platform.ios.backButton.previousTitleText(‘‘).icon(‘ion-ios-arrow-thin-left‘);  $ionicConfigProvider.platform.android.backButton.previousTitleText(‘‘).icon(‘ion-android-arrow-back‘);  $ionicConfigProvider.platform.ios.views.transition(‘ios‘);  $ionicConfigProvider.platform.android.views.transition(‘android‘);  //Modify the tabs of android display position! end  // Ionic uses AngularUI Router which uses the concept of states  // Learn more here: https://github.com/angular-ui/ui-router  // Set up the various states which the app can be in.  // Each state‘s controller can be found in controllers.js  $stateProvider  // setup an abstract state for the tabs directive    .state(‘tab‘, {    url: ‘/tab‘,    abstract: true,    templateUrl: ‘templates/tabs.html‘  })  // Each tab has its own nav history stack:  .state(‘tab.dash‘, {    url: ‘/dash‘,    views: {      ‘tab-dash‘: {        templateUrl: ‘templates/tab-dash.html‘,        controller: ‘DashCtrl‘      }    }  })  .state(‘tab.chats‘, {      url: ‘/chats‘,      views: {        ‘tab-chats‘: {          templateUrl: ‘templates/tab-chats.html‘,          controller: ‘ChatsCtrl‘        }      }    })    .state(‘tab.chat-detail‘, {      url: ‘/chats/:chatId‘,      views: {        ‘tab-chats‘: {          templateUrl: ‘templates/chat-detail.html‘,          controller: ‘ChatDetailCtrl‘        }      }    })  .state(‘tab.account‘, {    url: ‘/account‘,    views: {      ‘tab-account‘: {        templateUrl: ‘templates/tab-account.html‘,        controller: ‘AccountCtrl‘      }    }  });  // if none of the above states are matched, use this as the fallback  $urlRouterProvider.otherwise(‘/tab/dash‘);});

2.修改Android的title樣式置中顯示

給指令ion-header-bar設定align-title="center"屬性就行了

 

ionic預設樣式android和ios差異