(Rubymotion) How can I do this custom view in Formotion? - ios

Question

I am struggling at the moment to make a custom Form with Formotion(Also I'm very new in Rubymotion). Maybe I have to try another framework or maybe not doing any framework at all....
I try to make this:
At this moment I created this in Formotion:
The problem is the Border between password and email. It has to start under the text field and not under the icon. It is a small change but I don't know how to do this with Formotion. Are those kind of things easy possible? Thanks in advanced!
Here is my code:
class LoginScreen < PM::FormotionScreen
title ""
def table_data
{
sections: [
{
title: "Login",
rows: [
{
title: "Email",
key: :email,
type: :email,
placeholder: "me#mail.com",
auto_correction: :no,
auto_capitalization: :none,
text_alignment: UITextAlignmentLeft
}, {
title: "Password",
key: :password,
type: :password,
placeholder: "required",
secure: true,
text_alignment: UITextAlignmentLeft
}
]
}
]
}
end
end
I overwritten the EmailRow to insert the icon
motion_require 'string_row'
module Formotion
module RowType
class EmailRow < StringRow
def build_cell(cell)
cell.selectionStyle = self.row.selection_style || UITableViewCellSelectionStyleBlue
field = UITextField.alloc.initWithFrame(CGRectZero)
field.tag = TEXT_FIELD_TAG
observe(self.row, "value") do |old_value, new_value|
break_with_semaphore do
update_text_field(new_value)
end
end
field.clearButtonMode = UITextFieldViewModeWhileEditing
field.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter
field.textAlignment = row.text_alignment || UITextAlignmentRight
field.keyboardType = keyboardType
field.secureTextEntry = true if row.secure?
field.returnKeyType = row.return_key || UIReturnKeyNext
field.autocapitalizationType = row.auto_capitalization if row.auto_capitalization
field.autocorrectionType = row.auto_correction if row.auto_correction
field.clearButtonMode = row.clear_button || UITextFieldViewModeWhileEditing
field.enabled = row.editable?
field.inputAccessoryView = input_accessory_view(row.input_accessory) if row.input_accessory
add_callbacks(field)
cell.swizzle(:layoutSubviews) do
def layoutSubviews
old_layoutSubviews
# viewWithTag is terrible, but I think it's ok to use here...
formotion_field = self.viewWithTag(TEXT_FIELD_TAG)
formotion_field.sizeToFit
field_frame = formotion_field.frame
field_frame.origin.x = self.textLabel.frame.origin.x + Formotion::RowType::Base.field_buffer * 2
field_frame.origin.y = ((self.frame.size.height - field_frame.size.height) / 2.0).round
field_frame.size.width = self.frame.size.width - field_frame.origin.x - Formotion::RowType::Base.field_buffer
formotion_field.frame = field_frame
end
end
if UIDevice.currentDevice.systemVersion >= "6.0"
field.swizzle(:setText) do
def setText(text)
r = old_setText(text)
self.sendActionsForControlEvents(UIControlEventEditingChanged)
r
end
end
end
field.font = BW::Font.new(row.font) if row.font
field.placeholder = row.placeholder
field.text = row_value
icon = UIImage.imageNamed("icons/mail.png")
icon_view = UIImageView.alloc.initWithImage(icon)
icon_view.setFrame(CGRectMake(20, 18, icon_view.frame.size.width, icon_view.frame.size.height))
cell.addSubview(icon_view)
cell.addSubview(field)
cell.textLabel.hidden = true
field
end
end
end
end

Answer 1

This was extremely easy in the end. Just add an image in cell.imageView in EmailRow.
added this line:
cell.imageView.image = UIImage.imageNamed("icons/mail.png")
cell.imageView.setFrame(CGRectMake(20, 18, cell.imageView.frame.size.width, cell.imageView.frame.size.height))
and you access the cell with the code below, for example:
cell = #form.table.visibleCell.first

Answer 2

I'd recommend disabling the built-in border entirely and adding a pseudo-border using a thin UIView. That way you can set the frame to position it in the right position and give it a backgroundColor of #E3E3E5k like in your mockup.