menu
Channels
Team

Building a Tabbar for iOS

June 29, 2020 at 11:05am

Building a Tabbar for iOS

June 29, 2020 at 11:05am (Edited 10 months ago)
Our screenshots of MobileUI apps show a TabBar for Navigation on iOS. It's a great navigation pattern for iOS apps. But how can you build this? MobileUI currently does not abstract the navigation on iOS and Android. So, you need to implement this natively.
Here is an example, how you can build a TabBar on iOS with a few lines of code. This is the UIApplicationDelegateAdapter (Main.java) from our JavaForum App. The magic happens in the method didFinishLaunching where a UITabBarController is set up to host all other controllers. It is then used as the rootViewController for the window. Feel free to reuse this example.
package io.nevernull.javaforum;
import com.j256.ormlite.logger.LocalLog;
import io.nevernull.mobileui.ios.MobileUIIos;
import org.robovm.apple.foundation.NSArray;
import org.robovm.apple.foundation.NSAutoreleasePool;
import org.robovm.apple.uikit.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class Main extends UIApplicationDelegateAdapter {
private static final Logger logger = LoggerFactory.getLogger(Main.class);
private UIWindow window;
public static final UIColor primaryColor = UIColor.fromRGBA(1.0, 179.0 / 255.0, 0, 1);
public static final UIColor primaryDarkColor = UIColor.fromRGBA(245.0 / 255.0, 169.0 / 255.0, 0,
1);
@Override
public boolean didFinishLaunching(UIApplication application, UIApplicationLaunchOptions launchOptions) {
//Set OrmLite's log level to error
System.setProperty(LocalLog.LOCAL_LOG_LEVEL_PROPERTY, "ERROR");
MobileUIIos.initComponent();
// Set up the view controllers.
UINavigationController mapController = makeNavController(new MapViewController());
UINavigationController programController = makeNavController(new ProgramViewController());
UINavigationController favoritesController =
makeNavController(new FavoritesViewController());
UINavigationController infosViewController = makeNavController(new InfosViewController());
mapController.setTabBarItem(new UITabBarItem("Map", UIImage.getImage("Map"), 0l));
programController.setTabBarItem(new UITabBarItem("Programm", UIImage.getImage("Program"),
1l));
favoritesController.setTabBarItem(new UITabBarItem("Favoriten", UIImage.getImage(
"Favorites"), 3l));
infosViewController.setTabBarItem(new UITabBarItem("Infos", UIImage.getImage("Infos"),
4l));
//Create the tabbar
UITabBarController tabBarController = new UITabBarController();
UITabBar tabBar = tabBarController.getTabBar();
tabBar.setTranslucent(false);
tabBarController.setViewControllers(new NSArray<>(mapController, programController,
favoritesController, infosViewController));
tabBarController.setSelectedIndex(1l);
// Create a new window at screen size.
this.window = new UIWindow(UIScreen.getMainScreen().getBounds());
this.window.setTintColor(primaryDarkColor);
// Set the view controller as the root controller for the window.
this.window.setRootViewController(tabBarController);
this.window.makeKeyAndVisible();
return true;
}
private UINavigationController makeNavController(UIViewController wrappedController) {
UINavigationController mapController = new UINavigationController(wrappedController);
UINavigationBar navigationBar = mapController.getNavigationBar();
navigationBar.setTranslucent(false);
navigationBar.setBarStyle(UIBarStyle.Black);
navigationBar.setBarTintColor(primaryColor);
navigationBar.setTintColor(UIColor.white());
return mapController;
}
@Override
public void didReceiveMemoryWarning(UIApplication application) {
super.didReceiveMemoryWarning(application);
logger.debug("Received memory warning - running garbage collector.");
System.gc();
}
public static void main(String[] args) {
try (NSAutoreleasePool pool = new NSAutoreleasePool()) {
UIApplication.main(args, null, Main.class);
}
}
}
One important thing are the images that are displayed as icons on the TabBar. They need to be provided in RoboVM's resources folders (in your app-ios module). We like to use PDFs for this purpose, as they are automatically built into multi-resolution PNGs by the build process. Put the images in.imageset folders as shown below:
Bildschirmfoto 2020-06-28 um 16.10.48.png
The Contents.json file may then look like this:
{
"images" : [
{
"idiom" : "universal",
"filename" : "image.pdf"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
},
"properties" : {
"preserves-vector-representation" : true
}
}
Hope, this helps with starting advanced navigational patterns. Henrik is currently building an extensive example for BottomBar/TabBar navigation that will be available via Github.
So stay tuned!
Daniel
No messages yet