Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 7, 2021. It is now read-only.

Segmented Control / Switch Field (#544) #545

Merged
3lvis merged 3 commits into from
Oct 18, 2016
Merged

Segmented Control / Switch Field (#544) #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a8f7d8
Segmented Control / Switch Field (#544)
jeffleeismyhero Oct 18, 2016
518d3d6
Update project
3lvis Oct 18, 2016
e56a5bd
Remove the need for setting the value on the segmented field
3lvis Oct 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 44 additions & 15 deletions Demo.xcodeproj/project.pbxproj
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Demo.xcodeproj/xcshareddata/xcschemes/Tests.xcscheme
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0700"
LastUpgradeVersion = "0800"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
Expand Down
51 changes: 50 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Form came out from our need to have a form that could share logic between our iO
Form includes the following features:

- Multiple groups: For example, you can have a group for personal details and another one for shipping information
- [Field validations](https://github.com/hyperoslo/Form/blob/d426e7b090fee7a630d1208b87c63a85b6aaf5df/Demos/Basic-ObjC/Basic-ObjC/Assets/forms.json#L19): We support `required`, `max_length`, `min_length`, `min_value`, `max_value` and `format` (regex). We also support many field types, like `text`, `number`, `phone_number`, `email`, `date`, `name`, `count` and more
- [Field validations](https://github.com/hyperoslo/Form/blob/d426e7b090fee7a630d1208b87c63a85b6aaf5df/Demos/Basic-ObjC/Basic-ObjC/Assets/forms.json#L19): We support `required`, `max_length`, `min_length`, `min_value`, `max_value` and `format` (regex). We also support many field types, like `text`, `number`, `phone_number`, `email`, `date`, `name`, `count`, `segment` and more
- [Custom sizes](https://github.com/hyperoslo/Form/blob/d426e7b090fee7a630d1208b87c63a85b6aaf5df/Demos/Basic-ObjC/Basic-ObjC/Assets/forms.json#L15): Total `width` is handled as 100% while `height` is handled in chunks of [85 px](https://github.com/hyperoslo/Form/blob/b1a542d042a45a9a3056fb8969b5704e51fda1f4/Source/Cells/Base/FORMBaseFieldCell.h#L15)
- [Custom fields](https://github.com/hyperoslo/Form/blob/d426e7b090fee7a630d1208b87c63a85b6aaf5df/Demos/Basic-ObjC/Basic-ObjC/Assets/forms.json#L78): You can register your custom fields, and it's pretty simple (our basic example includes how to make an `image` field)
- [Formulas or computed values](https://github.com/hyperoslo/Form/blob/d426e7b090fee7a630d1208b87c63a85b6aaf5df/Demos/Basic-ObjC/Basic-ObjC/Assets/forms.json#L47): We support fields that contain generated values from other fields
Expand Down Expand Up @@ -198,6 +198,55 @@ To make quick and easy integer adjustments without popping up a keyboard, you ca
}
```

### Segment Fields

Segment fields can be used in place of text or select fields where the options are known and limited. Since segment fields do not require multiple taps or keyboard entry, data can be recorded quickly and easily with a single click. The `segment` field type allows for multiple values like the `select` field type and supports many of the same attributes.

#### Example JSON
```json
{
"groups":[
{
"id":"group1",
"title":"Segment Example",
"sections":[
{
"id":"section1",
"fields":[
{
"id":"location",
"title":"Work Location",
"type":"segment",
"styles":{
"font":"AvenirNext-DemiBold",
"font_size":"16.0",
"tint_color":"#CBEDBF"
},
"values":[
{
"id":"in_house",
"title":"In-house",
"info":"In-house employee",
"default":true,
},
{
"id":"remote",
"title":"Remote",
}
],
"size":{
"width":50,
"height":1
}
}
]
}
]
}
]
}
```

### Accessibility Labels

Accessibility labels are used by VoiceOver on iOS to provide feedback to users with visual impairments. According to Apple, the accessibility label attribute is "a short, localized word or phrase that succinctly describes the control or view, but does not identify the element's type. Examples are 'Add' or 'Play.'"
Expand Down
126 changes: 78 additions & 48 deletions STYLING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,57 @@

Form allows global and per-field styling. The table below shows the per-field styling options.

| Target | Description | JSON Key | Value Type | Example (Default) |
| :--------------- | :---------------------------- | :----------------------------- | :--------- | :----------------------------------------- |
| **Groups** | Background Color | `background_color` | `Hex` | `"background_color":"#FFFFFF"` |
| | Header Text Color | `text_color` | `Hex` | `"text_color":"#455C73"` |
| | Font | `font` | `String` | `"font":"AvenirNext-Medium"` |
| | Font Size | `font_size` | `Float` | `"font_size":"17.0"` |
| --- | | | | |
| **Sections** | Separator Color | `separator_color` | `Hex` | `"separator_color":"#C6C6C6"` |
| --- | | | | |
| **Buttons** | Background Color | `background_color` | `Hex` | `"background_color":"#3DAFEB"` |
| | Highlighted Background Color | `highlighted_background_color` | `Hex` | `"highlighted_background_color":"#FFFFFF"` |
| | Title Color | `title_color` | `Hex` | `"title_color":"#FFFFFF"` |
| | Highlighted Title Color | `highlighted_title_color` | `Hex` | `"highlighted_title_color":"#3DAFEB"` |
| | Border Color | `border_color` | `Hex` | `"border_color":"#3DAFEB"` |
| | Corner Radius | `corner_radius` | `Float` | `"corner_radius":"5.0"` |
| | Border Width | `border_width` | `Float` | `"border_width":"1.0"` |
| | Font | `font` | `String` | `"font":"AvenirNext-DemiBold"` |
| | Font Size | `font_size` | `Float` | `"font_size":"16.0"` |
| --- | | | | |
| **Text Fields** | Font | `font` | `String` | `"font":"AvenirNext-Regular"` |
| | Font Size | `font_size` | `Float` | `"font_size":"15.0"` |
| | Corner Radius | `corner_radius` | `Float` | `"corner_radius":"5.0"` |
| | Border Width | `border_width` | `Float` | `"border_width":"1.0"` |
| | Active Background Color | `active_background_color` | `Hex` | `"active_background_color":"#C0EAFF"` |
| | Active Border Color | `active_border_color` | `Hex` | `"active_border_color":"#3DAFEB"` |
| | Inactive Background Color | `inactive_background_color` | `Hex` | `"inactive_background_color":"#E1F5FF"` |
| | Inactive Border Color | `inactive_border_color` | `Hex` | `"inactive_border_color":"#3DAFEB"` |
| | Enabled Background Color | `enabled_background_color` | `Hex` | `"enabled_background_color":"#E1F5FF"` |
| | Enabled Border Color | `enabled_border_color` | `Hex` | `"enabled_border_color":"#3DAFEB"` |
| | Enabled Text Color | `enabled_text_color` | `Hex` | `"enabled_text_color":"#455C73"` |
| | Disabled Background Color | `disabled_background_color` | `Hex` | `"disabled_background_color":"#F5F5F8"` |
| | Disabled Border Color | `disabled_border_color` | `Hex` | `"disabled_border_color":"#DEDEDE"` |
| | Disabled Text Color | `disabled_text_color` | `Hex` | `"disabled_text_color":"#808080"` |
| | Valid Background Color | `valid_background_color` | `Hex` | `"valid_background_color":"#E1F5FF"` |
| | Valid Border Color | `valid_border_color` | `Hex` | `"valid_border_color":"#3DAFEB"` |
| | Invalid Background Color | `invalid_background_color` | `Hex` | `"invalid_background_color":"#FFD7D7"` |
| | Invalid Border Color | `invalid_border_color` | `Hex` | `"invalid_border_color":"#EC3031"` |
| | Tooltip Font | `tooltip_font` | `String` | `"tooltip_font":"AvenirNext-Medium"` |
| | Tooltip Font Size | `tooltip_font_size` | `Float` | `"tooltip_font_size":"14.0"` |
| | Tooltip Label Text Color | `tooltip_label_text_color` | `Hex` | `"tooltip_label_text_color":"#97591D"` |
| (not functional) | Tooltip Background Color | `tooltip_background_color` | `Hex` | `"tooltip_background_color":"#FDFD54"` |
| | Clear Button Color | `clear_button_color` | `Hex` | `"clear_button_color":"#3DAFEB"` |
| | Minus Button Color | `minus_button_color` | `Hex` | `"minus_button_color":"#3DAFEB"` |
| | Plus Button Color | `plus_button_color` | `Hex` | `"plus_button_color":"#3DAFEB"` |
| **Field Labels** | Heading Label Font | `heading_label_font` | `String` | `"heading_label_font":"AvenirNext-Medium"` |
| | Heading Label Font Size | `heading_label_font_size` | `Float` | `"heading_label_font_size":"17.0"` |
| | Heading Label Text Color | `heading_label_text_color` | `Hex` | `"heading_label_text_color":"#455C73"` |
| Target | Description | JSON Key | Value Type | Example (Default) |
| :----------------- | :---------------------------- | :----------------------------- | :--------- | :----------------------------------------- |
| **Groups** | Background Color | `background_color` | `Hex` | `"background_color":"#FFFFFF"` |
| | Header Text Color | `text_color` | `Hex` | `"text_color":"#455C73"` |
| | Font | `font` | `String` | `"font":"AvenirNext-Medium"` |
| | Font Size | `font_size` | `Float` | `"font_size":"17.0"` |
| --- | | | | |
| **Sections** | Separator Color | `separator_color` | `Hex` | `"separator_color":"#C6C6C6"` |
| --- | | | | |
| **Buttons** | Background Color | `background_color` | `Hex` | `"background_color":"#3DAFEB"` |
| | Highlighted Background Color | `highlighted_background_color` | `Hex` | `"highlighted_background_color":"#FFFFFF"` |
| | Title Color | `title_color` | `Hex` | `"title_color":"#FFFFFF"` |
| | Highlighted Title Color | `highlighted_title_color` | `Hex` | `"highlighted_title_color":"#3DAFEB"` |
| | Border Color | `border_color` | `Hex` | `"border_color":"#3DAFEB"` |
| | Corner Radius | `corner_radius` | `Float` | `"corner_radius":"5.0"` |
| | Border Width | `border_width` | `Float` | `"border_width":"1.0"` |
| | Font | `font` | `String` | `"font":"AvenirNext-DemiBold"` |
| | Font Size | `font_size` | `Float` | `"font_size":"16.0"` |
| --- | | | | |
| **Text Fields** | Font | `font` | `String` | `"font":"AvenirNext-Regular"` |
| | Font Size | `font_size` | `Float` | `"font_size":"15.0"` |
| | Corner Radius | `corner_radius` | `Float` | `"corner_radius":"5.0"` |
| | Border Width | `border_width` | `Float` | `"border_width":"1.0"` |
| | Active Background Color | `active_background_color` | `Hex` | `"active_background_color":"#C0EAFF"` |
| | Active Border Color | `active_border_color` | `Hex` | `"active_border_color":"#3DAFEB"` |
| | Inactive Background Color | `inactive_background_color` | `Hex` | `"inactive_background_color":"#E1F5FF"` |
| | Inactive Border Color | `inactive_border_color` | `Hex` | `"inactive_border_color":"#3DAFEB"` |
| | Enabled Background Color | `enabled_background_color` | `Hex` | `"enabled_background_color":"#E1F5FF"` |
| | Enabled Border Color | `enabled_border_color` | `Hex` | `"enabled_border_color":"#3DAFEB"` |
| | Enabled Text Color | `enabled_text_color` | `Hex` | `"enabled_text_color":"#455C73"` |
| | Disabled Background Color | `disabled_background_color` | `Hex` | `"disabled_background_color":"#F5F5F8"` |
| | Disabled Border Color | `disabled_border_color` | `Hex` | `"disabled_border_color":"#DEDEDE"` |
| | Disabled Text Color | `disabled_text_color` | `Hex` | `"disabled_text_color":"#808080"` |
| | Valid Background Color | `valid_background_color` | `Hex` | `"valid_background_color":"#E1F5FF"` |
| | Valid Border Color | `valid_border_color` | `Hex` | `"valid_border_color":"#3DAFEB"` |
| | Invalid Background Color | `invalid_background_color` | `Hex` | `"invalid_background_color":"#FFD7D7"` |
| | Invalid Border Color | `invalid_border_color` | `Hex` | `"invalid_border_color":"#EC3031"` |
| | Tooltip Font | `tooltip_font` | `String` | `"tooltip_font":"AvenirNext-Medium"` |
| | Tooltip Font Size | `tooltip_font_size` | `Float` | `"tooltip_font_size":"14.0"` |
| | Tooltip Label Text Color | `tooltip_label_text_color` | `Hex` | `"tooltip_label_text_color":"#97591D"` |
| (not functional) | Tooltip Background Color | `tooltip_background_color` | `Hex` | `"tooltip_background_color":"#FDFD54"` |
| | Clear Button Color | `clear_button_color` | `Hex` | `"clear_button_color":"#3DAFEB"` |
| | Minus Button Color | `minus_button_color` | `Hex` | `"minus_button_color":"#3DAFEB"` |
| | Plus Button Color | `plus_button_color` | `Hex` | `"plus_button_color":"#3DAFEB"` |
| **Field Labels** | Heading Label Font | `heading_label_font` | `String` | `"heading_label_font":"AvenirNext-Medium"` |
| | Heading Label Font Size | `heading_label_font_size` | `Float` | `"heading_label_font_size":"17.0"` |
| | Heading Label Text Color | `heading_label_text_color` | `Hex` | `"heading_label_text_color":"#455C73"` |
| --- | | | | |
| **Segment Fields** | Font | `font` | `String` | `"font":"AvenirNext-DemiBold"` |
| | Font Size | `font_size` | `Float` | `"font_size":"15.0"` |
| | Tint Color | `tint_color` | `Hex` | `"tint_color":"#E1F5FF"` |

#### Style JSON
```json
Expand Down Expand Up @@ -146,7 +150,33 @@ Form allows global and per-field styling. The table below shows the per-field st
"required":true,
"min_length":2
}
}
},
{
"id":"location",
"title":"Work Location",
"type":"segment",
"styles":{
"font":"AvenirNext-DemiBold",
"font_size":"15.0",
"tint_color":"#CBEDBF"
},
"values":[
{
"id":"in_house",
"title":"In-house",
"info":"In-house employee",
"default":true,
},
{
"id":"remote",
"title":"Remote",
}
],
"size":{
"width":50,
"height":1
}
},
]
},
{
Expand Down
13 changes: 13 additions & 0 deletions Source/Cells/Switch/FORMSegmentFieldCell.h
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import UIKit;

#import "FORMBaseFieldCell.h"

static NSString * const FORMSegmentFieldCellIdentifier = @"FORMSegmentFieldCellIdentifier";

@interface FORMSegmentFieldCell : FORMBaseFieldCell

- (void)setLabelFont:(UIFont *)labelFont UI_APPEARANCE_SELECTOR;
- (void)setTintColor:(UIColor *)tintColor UI_APPEARANCE_SELECTOR;
- (void)setBackgroundColor:(UIColor *)backgroundColor UI_APPEARANCE_SELECTOR;

@end
Loading