Code Monkey home page Code Monkey logo

masegmentedcontrol's Introduction

MASegmentedControl Build Status Maintenance

Language cocoapods carthage
SPM
GitHub forks GitHub issues Open Source Love svg1 GitHub license

Code Quality:

Service Grading
coderefactor.io CodeFactor
codebeat.co codebeat badge
codecov.io N/A

Super customizable Segmented Control for iOS. Following examples can give you idea how it can be customized. All this customization can be written anywhere before rendering of the control. Most desirable place is didSet block.

For example:

@IBOutlet var imagesSegmentedControl: MASegmentedControl! {
	didSet {
		imagesSegmentedControl.fillEqually = false
 		imagesSegmentedControl.buttonsWithDynamicImages = true
 		imagesSegmentedControl.roundedControl = true
    }
}

Integrating with cococapods:


Integrating latest version
pod 'MASegmentedControl'

Integrating specific version
pods 'MASegmentedControl', '~> 0.0.5'

Integrating with Carthage:


Integrating latest version
github "alokc83/MASegmentedControl"

Integrating specific version
github "alokc83/MASegmentedControl" ~> 0.0.5

Circular segment:


Circular design
You would need to provide the image array that can be a array of image litrals or array of UIImage.

 imagesSegmentedControl.fillEqually = false
 imagesSegmentedControl.buttonsWithDynamicImages = true
 imagesSegmentedControl.roundedControl = true

 // images is the array of image litrals
 imagesSegmentedControl.setSegmentedWith(items: images)
 imagesSegmentedControl.padding = 2
 imagesSegmentedControl.thumbViewColor = #colorLiteral(red: 0.9372549057,
 											green: 0.3490196168,
 											blue: 0.1921568662,
 											alpha: 1)

Rounded corner segment:


Rounded corner design

didSet {
        //Set this booleans to adapt control
        textSegmentedControl.itemsWithText = true
        textSegmentedControl.fillEqually = true
        textSegmentedControl.roundedControl = true

        textSegmentedControl.setSegmentedWith(items: ["Option 1", "Option2"])
        textSegmentedControl.padding = 2
        textSegmentedControl.textColor = #colorLiteral(red: 0.2549019754,
     											green: 0.2745098174,
     											blue: 0.3019607961,
    											alpha: 1)
        textSegmentedControl.selectedTextColor = #colorLiteral(red: 1,
        									green: 1,
        									blue: 1,
        									alpha: 1)
        textSegmentedControl.thumbViewColor = #colorLiteral(red: 0,
        										green: 0.4784313725,
        										blue: 1,
      											alpha: 1)
        textSegmentedControl.titlesFont = UIFont(name: "OpenSans-Semibold", size: 14)
}

Square design with image:


Square design


didSet {
        //Set this booleans to adapt control
        iconsSegmentedControl.itemsWithText = false
        iconsSegmentedControl.fillEqually = false
        iconsSegmentedControl.roundedControl = false

        // icons is the array of image litrals
        iconsSegmentedControl.setSegmentedWith(items: icons)
        iconsSegmentedControl.padding = 2
        iconsSegmentedControl.thumbViewColor = #colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)
        iconsSegmentedControl.buttonColorForNormal = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
        iconsSegmentedControl.buttonColorForSelected = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
  }

Square text design:


Square text design

didSet {
        //Set this booleans to adapt control
        textSquareSegmentedControl.itemsWithText = true
        textSquareSegmentedControl.fillEqually = true

        let strings = ContentDataSource.textItems()
        textSquareSegmentedControl.setSegmentedWith(items: strings)
        textSquareSegmentedControl.padding = 2
         textSquareSegmentedControl.textColor = #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)
        textSquareSegmentedControl.selectedTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
         textSquareSegmentedControl.thumbViewColor = #colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
  }

Youtube style design:


Youtube design

didSet {    
        //Set this booleans to adapt control
        youtubeLikeSegmentedControl.itemsWithText = false
        youtubeLikeSegmentedControl.bottomLineThumbView = true
        youtubeLikeSegmentedControl.fillEqually = true

        // icons is the array of image litrals
        youtubeLikeSegmentedControl.setSegmentedWith(items: icons)
        youtubeLikeSegmentedControl.padding = 2
        youtubeLikeSegmentedControl.thumbViewColor = #colorLiteral(red: 0.9411764706, green: 0.2549019608, blue: 0.2020437331, alpha: 1)
        youtubeLikeSegmentedControl.buttonColorForNormal =  #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
        youtubeLikeSegmentedControl.buttonColorForSelected = #colorLiteral(red: 0.9411764706, green: 0.2549019608, blue: 0.2020437331, alpha: 1)
  }

Simple text highlight design:


text highlight design

didSet {

       //Set this booleans to adapt control
       hiddenThumbViewSegmentedControl.itemsWithText = true
       hiddenThumbViewSegmentedControl.fillEqually = true
       hiddenThumbViewSegmentedControl.thumbViewHidden = true

       hiddenThumbViewSegmentedControl.setSegmentedWith(items: ["Option 1", "Option 2"])
       hiddenThumbViewSegmentedControl.padding = 2
       hiddenThumbViewSegmentedControl.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
       hiddenThumbViewSegmentedControl.selectedTextColor = #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)
        }

Simple text highlight with underbar design:


text with underbar design

didSet {
        //Set this booleans to adapt control
        linearThumbViewSegmentedControl.itemsWithText = true
        linearThumbViewSegmentedControl.fillEqually = true
        linearThumbViewSegmentedControl.bottomLineThumbView = true

        linearThumbViewSegmentedControl.setSegmentedWith(items: ["Option 1", "Option 2", "Option 3"])
        linearThumbViewSegmentedControl.padding = 2
        linearThumbViewSegmentedControl.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
        linearThumbViewSegmentedControl.selectedTextColor = #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)
         linearThumbViewSegmentedControl.thumbViewColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)     
  }

HitCount

masegmentedcontrol's People

Contributors

alokc83 avatar garridozh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

masegmentedcontrol's Issues

can you mark the class as open

i needed to subclass the MASegmentedControl class to draw gradients on the segments. But in order to do so i had to copy the source files into my project because if i included the pod, i was not able subclass. if you could mark the class as open i would be able to customize it

Open the class for inheritance

Hi :)

Is it possible to open the class for inheritance?

I'd like to create a subclass which I can reuse instead of having to style the control on each screen, individually.

Thanks!

Some elements disappear on rotation

I could understand that you don't support the landscape orientation but rotate to the landscape mode and rotate back to the portrait mode - some elements are disappeared. They will appear again if you click on them only

Default selected Index is not showing if its not 0

Please add the fix in the code:
let thumbViewPositionX = selectedSegmentIndex == 0 ? padding : bounds.width / CGFloat(buttons.count) * CGFloat(selectedSegmentIndex) + padding

Under the method:
private func setThumbView() {

Unknown class MASegmentedControl in Interface Builder file.

I'm trying to use your framework(0.0.5) with Pods.
I added a view on IB and change it's class to MASegmentedControl but when I run the project and the view controller opens, I get this message on console and a crash.

2020-08-20 00:12:17.003496-0300 ObjB2WLoja[23179:11584913] [Storyboard] Unknown class _TtC20ObjB2WBarcodeScanner18MASegmentedControl in Interface Builder file.
2020-08-20 00:12:17.004296-0300 ObjB2WLoja[23179:11584913] Failed to set (padding) user defined inspected property on (UIView): [<UIView 0x7ffe7039d4b0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key padding.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.