（Rubymotion）如何在Formotion中执行此自定义视图？

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.