Skip to content

Commit

Permalink
Segmented Control / Switch Field (3lvis#544) (3lvis#545)
Browse files Browse the repository at this point in the history 
* Segmented Control / Switch Field (3lvis#544)

* Add support for Accessibility Labels on text field

* Add accessibility label support to other fields

This also sets the accessibility value for date, time, and select fields to the selected value. Text fields automatically behave this way.

* Add documentation for Accessibility Labels

* Correct Markdown syntax for links

* Add UISegmentedControl support

* Add tests for Segment Control

* Update README and STYLING documents for Segments

* Update project

* Remove the need for setting the value on the segmented field
  • Loading branch information
@3lvis
3lvis committed Oct 18, 2016
1 parent 5a5651e commit 993bc0c
Show file tree
Hide file tree
Showing 15 changed files with 449 additions and 66 deletions.
59 changes: 44 additions & 15 deletions Demo.xcodeproj/project.pbxproj
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Demo.xcodeproj/xcshareddata/xcschemes/Tests.xcscheme
View file
@@ -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
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
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
@@ -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

0 comments on commit 993bc0c

Please sign in to comment.