Git Product home page Git Product logo

inputviews's Introduction

InputViews Title

Example1 Example2 Example3
DatePicker ItemPicker ItemsPicker
Example4 Example5 Example6
ItemsPicker IconPicker ColorPicker

InputViews

Input views for UITextField show PickerView, TableView, Collection, instead of default keyboard

Pod Platform License

It helps you convert ordinary UITextfield to item picker of multiple style.

Features

  • Date Picker (Example1)
  • Item Picker using UIPickerView (Example2)
  • Item Picker using UITableView (Example3)
  • Item Picker using UICollectionView (Example4)
  • Quick AccessoryView with done button (All examples with done button toolbar)
  • Font Awesome Icon Picker (Example5)
  • UIColor Picker (Example6)

Requirements

  • iOS 10.0+
  • Xcode 10.2.1+

Installation

CocoaPods

You can use CocoaPods to install InputViews by adding it to your Podfile:

platform :ios, '10.0'
use_frameworks!
pod 'InputViews'

To get the full benefits import InputViews wherever you import UIKit

import UIKit
import InputViews

Usage Guide

Date Picker (Example1)

@IBOutlet var datePicker: NoCutPasteTextField? {
  didSet {
    guard let datePicker = datePicker else { return }
    // Setting up input view
    datePicker.inputView = DatePickerInputView(
      mode: .dateAndTime, didSelect: { (date) in
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "dd-MMM-yyyy hh:mm a"
        datePicker.text = dateFormatter.string(from: date)
    })
    // Setting up accessory view
    datePicker.inputAccessoryView = AccessoryView("Select Date", doneTapped: {
      datePicker.resignFirstResponder()
    })
  }
}

Item picker with UIPickerView (Example2)

@IBOutlet var itemPicker: NoCutPasteTextField? {
  didSet {
    guard let itemPicker = itemPicker else { return }
    let array = ["First item", "Second item", "Third item", "Fourth item", "Fifth", "and sixth"]
    // Setting up input view
    let inputView = PickerInputView<String>(height: 250)
    inputView.items = { return array }
    inputView.didSelectAtIndex = { index in itemPicker.text = array[index] }
    inputView.text = { string in return string }
    itemPicker.inputView = inputView
    // Setting up accessory view
    itemPicker.inputAccessoryView = AccessoryView("Select item", doneTapped: {
      itemPicker.resignFirstResponder()
    })
  }
}

Items picker with UITableView (Example3)

@IBOutlet var itemsFromTablePicker: NoCutPasteTextField? {
  didSet {
    guard let itemsFromTablePicker = itemsFromTablePicker else { return }
    let array = ["First item", "Second item", "Third item", "Fourth item", "Fifth", "and sixth"]
    var selected: [String] = []
    let inputView = TableInputView<String>.init(height: 250)
    inputView.items = { return array }
    inputView.didSelect = { string in
      if let index = selected.firstIndex(of: string) {
        selected.remove(at: index)
      } else {
        selected.append(string)
      }
      itemsFromTablePicker.text = selected.joined(separator: ", ")
    }
    inputView.contains = { string in return selected.firstIndex(of: string) != nil }
    inputView.text = { string in return string }
    itemsFromTablePicker.inputView = inputView
    // Setting up accessory view
    itemsFromTablePicker.inputAccessoryView = AccessoryView("Select item", doneTapped: {
      itemsFromTablePicker.resignFirstResponder()
    })
  }
}

Items picker with UICollectionView (Example4)

@IBOutlet var itemsFromCollectionView: NoCutPasteTextField? {
  didSet {
    guard let itemsFromCollectionView = itemsFromCollectionView else { return }
    let array = ["First item", "Second item", "Third item", "Fourth item", "Fifth", "and sixth"]
    var selected: [String] = []
    let inputView = CollectionInputView<String>(height: 250)
    inputView.items = { return array }
    inputView.didSelect = { string in
      if let index = selected.firstIndex(of: string) {
        selected.remove(at: index)
      } else {
        selected.append(string)
      }
      itemsFromCollectionView.text = selected.joined(separator: ", ")
    }
    inputView.text = { string in return string }
    inputView.contains = { string in return selected.firstIndex(of: string) != nil }
    itemsFromCollectionView.inputView = inputView
    // Setting up accessory view
    itemsFromCollectionView.inputAccessoryView = AccessoryView("Select item", doneTapped: {
      itemsFromCollectionView.resignFirstResponder()
    })
  }
}

Pick Font Awesome Icon (Example5)

@IBOutlet var pickFontAwesomeIconView: NoCutPasteTextField? {
  didSet {
    guard let pickFontAwesomeIconView = pickFontAwesomeIconView else { return }
    pickFontAwesomeIconView.inputView = PickFontAwesomeIconView(didSelect: { (icon) in
      print("Icon is \(icon)")
    }, height: 250)
    // Setting up accessory view
    pickFontAwesomeIconView.inputAccessoryView = AccessoryView("Select item", doneTapped: {
      pickFontAwesomeIconView.resignFirstResponder()
    })
  }
}

Pick UIColor (Example6)

@IBOutlet var colorPicker: NoCutPasteTextField? {
  didSet {
    guard let colorPicker = colorPicker else { return }
    var selectedColor: UIColor?
    colorPicker.inputView = ColorPickerView.init(didSelect: { (color) in
      colorPicker.backgroundColor = color
      selectedColor = color
    }, contains: { (color) in
      return color.isEqual(selectedColor)
    }, height: 250, colorSize: 30)
    // Setting up accessory view
    colorPicker.inputAccessoryView = AccessoryView("Select Color", doneTapped: {
      colorPicker.resignFirstResponder()
    })
  }
}

inputviews's People

Contributors

sag333ar avatar

Stargazers

 avatar

Watchers

 avatar  avatar

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.