Swift customizes the Tabbarcontroller in iOS and adds animation to it _swift

Custom Tabbarcontroller
Sometimes the default Tabbarcontroller can not meet our development needs, such as you want to use the color icon, the system only calls the outline of the icon, so we need to define our own tabbar.

Method One: Modify the Tabbar in Tabbarcontroller
the new Customtabbarcontroller class inherits from Uitabbarcontroller and is set in storyboard:

First customize the background of the Tabbar and add in the Viewdidload () method:

Copy Code code as follows:

with pictures
Self.tabBar.backgroundImage = UIImage (named: "TABBARBG")
Or
Use color directly
Self.tabBar.barTintColor = Uicolor.blackcolor ()

Then modify the Tabbaritem in each viewcontroller and continue adding in the Viewdidload () method:

Copy Code code as follows:

For (index, Viewcontroller) in self.viewcontrollers!. Enumerate () {
Declares Tabbaritem image, if no Imagewithrenderingmode method image will only preserve the outline
Let image = UIImage (named: "Tabbar\ (Index)")? Imagewithrenderingmode (. alwaysoriginal)
Let SelectedImage = UIImage (named: "Tabbar\ (Index) Sel")? Imagewithrenderingmode (. alwaysoriginal)

Declare a new untitled Tabbaritem
Let Tabbaritem = Uitabbaritem (Title:nil, Image:image, Selectedimage:selectedimage)
Set the Tabbaritem imageinsets to center the icon
Tabbaritem.imageinsets = Uiedgeinsetsmake (6, 0,-6, 0)

Viewcontroller.tabbaritem = Tabbaritem
}

Complete! The effect looks like this:

Method Two: Custom Tabbar
The only problem with the above method is when you want to set the selected background of item:

Copy Code code as follows:

Self.tabBar.selectionIndicatorImage = UIImage (named: "Tabbarbgsel")

Background map can not be covered with the entire item, there will be gaps on both sides (if you have a better way to solve the message, thank you), as shown:

This time you need to customize the Tabbar, first declare a UIButton to record the currently selected button:

Copy Code code as follows:

var selectbutton:uibutton!

Add the following code at the bottom of the Viewdidload () method:

Copy Code code as follows:

First, record the frame of the controller's own tabbar.


Let rect = Self.tabBar.frame


Remove the Tabbar from the controller band


Self.tabBar.removeFromSuperview ()

Create a UIView with the recorded frame
Let MyView = UIView (frame:rect)
Set the background color of this view
Myview.backgroundcolor = Uicolor (Patternimage:uiimage (named: "TABBARBG")!)
Self.view.addSubview (MyView)

for var i = 0; I < self.viewcontrollers? Count i++ {

Let button = UIButton ()

Calculate the width of a button based on the number of child Viewcontroller
Let width = myview.frame.size.width/cgfloat (self.viewcontrollers!. Count
Let x = CGFloat (i) * width
Button.frame = CGRectMake (x, 0, width, myView.frame.size.height)

Set the icon for the button when it is not selected
Let image = UIImage (named: "Tabbar\ (i)")? Imagewithrenderingmode (uiimagerenderingmode.alwaysoriginal)
Button.setimage (image, ForState:UIControlState.Normal)

Set the icon when the button is selected, note that the button status here is selected, not highlighted
Let Selimage = UIImage (named: "Tabbar\ (i) Sel")? Imagewithrenderingmode (uiimagerenderingmode.alwaysoriginal)
Button.setimage (Selimage, forState:UIControlState.Selected)

Set the background of the button when it is unchecked and selected
Button.setbackgroundimage (UIImage (named: "TABBARBG"), ForState:UIControlState.Normal)
Button.setbackgroundimage (UIImage (named: "Tabbarbgsel"), forState:UIControlState.Selected)

Remove the UIButton effect from the belt
Button.adjustsimagewhenhighlighted = False

Myview.addsubview (Button)

Set the UIButton tag
Button.tag = i

Button.addtarget (Self, Action: "OnClick:", ForControlEvents:UIControlEvents.TouchUpInside)

Set the default selection
If i = = 0 {
Button.selected = True
Self.selectbutton = button
}
}
/**
Click event for Custom button

:p Aram:button
*/
Func OnClick (Button:uibutton) {
Set the last selected button to unchecked
Self.selectButton.selected = False
The current button is set to select
Button.selected = True
Record Select button
Self.selectbutton = button

Which Uiviewcontroller is selected through the Uitabbarcontroller SelectedIndex property setting
Self.selectedindex = Button.tag
}

The final effect is as follows:

Add animations to Custom Tabbarcontroller
How to customize Tabbarcontroller as we've already talked about above, we now add animation effects to the custom Tabbar.

Directly on the code:

Copy Code code as follows:

Used to record the currently selected button
private var Currentselectedbutton = UIButton ()
Used to indicate a selected background
private Var selectionindicatorimageview:uiimageview!
Width of individual item
private Var itemwidth:cgfloat!
In the Viewdidload () method, add the following code:

Override Func Viewdidload () {
Super.viewdidload ()

Record the location of the Tabbarcontroller with Tabbar
Let rect = Self.tabBar.frame
Remove the Tabbar from the Tabbarcontroller band
Self.tabBar.removeFromSuperview ()

Customizing the Tabbar background
Let Backgroundview = UIView (frame:rect)
Backgroundview.backgroundcolor = Uicolor (Patternimage:uiimage (named: "TABBARBG")!)

Self.view.addSubview (Backgroundview)

Itemwidth = Backgroundview.frame.size.width/cgfloat (self.viewcontrollers!. Count

Selectionindicatorimageview = Uiimageview (frame:cgrectmake (0, 0, itemwidth, backgroundView.frame.size.height))
Selectionindicatorimageview.image = UIImage (named: "Tabbarbgsel")

Backgroundview.addsubview (Selectionindicatorimageview)

for var i = 0; I < viewcontrollers!. Count i++ {

Let button = Cgmtabbarbutton (Frame:cgrectmake (itemwidth * cgfloat (i), 0, Itemwidth, backgroundView.frame.size.height))

Let image = UIImage (named: "Tabbar\ (i)")!
Let Selimage = UIImage (named: "Tabbar\ (i) Sel")!

Button.setimage (image, ForState:UIControlState.Normal)
Button.setimage (Selimage, forState:UIControlState.Selected)

Button.addtarget (Self, Action: "OnClick:", ForControlEvents:UIControlEvents.TouchUpInside)

Button.tag = i

Remove the Buttond effect of the high light
Button.adjustsimagewhenhighlighted = False

Backgroundview.addsubview (Button)
}
}

Add the OnClick method, and the animation effect is also implemented in this area:

Copy Code code as follows:

Func OnClick (Button:uibutton) {
I set the last check to be selected
Self.currentSelectedButton.selected = False
The current button is set to select
Button.selected = True

Self.currentselectedbutton = button

Let x = CGFloat (Button.tag) + 0.5

Add animations to the background of a Tabbaritem
Uiview.animatewithduration (0.4, delay:0.0, usingspringwithdamping:0.7, initialspringvelocity:10.0, Options: Uiviewanimationoptions.curveeaseinout, animations: {()-> Void in

self.selectionindicatorimageview.center.x = self.itemwidth * x

}, Completion:nil)

Self.selectedindex = Button.tag
}

The final effect is as follows: