- iOS/ iPadOS version 10 or above
- Xcode 11 or above with Swift Package Manager
Use it wisely
Follow the instruction of adding Swift Package Manager by using url to TMB Local Git Repository https://bitbucket.tmbbank.local:7990/scm/one/oneapp-ios-widgets.git
than use version 0.0.14 - Next Major
Follow the step until complete adding package to Project file
iOS Widgets comes with 2 dependency below for now
NO NEED TO ADD to swift package manager
iOS Widgets has been developed to response user’s behaviour by remaining clean but professional. Each of element uses depends on behaviour follow the TMB One Design Guideline. Now it has all these elements below
Inherit From UIButton. Remaining the same functionality and APIs
- PrimaryBigButton: Big rounded square button with logo on top of the title
- PrimaryLargeButton: The biggest mandatory refreshing orange button always use as the main action of each Views
- PrimaryMediumButton: Same like PrimaryLargeButton smaller size but not the smallest one
- PrimarySmallButton: The smallest button in PrimaryButton series
- Drag and Drop UIButton to the UIView than adjust width and height
- Go to Custom Class side view to Override UIButton Class
- Change it to
PrimaryBigButton
PrimaryLargeButton
PrimaryMediumButton
orPrimarySmallButton
- Change Module to
iOSWidgets
- DONE!
**Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh
Inherit From UIButton. Remaining the same functionality and APIs
- SecondaryLargeButton: The biggest secondary button always use as the second action of each Views
- SecondaryMediumButton: Same like SecondaryLargeButton but comes with image icon on the left/ right side of title not yet support
- SecondarySmallButton: The smallest button in SecondaryButton series comes with Image icon same as SecondaryMediumButton
- Drag and Drop UIButton to the UIView than adjust width and height
- Go to Custom Class side view to Override UIButton Class
- Change it to
SecondaryLargeButton
SecondaryMediumButton
orSecondarySmallButton
- Change Module to
iOSWidgets
- DONE!
**Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh
Inherit From UIButton. Remaining the same functionality and APIs but comes with Dark Mode!
- GhostLargeButton: The biggest button with rounded border without background color
- GhostMediumButton: Same like GhostLargeButton but comes with image icon on the left/ right side of title not yet support
- GhostSmallButton: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton
- Drag and Drop UIButton to the UIView than adjust width and height
- Go to Custom Class side view to Override UIButton Class
- Change it to
SecondaryLargeButton
SecondaryMediumButton
orSecondarySmallButton
- Change Module to
iOSWidgets
- DONE!
- Can select Dark Mode from Interface builder or set it via Variable
**Also can create programmatically in Code same as UIButton but beware of constraints of width and heigh
**Dark Mode always use with the hight color density background like Black , Grey or Navy
Series of rounded button support only one selection with horizontal scrollable view. Easy to use Inherit from UIView
func createPill(source: Pills) -> [String]?
func sizeForItem(source: Pills, at index: Int) -> CGSize?
func didSelected(source: Pills, item: String, index: Int)
func didDeselected(source: Pills, item: String, index: Int)
- Drag and Drop UIView to the UIView than adjust width and height
- Go to Custom Class side view to Override UIButton Class
- Change it to
SecondaryLargeButton
SecondaryMediumButton
orSecondarySmallButton
- Change Module to
iOSWidgets
- Link element to ViewController and don’t forget to
import iOSWidgets
- set
source
variable like this
pillsSelection.source = self
- than make View Controller conform
PrimaryPillCategorySourceProtocol
byextension
like this
extension OwnTransferViewController: PrimaryPillCategorySourceProtocol {
func createPill(source: Pills) -> [String]? {
return [Array Of String Items]
}
func sizeForItem(source: Pills, at index: Int) -> CGSize? {
[Size for each items, return nil to dynamic width 30px height]
return CGSize() ?? nil
}
func didSelected(source: Pills, item: String, index: Int) {
///Do something
}
func didDeselected(source: Pills, item: String, index: Int) {
///Do something
}
}
- You can customize the button font and item spacing by set these value
pillsSelection.font = UIFont.system
pillsSelection.spacing = 8.0
pillsSelection.deselectable = true
Inherit From UITextField. Remaining the same functionality and APIs but comes with theses! ps. support only single line
- icon image: set by
.icon: UIImage
- folding Title: set by
.title = "Input Here"
- action item: with
.action() closure
- helping text with icon: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton
- error: support error by throw in the error that conforms
PrimaryError
- counting label: not yet support
- Drag and Drop UIButton to the UIView than adjust width and height
- Go to Custom Class side view to Override UITextField Class
- Change it to
PrimaryTextField
- Change Module to
iOSWidgets
- Set and Design TextField’s attribute including the list above through Xcode Interface Builder
- DONE!
**Also can create programmatically in Code same as UITextField but beware of constraints of width and heigh
Create struct, class or enum that conforms PrimaryError
like this
protocol PrimaryError: Error {
var description: String? { get}
}
create Enum to conforms above by
enum TransferValidationError: PrimaryError {
case amountIsNeeded
case insufficientAmount
case needToAccount
case noteIsTooLonge
<span class="token keyword">var</span> description<span class="token punctuation">:</span> <span class="token builtin">String</span><span class="token operator">?</span> <span class="token punctuation">{</span>
<span class="token keyword">switch</span> <span class="token keyword">self</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token punctuation">.</span>amountIsNeeded<span class="token punctuation">:</span>
<span class="token keyword">return</span> <span class="token string">"Please enter an amount."</span>
<span class="token keyword">case</span> <span class="token punctuation">.</span>insufficientAmount<span class="token punctuation">:</span>
<span class="token keyword">return</span> <span class="token string">"Your account has insufficient funds for this transaction."</span>
<span class="token keyword">case</span> <span class="token punctuation">.</span>needToAccount<span class="token punctuation">:</span>
<span class="token keyword">return</span> <span class="token string">"Please select destination account"</span>
<span class="token keyword">case</span> <span class="token punctuation">.</span>noteIsTooLonge<span class="token punctuation">:</span>
<span class="token keyword">return</span> <span class="token string">"Note is too long"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
That’s it! Now you’re ready…
Inherit From UITextView with the design but Remaining the same functionality and APIs. Support multiple lines with no scrollview but EXTEND THE HEIGHT! and last but not least also support PLACEHOLDERrrrrr
- icon image: set by
.icon: UIImage
- folding Title: set by
.title = "Input Here"
- placeholder: set by
.placeholder = "This is optional"
- action item: with
.action() closure
- helping text with icon: The smallest button in GhostButton series comes with Image icon same as SecondaryMediumButton buggy
- error: support error by throw in the error that conforms
PrimaryError
same as PrimaryTextFields
- counting label: not yet support
- Drag and Drop UIButton to the UIView than adjust width and height
- Go to Custom Class side view to Override UITextView Class
- Change it to
PrimaryTextView
- Change Module to
iOSWidgets
- Set and Design TextField’s attribute including the list above through Xcode Interface Builder
- DONE!
**Also can create programmatically in Code same as UITextView but beware of constraints of width and heigh
ps. PrimaryTextFields
and PrimaryTextView
have the same mother
TTBBaseBlueDesign
TTBBaseWhiteDesign