语言: 英文中文

Tips to migrate iOS Theme app to Material Theme

With release of Material theme you'll probably want to make Material version of your app for Android devices.

In this article we'll look at main difference between these themes to make migration of iOS app to Material theme easier.

Difference

1. CSS Files

First of all we need to include Material specific CSS files instead of iOS ones:

<head>
    ...
    <link rel="stylesheet" href="path/to/framework7.material.min.css">
    <link rel="stylesheet" href="path/to/framework7.material.colors.min.css">
</head>

2. Enable Material

Then we need to enable Material theme specific JS logic by passing material:true parameter on App initialization:

var myApp = new Framework7({
  material: true //enable Material theme
})      

3. No Swipe Back

Material theme doesn't support Swipe Back gesture. And if your app contains pages or views which are highly related on this feature, you'll have to change it or provide additional "back" button.

You don't need to disable this feature in App or View parameters. It will be ignored automatically when Material is enabled on App initialization.

4. No Through-Type Toolbars Layout

Material theme doesn't support such layout as well as Dynamic Navbar, so we have to change our pages/toolbars layout to Fixed layout.

In iOS Theme, we have:

<!-- Main Page View -->
<div class="view navbar-through">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">Page Title</div>
        </div>
    </div>    
    <div class="pages">
        <div class="page">
            <div class="page-content">
                <!-- Page content here -->        
            </div>
        </div>
    </div>
</div>
 
<!-- Internal Page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="center">Page Title</div>
    </div>
</div>
<div class="page">
    <div class="page-content">
        <!-- Page content here -->
    </div>
</div>      

In Material Theme, we need to put navbar inside of page, so change it to:

<!-- Main Page View -->
<div class="view navbar-fixed">
    <div class="pages">
        <div class="page">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="center">Page Title</div>
                </div>
            </div>    
            <div class="page-content">
                <!-- Page content here -->        
            </div>
        </div>
    </div>
</div>
 
<!-- Internal Page -->
<div class="page">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">Page Title</div>
        </div>
    </div>
    <div class="page-content">
        <!-- Page content here -->
    </div>
</div>      

5. Form Radios

If you use Checkboxes and radios in your app, pay attention to Radios Group Material layout. It is a bit different and uses additional radio icon.

6. Tab Bar Application

If your app is a Tab Bar application layout (where each Tab contains separate View), then you will probably need to reconsider such layout as it is not very popular and not widely used in Material apps.

Maintain Both Themes

As we see there is no much critical difference in these themes layout and it is not hard to convert your iOS app to Material theme app. Also, there is a way to maintain both iOS and Material themes in single app.