Swiftpack.co - Package - twho/material-design-widgets-lite-ios

Material Design Widgets - Lightweight

This framework give you full flexibility to apply any material design widget you would like to use in your app! Please see below steps if you only need to use one or two of the entire package widgets.

Generic badge Generic badge Generic badge Generic badge Generic badge

overview

You may download MaterialDesignWidgetsDemo to see how its used in your app.

Key Features

  • A full package of material design widgets that you'll need to upgrade your app's visual.
  • Widget classes are made to be open, which gives you flexibility to create your own.
  • Instead of pull down the entire package, you can also copy the source of any widget you need independently.
  • If you decide to just use one of the widgets, you can follow below usage for instructions on which files you need for that specific widget.

Requirements

  • Swift 5.0
  • iOS 11.0+

Usage

Buttons

Required Files:

  • RippleLayer.swift
  • MaterialButton.swift

Normal Button

let btnSample1 = MaterialButton(text: "Sample1", cornerRadius: 15.0)
let btnSample2 = MaterialButton(text: "Sample2", textColor: .black, bgColor: .white)
button

Loading Button

let btnLoading = MaterialButton(text: "Loading Button", cornerRadius: 15.0)
loadingBtn.addTarget(self, action: #selector(tapLoadingButton(sender:)), for: .touchUpInside)

@objc func tapLoadingButton(sender: MaterialButton) {
    sender.isLoading = !sender.isLoading
    sender.isLoading ? sender.showLoader(userInteraction: true) : sender.hideLoader()
}
loadingButton

Shadow Button

let btnShadow = MaterialButton(text: "Shadow Button", cornerRadius: 15.0, withShadow: true)
shadowButton

Vertical Aligned Button

let img = UIImage(named: "Your image name")
let btnV = MaterialVerticalButton(icon: img, title: "Fill", foregroundColor: .black, bgColor: .white)
verticalButton

Segmented Control

Required File - MaterialSegmentedControl.swift

Filled

let sgFilled = MaterialSegmentedControl(selectorStyle: .fill, fgColor: .black, selectedFgColor: .white, selectorColor: .black, bgColor: .lightGray)
// Below is styling, you can write your own.
sgFilled.backgroundColor = .lightGray
sgFilled.setCornerBorder(cornerRadius: 18.0)
segmentFill

Outline

let sgOutline = MaterialSegmentedControl(selectorStyle: .outline, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
segmentOutline

Line Text

let sgLine = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
segmentLineText

Line Icon

let sgLineIcon = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .gray, bgColor: .white)
segmentLineIcon

Append Normal Segment

for i in 0..<3 {
    segCtrl.appendSegment(text: "Segment \(i)", textColor: .gray, bgColor: .clear, cornerRadius: radius)
}

Append Icon Segment

let icons = [yourImage1, yourImage2, yourImage3]
for i in 0..<3 {
    sgLineIcon.appendIconSegment(icon: icons[i], preserveIconColor: true, rippleColor: .clear, cornerRadius: 0.0)
}

Add Value Change Listener

segCtrl.addTarget(self, action: #selector(yourSegmentedControlValueChangeMethod), for: .valueChanged)

TextField

Required files:

  • RippleLayer.swift
  • MaterialTextField.swift
let textField = MaterialTextField(hint: "TextField", textColor: .black, bgColor: .white)
textField

Loading Indicator

Required file - MaterialLoadingIndicator.swift

let indicatorBlack = MaterialLoadingIndicator(radius: 15.0, color: .black)
indicatorBlack.startAnimating()
let indicatorGray = MaterialLoadingIndicator(radius: 15.0, color: .gray)
indicatorGray.startAnimating()
loading

Installation

MaterialDesignWidgets is available through CocoaPods. To install it, simply add the following line to your Podfile:

$ pod 'MaterialDesignWidgets'

If you don't use CocoaPods, you can download the entire project then drag and drop all the classes and use them in your project.

Credits

Github

link
Stars: 26

Dependencies

Used By

Total: 0

Releases

- 2020-05-28 17:19:24

New features

  • Expose new segmented control APIs
  • Completely-customized coloring of segmented control

Bug fixes

  • Fix material button setting corner radius bug

- 2020-05-28 17:13:29

This is the initial release with the complete functionality of all available widgets, enjoy!

- 2020-05-28 17:11:51

- 2020-05-28 17:11:38

- 2020-05-28 17:11:21

- 2020-05-28 17:11:03