Segment Controller

Segment Controller

Download PDF

Segment Controller

A segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button. Segmented controls allow users to interact with a compact group of a number of controls. This is restricted to iOS only.


Configure.IT brings you this control with all the flexibilty to design as per your requirement. You can add images or name the segments along with assigning different colour to different segments. Configure.IT lets you have as much as 8 segments.

    Keywords:
  • segmentation
  • segment control iOS
  • segment control Android
  • segment codeigniter

Properties

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a control.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a control.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which the Segment Controller which is in its normal state, has to be rotated. Possible values for this property are -360 to 360.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Segment Controller.

    YPos

    Sets the Y position of the Segment Controller.

    Width

    Sets the width of the Segment Controller.

    Height

    Sets the height of the Segment Controller.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Object Parent ID

    Set "Object ID" of Segment Controller which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value define the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s)

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Selected Background Image

    Used to set the background image for the selected segment.

    UnSelected Background Image

    Used to set the background image for the segments that are not selected.

    Divider Image

    Sets the image for the divider between the two segments.

    Selected Font Name

    Select the Font for the segment from the wide library of Font Family, further divided into System Font and Custom Font.

    Selected Font Size

    Sets the size of the selected Font.

    UnSelected Font Name

    Sets the Font from the wide library of Font Family for the segment not selected, further divided into System Font and Custom Font.

    UnSelected Font Size

    Sets the size for the Font, not selected.

    UnSelected Background Color

    Used to set the background color for the segments that are not selected.

    Selected Background Color

    Used to set the background color for the selected segment.

    Selected Font Color

    Set the color of the Font for the selected segment.

    UnSelected Font Color

    Set the color of the Font for the segment, not selected.

  • Display
    PARAMETER
    DESCRIPTION
    Number Of Segments

    Choose the number of segments as per your requirement. The maximum number of segments can be 8.

    Segment No.

    Select the segment that you wish to configure.

    Segment Title

    This property enables you to assign a name/title to the segment.

    Segment Image

    An image can be set for the segment as well.

    Segment Widths

    Sets the width of the control.

    Selected
    The index number identifying the selected segment (that is, the last segment touched).
    Segment Enabled States

    Enables the specified segment state.

    User Interaction Enabled

    Enables the Interaction with user, i.e. control responds when user taps on it.

    Alpha

    Used to set the transparency to the object which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Segment Controller.

    Tint Color

    Sets tint color for Segment Controller.

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advacne - Sets auto resizing with respect to superview, for Segment Controller.

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Vertical

    Group of vertical android default properties.

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

  • Advanced
    PARAMETER
    DESCRIPTION
    Segment Content Offset Top

    This property lets you to insert the space from the top.

    Segment Content Offset Left

    This property lets you to insert the space from the left.

Actions

  • Load

    This event is triggered on load of a control. Further, the desired Action can be defined as per the requirement.

  • Value Changed

    The changed event is sent to an element when its value changes.

Remarks

  • Configuring segments

    You have to set title and(or) image for each segment individually. For this select segment from “Segment No.” property dropdown (which has segments from 1 to n where n is number of segments of segment controller) and then set “Segment Title” and “Segment Image” properties for that particular segment.

  • Configuring actions when a segment is selected

    Whenever user selects a segment “Value Changed” event of segment controller will be fired. So you need to configure action(s) in “Value Changed” event under “ACTION(S)” tab of segment controller. For configuring actions for each segment individually you need to check condition in “CONDITION(S)” tab, select “Response” from “Operand1” dropdown, enter "selectedSegmentIndex" in “Value” Other field, select “equals” from “Operator” dropdown, “Static” from “Operand2” dropdown and then enter segment number in “Value” field. Configure actions for respective condition in “ACTION(S)” tab.