Attribute inspector properties are the properties allowing the user to change the design of a selected view. In this article, we will list and quickly explain how you can use them to give any view the appearance you want.

To start with, all elements available in Kodika include these Attribute Inspector Categories:

(1.1)

(1.2)

  •  Code (1.1)
  1. Display Name: a text to distinguish the view throughout the view controller. 
  2. Visible In Code: if enabled gives access of the view to the whole project, which means that the view can be used in functions at Editor Code.
  • View (1.1)
  1. Alpha: describes the transparency of the view. Should be given values from 0 to
  2. Background colour: the colour of the view.
  3. Content mode: it used to determine how a view lays out its content when its bounds change.
  4. Tag: a number that can be used to identify the view.
  5. User interaction enabled: indicates whether the user can interact with the view.
  6.  Hidden: if enabled, hides the view.
  7.  Masks to bounds: if enabled, applies a 'mask' to the view.
  • Border (1.2)
  1. Border colour: the colour of the border
  2. Border width: the width of the border.
  3. Corner radius: the radius to use when drawing rounded corners for the layer’s background. For the corner radius to be applied, masks to bounds should be enabled.
  • Shadow (1.2)
  1. Colour: the colour of the shadow.
  2. Blur: the blur radius (in points) used to render the shadow.
  3. Opacity: the opacity of the shadow.
  4. X: the width (in points) of the shadow.
  5. Y: the height (in points) of the shadow.

As mentioned, those categories can be found in every view element. However, each view has its own categories as well. Let's explore them view by view.

Label

  • Label (2.2)

(2.2)

  1. Text: the text displayed by the label.
  2. Text Colour: the colour of the text displayed.
  3.  Font: the font used to display the text.
  4.  Text Alignment: the way in which the text is aligned.
  5.  Number of Lines: the maximum number of lines to use for rendering text.

Button

  • Normal State - Highlighted State - Selected State - Disabled State (3.1-3.2)

(3.1)

(3.2)

  1. Title: the title associated with the specific state.
  2. Title Colour: the title colour used for a state.
  3. Image Asset: the image related to the specific state.
  4. Background Image Asset: the background image associated with the specific state.
  5. Background Colour:  the background colour associated with the specific state.
  • Button (3.3)

(3.3)

  1. Font: the font used to display the title.
  2. Selected: sets the button's selected state.
  3. Shows Touch When Highlighted: if enabled, the button glows when tapped.
  4. Adjusts Image When Disabled: if enabled, the image is drawn darker when the button is disabled.
  5. Adjusts Image When Highlighted: if enabled, the image is drawn lighter when the button is highlighted. 

ImageView

  • ImageView (4.1)

(4.1)

  1. ImageAsset: the image to display

TextField

  • TextField (5.1)

(5.1)

  1. Text: the text displayed by the text field.
  2. Placeholder: the placeholder text displayed by the text field.
  3. Font: the font of the text field’s text.
  4. Text Alignment: the alignment of the text field’s text inside the editing area.
  5. Text Colour: the colour of the text field’s text.

TextView

  • TextView (6.1)

(6.1)

  1. Text: the text displayed by the text view.
  2. Font: the font of the text view’s text.
  3. Text Alignment: the alignment of the text view’s text inside the editing area.
  4. Text Colour: the colour of the text view’s text.

Switch

  • Switch (7.1)

(7.1)

  1. Value: determines the off/on state of the switch.
  2. On Tint Colour: the colour used to tint the appearance of the switch when it is turned on.
  3. Thumb Tint Colour: the colour used to tint the appearance of the thumb.
  4. On image: the image displayed when the switch is in the on position.
  5. Off image: the image displayed when the switch is in the off position.

TableView

(8.1)

  • Separator (8.1)
  1. Colour: the colour of separator rows in the table view.
  2. Separator Style: the style for table cells used as separators.
  3. Right separator inset: the right inset of cell separators.
  4. Left separator inset: the left inset of cell separators.
  • Selection (8.1)
  1. Allows selection: determines whether users can select a row.
  2. Allows multiple selection: determines whether users can select more than one row.

CollectionView

  • CollectionView (9.1)

