A Progressive Reduction Swift UI module for adding custom states to Native or Custom iOS UI elements

by iOS Example

Adaptive Tab Bar

This project is maintained by Ramotion, Inc.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Live Demo

https://itunes.apple.com/app/apple-store/id1182360240?mt=8

Tab Bar After Install

Tab Bar After Two Weeks

Tab Bar After a Month

Overview

AdaptiveController is module for adding custom states to Native or Custom UI elements. The UI elements evolve over time as the user becomes accustomed to them. An example AdaptiveTabBar is provided.

How to import the control to your project

  1. First, drag and drop the AdaptiveController project file into your project or select "add existing file" and choose the AdaptiveController project
  2. Add AdaptiveController to your Target Dependences in the Build Phase of your project.
  3. Add the AdaptiveController framework in Link Binary With Libraries in Build Phases
  4. Import AdaptiveController where needed.

Using AdaptiveController

First, you should set the install date, current date, count of days to transition to small text state, and count of days to transition to big image state. The AdaptiveDateState object automatically determines what UI state to show:

    var installDate = NSDate(dateString:"2014-09-18")
    var adaptiveState = AdaptiveDateState(installDate: installDate, currentDate:NSDate(), countDaysToSmallTextState:countDaysToSmallTextState, countDaysToImageState:countDaysToImageState)

Or count of launches for different state:

    var curentCountLaunches = 6
    var adaptiveState = AdaptiveLaunchesState(curentCountLaunches:curentCountLaunches, countLaunchesToSmallTextState:5, countLaunchesToImageState:7)

And then you should setup an array of appearances. You should setup button images for each state for each apperance object:

    var buttonsAppearances = buttonsAppearancesGenerate() //func butonsAppearancesGenerate() -> [AdaptiveButtonApperance]

And then you should setup an array of items Appearance object. You should set the button's image for each state for each appearance object.

First, you should setup a dictionary for the extension of the image for each UI state:

    var imageExtensionsForStates:Dictionary = [ kSmallTitleAdaptiveState:"_smalltitle", kImageAdaptiveState:"_bigimage", kSmallTitleAdaptiveState+selected :"_smalltitle", kImageAdaptiveState+selected:"_bigimage" ]

Then you should set the Appearance for each UITabBarItem title for each state, fonts for each state, a default image if you describe an extension for each state, or if you do not describe an extension, you should setup each image for each state.

First, init the appearance object and setup the text for each state. If the text is the same for each state, you can set text for the default state:

    var watchAppearance = AdaptiveButtonAppearance(); 
    watchAppearance.setButonTitle("watch", state: kDefaultAdaptiveState)
    watchAppearance.setButonTitle("watch", state: kSmallTitleAdaptiveState)
    watchAppearance.setButonTitle("", state: kImageAdaptiveState)

Then you should setup your fonts for each state:

    watchAppearance.setButonTitleFontForState(yourDefaultFont, state: kDefaultAdaptiveState)
    watchAppearance.setButonTitleFontForState(yourDefaultSmallTitleModeFont, state: kSmallTitleAdaptiveState)

Then you should set the default image and extensions for each state a function which automaticaly sets images for each state:

    watchAppearance.setImageNamesForStatesImageExtesions("watch", imageExtensionsForState:imageExtensionsForStates)

Then you should setup the appearance insets for each state:

    watchAppearance.setImageInsets(defaultInsets, state: kDefaultAdaptiveState);
    watchAppearance.setImageInsets(defaultSmallTitleModeImageInsets, state: kSmallTitleAdaptiveState)
    watchAppearance.setTitleOffset(defaultOffset, state: kDefaultAdaptiveState)
    watchAppearance.setImageInsets(defaultImageModeInsets, state: kImageAdaptiveState);

Then you should setup сustom UITabBarItems which conform to the AdaptiveButtonsProtocol:

    var arrayButtons = tabBar.items as [AdaptiveTabBarItem]

In your custom tab item, you should implement these methods from the protocol:

    @objc protocol AdaptiveApperanceProtocol {
        optional func setFontToAdaptiveButton(font: UIFont)
        optional func setTitleToAdaptiveButton(text: NSString)
        optional func setImageToAdaptiveButton(image: UIImage?)
        optional func setHighlightedToAdaptiveButton(image: UIImage?)
        optional func setBackgroundImageToAdaptiveButton(image: UIImage?)
        optional func setSelectedImageToAdaptiveButton(image: UIImage?)
        optional func setImageInsetsToAdaptiveButton(insets: UIEdgeInsets)
        optional func setTitleOffsetToAdaptiveButton(offset: UIOffset)
        optional func setTitleColorToAdaptiveButton(titleColor: UIColor)
    }

An example implemetation of a protocol method from our custom tab bar item:

    func setTitleToAdaptiveButton(text: NSString) {
    	self.title = text
	}

Finally, you should init Adaptive State Manager with the objects you've setup:

	AdaptiveButtonsStateManager(state: adaptiveState, buttonsAray:arrayButtons, buttonsAppearance:butonsAppearances)

GitHub