What is a Styler?
A styler wraps around a view, augmenting it with styling power and sugar.
Each UIView subclass can have its own styler (many exist in RMQ, but not all yet). There is a UIViewStyler class they all inherit from, and a UIControlStyler controls inherit from. Much of the code is in UIViewStyler.
When you create a "style method", it will be passed the view, wrapped in a styler. You can get the view using st.view.
You can see a list of styler methods using: rmq.log_stylers
List of stylers, their methods, and some examples
UIViewStyler
All stylers inherit UIViewStyler, so these are available in any view.
- absolute_frame=(value)
- accessibility_label=(value)
- alpha
- alpha=(value)
- background_color
- background_color=(value)
- background_gradient=(value)
- background_image=(value)
- border=(value)
- border_color
- border_color=(value)
- border_width
- border_width=(value)
- bounds
- bounds=(value)
- center
- center=(value)
- center_x
- center_x=(value)
- center_y
- center_y=(value)
- centered=(value)
- clips_to_bounds
- clips_to_bounds=(value)
- content_mode
- content_mode=(value)
- copyWithZone
- corner_radius
- corner_radius=(value)
- corner_radius=(value)
- enabled
- enabled=(value)
- frame
- frame=(value)
- get
- hidden
- hidden=(value)
- layer
- masks_to_bounds
- masks_to_bounds=(value)
- opacity
- opacity=(value)
- opaque
- opaque=(value)
- parent
- prev_frame
- prev_view
- right
- right=(value)
- rotation=(value)
- scale=(value)
- shadow_color
- shadow_color=(value)
- shadow_offset
- shadow_offset=(value)
- shadow_opacity
- shadow_opacity=(value)
- shadow_path
- shadow_path=(value)
- super_height
- super_width
- superview
- tag
- tint_color
- tint_color=(value)
- transform
- transform=(value)
- user_interaction_enabled
- user_interaction_enabled=(value)
- validation_errors=(value)
- view
- view=(value)
- view_has_been_styled?
- z_position
- z_position=(value)
st.frame = {l: 1, t: 2, w: 3, h: 4}
st.frame = {left: 1, top: 2, width: 3, height: 4}
st.frame = {from_right: 1, from_bottom: 2, width: 3, height: 4}
st.frame = {fr: 1, fb: 2, w: 3, h: 4}
st.center = st.superview.center
st.center_x = 50
st.center_y = 60
st.enabled = true
st.hidden = false
st.z_position = 66
st.opaque = false
st.clips_to_bounds = false
st.hidden = true
st.content_mode = UIViewContentModeBottomLeft
st.background_color = color.red
st.scale = 1.5
st.rotation = 45
st.tint_color = color.blue
st.layer.cornerRadius = 5
UIControlStyler
All UIControl stylers, like a UIButton, inherit from UIControlStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- selected
- selected=(value)
- state
st.content_vertical_alignment = UIControlContentVerticalAlignmentFill
st.content_horizontal_alignment = UIControlContentHorizontalAlignmentFill
st.selected = true
st.highlighted = true
UIActivityIndicatorViewStyler
- activity_indicator_style
- activity_indicator_style=(value)
- animating?
- color
- color=(value)
- hides_when_stopped
- hides_when_stopped=(value)
- is_animating?
- start
- start_animating
- stop
- stop_animating
UIButtonStyler
- adjust_image_when_highlighted
- adjust_image_when_highlighted=(value)
- attributed_text
- attributed_text=(value)
- attributed_text_highlighted
- attributed_text_highlighted=(value)
- background_image
- background_image_highlighted
- background_image_highlighted=(value)
- background_image_normal
- background_image_normal=(value)
- background_image_selected
- background_image_selected=(value)
- color
- color=(value)
- color_highlighted
- color_highlighted=(value)
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- font
- font=(value)
- highlighted
- highlighted=(value)
- image
- image=(value)
- image_edge_insets
- image_edge_insets=(value)
- image_highlighted
- image_highlighted=(value)
- image_normal
- image_normal=(value)
- selected
- selected=(value)
- state
- text
- text=(value)
- text_highlighted
- text_highlighted=(value)
- title_edge_insets
- title_edge_insets=(value)
st.text = 'foo'
st.font = font.system(12)
st.color = color.red
st.image_normal = image.resource('logo')
st.image_highlighted = image.resource('logo')
UIDatePickerStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- date_picker_mode
- date_picker_mode=(value)
- highlighted
- highlighted=(value)
- selected
- selected=(value)
- state
UIImageViewStyler
- image
- image=(value)
st.image = image.resource('logo')
UILabelStyler
- adjusts_font_size
- adjusts_font_size=(value)
- adjusts_font_size_to_fit_width
- adjusts_font_size_to_fit_width=(value)
- attributed_text
- attributed_text=(value)
- color
- color=(value)
- font
- font=(value)
- line_break_mode
- line_break_mode=(value)
- number_of_lines
- number_of_lines=(value)
- resize_height_to_fit
- resize_to_fit_text
- size_to_fit
- text
- text=(value)
- text_align
- text_align=(value)
- text_alignment
- text_alignment=(value)
- text_color
- text_color=(value)
st.text = 'rmq is awesome'
st.font = font.system(12)
st.color = color.black
st.text_alignment = :center
st.resize_to_fit_text
st.size_to_fit
UINavigationBarStyler
UIPageControlStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- current_page
- current_page=(value)
- current_page_indicator_tint_color
- current_page_indicator_tint_color=(value)
- highlighted
- highlighted=(value)
- number_of_pages
- number_of_pages=(value)
- page_indicator_tint_color
- page_indicator_tint_color=(value)
- selected
- selected=(value)
- state
UIProgressViewStyler
- progress_image
- progress_image=(value)
- progress_tint_color
- progress_tint_color=(value)
- progress_view_style
- progress_view_style=(value)
- track_image
- track_image=(value)
- track_tint_color
- track_tint_color=(value)
UIRefreshControlStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- selected
- selected=(value)
- state
UIScrollViewStyler
- bounces
- bounces=(value)
- content_inset
- content_inset=(value)
- content_offset
- content_offset=(value)
- content_size
- content_size=(value)
- direction_lock
- direction_lock=(value)
- indicator_style
- indicator_style=(value)
- paging
- paging=(value)
- scroll_enabled
- scroll_enabled=(value)
- scroll_indicator_insets
- scroll_indicator_insets=(value)
- shows_horizontal_scroll_indicator
- shows_horizontal_scroll_indicator=(value)
- shows_vertical_scroll_indicator
- shows_vertical_scroll_indicator=(value)
st.paging = true
st.scroll_enabled = true
st.direction_lock = false
st.content_offset = CGPointMake(5, 10)
st.content_inset = CGPointMake(-100, 0)
st.bounces = false
st.content_size = CGSizeMake(320, 500)
st.shows_horizontal_scroll_indicator = true
st.shows_vertical_scroll_indicator = false
st.scroll_indicator_insets = UIEdgeInsetsMake (10, 0, 20, 0)
UISegmentedControlStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- prepend_segments=(value)
- selected
- selected=(value)
- state
- unshift=(value)
UISliderStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- selected
- selected=(value)
- state
UIStepperStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- selected
- selected=(value)
- state
UISwitchStyler
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- highlighted
- highlighted=(value)
- on
- on=(value)
- selected
- selected=(value)
- state
st.on = true
UITabBarStyler
UITableViewCellStyler
- accessory_type
- accessory_type=(value)
- accessory_view
- accessory_view=(value)
- color
- color=(value)
- detail_color
- detail_color=(value)
- detail_font
- detail_font=(value)
- detail_text_color
- detail_text_color=(value)
- font
- font=(value)
- selection_style
- selection_style=(value)
- separator_inset
- separator_inset=(value)
- text_color
- text_color=(value)
UITableViewStyler
- allows_selection
- allows_selection=(value)
- background_image
- bounces
- bounces=(value)
- content_inset
- content_inset=(value)
- content_offset
- content_offset=(value)
- content_size
- content_size=(value)
- direction_lock
- direction_lock=(value)
- indicator_style
- indicator_style=(value)
- paging
- paging=(value)
- row_height=(value)
- scroll_enabled
- scroll_enabled=(value)
- scroll_indicator_insets
- scroll_indicator_insets=(value)
- separator_color
- separator_color=(value)
- separator_inset=(value)
- separator_style
- separator_style=(value)
- shows_horizontal_scroll_indicator
- shows_horizontal_scroll_indicator=(value)
- shows_vertical_scroll_indicator
- shows_vertical_scroll_indicator=(value)
UITextFieldStyler
- adjusts_font_size
- adjusts_font_size=(value)
- adjusts_font_size_to_fit_width
- adjusts_font_size_to_fit_width=(value)
- allows_editing_text_attributes
- allows_editing_text_attributes=(value)
- attributed_placeholder
- attributed_placeholder=(value)
- attributed_text
- attributed_text=(value)
- autocapitalization_type
- autocapitalization_type=(value)
- autocorrection_type
- autocorrection_type=(value)
- background
- background=(value)
- border_style
- border_style=(value)
- clear_button_mode
- clear_button_mode=(value)
- clears_on_begin_editing
- clears_on_begin_editing=(value)
- clears_on_insertion
- clears_on_insertion=(value)
- color
- color=(value)
- content_horizontal_alignment
- content_horizontal_alignment=(value)
- content_vertical_alignment
- content_vertical_alignment=(value)
- default_text_attributes
- default_text_attributes=(value)
- disabled_background
- disabled_background=(value)
- editing
- editing=(value)
- enables_return_key_automatically
- enables_return_key_automatically=(value)
- font
- font=(value)
- highlighted
- highlighted=(value)
- keyboard_appearance
- keyboard_appearance=(value)
- keyboard_type
- keyboard_type=(value)
- left_view
- left_view=(value)
- left_view_mode
- left_view_mode=(value)
- minimum_font_size
- minimum_font_size=(value)
- placeholder
- placeholder=(value)
- return_key_type
- return_key_type=(value)
- right_view
- right_view=(value)
- right_view_mode
- right_view_mode=(value)
- secure_text_entry
- secure_text_entry=(value)
- selected
- selected=(value)
- spell_checking_type
- spell_checking_type=(value)
- state
- text
- text=(value)
- text_alignment
- text_alignment=(value)
- text_color
- text_color=(value)
- typing_attributes
- typing_attributes=(value)
UITextViewStyler
- attributed_text
- attributed_text=(value)
- bounces
- bounces=(value)
- color
- color=(value)
- content_inset
- content_inset=(value)
- content_offset
- content_offset=(value)
- content_size
- content_size=(value)
- data_detector_types
- data_detector_types=(value)
- direction_lock
- direction_lock=(value)
- editable
- editable=(value)
- font
- font=(value)
- indicator_style
- indicator_style=(value)
- paging
- paging=(value)
- scroll_enabled
- scroll_enabled=(value)
- scroll_indicator_insets
- scroll_indicator_insets=(value)
- selectable
- selectable=(value)
- shows_horizontal_scroll_indicator
- shows_horizontal_scroll_indicator=(value)
- shows_vertical_scroll_indicator
- shows_vertical_scroll_indicator=(value)
- text
- text=(value)
- text_alignment
- text_alignment=(value)
- text_color
- text_color=(value)
st.frame = {l: 1, t: 2, w: 3, h: 4}
st.frame = {left: 1, top: 2, width: 3, height: 4}
st.frame = {from_right: 1, from_bottom: 2, width: 3, height: 4}
st.frame = {fr: 1, fb: 2, w: 3, h: 4}
st.center = st.superview.center
st.center_x = 50
st.center_y = 60
st.enabled = true
st.hidden = false
st.z_position = 66
st.opaque = false
st.clips_to_bounds = false
st.hidden = true
st.content_mode = UIViewContentModeBottomLeft
st.background_color = color.red
st.scale = 1.5
st.rotation = 45
st.tint_color = color.blue
st.layer.cornerRadius = 5
UIControlStyler
st.content_vertical_alignment = UIControlContentVerticalAlignmentFill
st.content_horizontal_alignment = UIControlContentHorizontalAlignmentFill
st.selected = true
st.highlighted = true
UILabelStyler
st.text = 'rmq is awesome'
st.font = font.system(12)
st.color = color.black
st.text_alignment = :center
st.resize_to_fit_text
st.size_to_fit
UIButtonStyler
st.text = 'foo'
st.font = font.system(12)
st.color = color.red
st.image_normal = image.resource('logo')
st.image_highlighted = image.resource('logo')
UIImageViewStyler
st.image = image.resource('logo')
UIScrollViewStyler
st.paging = true
st.scroll_enabled = true
st.direction_lock = false
st.content_offset = CGPointMake(5, 10)
st.content_inset = CGPointMake(-100, 0)
st.bounces = false
st.content_size = CGSizeMake(320, 500)
st.shows_horizontal_scroll_indicator = true
st.shows_vertical_scroll_indicator = false
st.scroll_indicator_insets = UIEdgeInsetsMake (10, 0, 20, 0)
UISwitchStyler
- on=(value)
st.on = true
Adding your own styler
In the example app, look in /app/stylers, you can just copy that whole folder to start. Then add methods to the appropriate class.
Here is an example of adding a method to all stylers:
module RubyMotionQuery
module Stylers
class UIViewStyler
def border_width=(value)
@view.layer.borderWidth = value
end
def border_width
@view.layer.borderWidth
end
end
end
end
You can also include all of your custom stylers in one file, which works well if you don't have a lot.