(9.1)

  1. Scroll direction:  indicates the direction of scrolling for the collection view.
  2. Allow selection: indicates whether users can select items in the collection view.
  3. Allow multiple selection: determines whether users can select more than one item in the collection view.
  4. Minimum interitem spacing: the minimum spacing to use between items in the same row.
  5. Minimum line spacing: the minimum spacing to use between lines of items in the grid.

PickerView

  • PickerView (10.1)

(10.1)

  1. Shows Selection Indicator:  determines whether the selection indicator is displayed.

DatePicker

  • Date Picker (11.1)

(11.1)

  1. DatePicker Mode: the mode of the date picker.
  2. Date: the date displayed by the date picker.
  3. Maximum date: the maximum date that a date picker can show.
  4. Minimum date: the minimum date that a date picker can show.
  5. Minute Interval: the interval at which the date picker should display minutes.

ActivityIndicatorView

  • ActivityIndicatorView (12.1)

(12.1)

  1. Indicator Style: the basic appearance of the activity indicator.
  2. Hides when stopped: controls whether the receiver is hidden when the animation is stopped.
  3. Colour: the colour of the activity indicator.

SegmentedControl

  • Segmented behavior and appearance (13.1)

(13.1)

  1. Number of segments: how many segments are displayed.
  2. Selected index: the index number identifying the selected segment (that is, the last segment touched).
  3. Tint colour: the tint colour to apply to key elements in the segmented control.
  4. Is momentary: determines whether segments in the receiver show selected state.
  5. Apportions Segments Widths By Content: indicates whether the control attempts to adjust segment widths based on their content widths.
  • Segment (number) (13.2)

(13.2)

  1. Title: the title of the segmentI
  2. Image: the image of the segment.
  3. Segment width: the width of the segment.
  4. Content offset height: the height offset for drawing the content (image or text) of the segment.
  5. Content offset width: the width offset for drawing the content (image or text) of the segment.

SearchBar

(14.1)

(14.2)

  • Text Content (14.1)
  1. Placeholder: the string that is displayed when there is no other text in the text field.
  2. Prompt: a single line of text displayed at the top of the search bar.
  3. Text:  the current or starting search text.
  •  Display Attributes (14.1)
  1. Bar Style:  specifies the search bar’s appearance.
  2. Bar tint colour: colour to apply to the search bar background.
  3. SearchBar Style: specifies the search bar’s appearance.
  4. Tint colour: colour to apply to key elements in the search bar.
  5. Translucent: indicates whether the search bar is translucent or not.
  •  Button Configuration (14.2)
  1. Shows Bookmark Button: indicates whether the bookmark button is displayed.
  2. Shows Cancel Button: indicates whether the cancel button is displayed.
  3. Shows Search Results Button: indicates whether the search results button is displayed.
  4. Search Results Button Selected: indicates whether the search results button is selected.

ScrollView

(15.1)

(15.2)

  • Scroll View (15.1)
  1. Is Scroll Enabled: determines whether scrolling is enabled.
  2. Is Directional Lock Enabled: determines whether scrolling is disabled in a particular direction.
  3. Is Paging Enabled: determines whether paging is enabled for the scroll view.
  4. Scrolls To Top: controls whether the scroll-to-top gesture is enabled.
  5. Bounces: controls whether the scroll view bounces past the edge of content and back again.
  6. Always Bounce Vertical: determines whether bouncing always occurs when vertical scrolling reaches the end of the content.
  7. Always Bounce Horizontal: determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.
  •  Scroll Indicator (15.2)
  1. Indicator Style: the style of the scroll indicators.
  2. Shows Horizontal Scroll Indicator: controls whether the horizontal scroll indicator is visible.
  3. Shows Vertical Scroll Indicator: controls whether the vertical scroll indicator is visible.

StackView

  • StackView (16.1)

(16.1)

  1. Alignment: the alignment of the arranged subviews perpendicular to the stack view’s axis.
  2. Axis: the axis along which the arranged views are laid out.
  3. Distribution: the distribution of the arranged views along the stack view’s axis.
  4. Spacing: the distance in points between the adjacent edges of the stack view’s arranged views.
Did this answer your question?