Стайлинг UITextField - PullRequest
       17

Стайлинг UITextField

1 голос
/ 27 апреля 2009

Я играл с различными методами определения во время выполнения ширины «метки», чтобы я мог изменить размер «метки», потому что я не хочу, чтобы она усекалась. Наконец-то я нашел простое решение с помощью UITextField , которое позволяет мне установить .autoSize , и это здорово! Тем не менее, сейчас я пытаюсь «стилизовать» (просто настроить шрифт и размер шрифта) UITextField , но мне кажется, что я должен сделать это вручную с помощью .htmlText . который я с радостью приму, если это ЕДИНСТВЕННЫЙ путь).

Я использую .text , чтобы установить значение метки.

Мой тестовый пример включает HBox (на самом деле я использую Grid, но они должны быть одинаковыми, и я провел тестирование на обоих):

  1. Я создаю стиль HBox , и стиль переносится в UITextField . Я не верю, что это будет работать для меня, потому что у меня есть другие компоненты внутри, которые мне нужно стилизовать по-другому.
  2. Я пробовал: UITextFormat и TextFormat (я вижу, что .htmlText обновляется соответствующим образом, но вывод не обновляется. Тогда я заметил что всякий раз, когда я вызывал hbox.addChild (myUITextField) , он переопределял .htmlText
  3. Я пытался установить стиль с помощью myUITextField.setStyle ("fontSize", 20) до и / или после вызова addChild , ни один из которых не оказал влияния на дисплей в соответствии с тем, что я отметил выше.

Изменения вносятся, но, кажется, они переопределяются, когда я добавляю их на дисплей.

Так что мне нужно сделать, чтобы стилизовать UITextField помимо ручной настройки его вместе с моим содержимым в .htmlText ? Решения, не использующие UITextField, хороши, если есть простой способ не обрезать текст.

РЕДАКТИРОВАТЬ: я хочу просто сделать textField.setStyle ('fontSize', 20) и ожидать, что каждый раз, когда я изменяю текст, мне не нужно было бы использовать HTML для этого (так что я могу просто сделать textField. text = 'что-то еще' и ожидайте, что размер шрифта все равно будет 20). Это то, что я имел в виду, не используя .htmlText (извините, если я не был ясен раньше).

2-е РЕДАКТИРОВАНИЕ : Полагаю, мне следует изложить всю проблему, и, возможно, это прояснит, что я сделал неправильно или не смог достичь.

Мое намерение состоит в том, чтобы иметь Grid и добавить в нее текст. Я не хочу, чтобы он переносился или прокручивался, поэтому я добавляю его в следующую строку в Grid , когда общая ширина дочерних элементов текущей строки превышает некоторое число. Чтобы добавить его в следующую строку, мне нужно вычислить ширину текста. Я хотел бы иметь возможность стилизовать этот текст индивидуально в зависимости от дел и других компонентов (например, TextInput ). По сути, я пытаюсь выполнить «Заполнить пробел».

Я включил код, чтобы показать, что я сейчас делаю, и это работает несколько. Это может быть не связано с исходной проблемой стилей, но я не могу понять, как отрегулировать расстояние между каждым UITextField, но кроме этого это соответствует тому, что я хотел бы достичь. Отвечает вопрос: я бы хотел изменить стиль каждого из UITextField (в настоящее время настраивается .htmlText ) на что-то более простое, хотя, как я уже упоминал ранее, я с радостью приму используя .htmlText , если это единственное решение.

Итак, у меня есть Grid с x строками, и в каждой строке у меня ровно один GridItem. Основываясь на вводимых данных, я добавляю UITextField и TextInput в GridItem, переходя к следующему GridItem, когда это необходимо. Если у вас есть лучший способ сделать это, то это будет лучше, но я думаю, что я действительно хочу найти другой способ стилизации.

Также другая проблема , я не уверен в точном способе добавления TextField на дисплей. Я попробовал:

var t : TextField = new TextField();
t.text = "I'm a TextField";
hBox.addChild(t);   // doesn't work
//this.addChild(t); // doesn't work either

Но я получаю следующую ошибку:

Ошибка типа: ошибка # 1034: сбой приведения типа: невозможно преобразовать flash.text :: TextField @ 172c8f9 в mx.core.IUIComponent.

Вот что у меня работает.

private function styleQuestionString(str : String) : String {
  return '<FONT leading="1" face="verdana" size="20">' + str + '</FONT>';
}

private function loadQuestion(str : String) : void {
  /* Split the string */
  var tmp : Array = str.split("_");

  /* Track the current width of the GridItem */
  var curWidth : int = 0;

  /* Display components that we will add */
  var txtField : UITextField = null;
  var txtInput : TextInput = null;

  /* Track the current GridItem */
  var curGridItem : GridItem = null;

  /* Track the GridItem we can use */
  var gridItemAC : ArrayCollection = new ArrayCollection();

  var i : int = 0;

  /* Grab the first GridItem from each GridRow of Grid */
  var tmpChildArray : Array = questionGrid.getChildren();
  for (i = 0; i < tmpChildArray.length; i++) {
    gridItemAC.addItem((tmpChildArray[i] as GridRow).getChildAt(0));
  }
  curGridItem = gridItemAC[0];
  gridItemAC.removeItemAt(0);

  /* Used to set the tab index of the TextInput */
  var txtInputCounter : int = 1;

  var txtFieldFormat : UITextFormat = new UITextFormat(this.systemManager);
  txtFieldFormat.leading = "1";

  //var txtFieldFormat : TextFormat = new TextFormat();
  //txtFieldFormat.size = 20;

  /* Proper Order
    txtField = new UITextField();
    txtField.text = tmp[curItem];
    txtField.autoSize = TextFieldAutoSize.LEFT;
    txtField.setTextFormat(txtFieldFormat);
  */

  var txtLineMetrics : TextLineMetrics = null;
  var tmpArray : Array = null;

  curGridItem.setStyle("leading", "1");

  var displayObj : DisplayObject = null;

  for (var curItem : int= 0; curItem < tmp.length; curItem++) {
    /* Using UITextField because it can be auto-sized! */

    /** CORRECT BLOCK (ver 1)
    txtField = new UITextField();
    txtField.text = tmp[curItem];
    txtField.autoSize = TextFieldAutoSize.LEFT;
    txtField.setTextFormat(txtFieldFormat);
    ***/

    tmpArray = (tmp[curItem] as String).split(" ");

    for (i = 0; i < tmpArray.length; i++) {
      if (tmpArray[i] as String != "") {
        txtField = new UITextField();
        txtField.htmlText = styleQuestionString(tmpArray[i] as String);
        //txtField.setTextFormat(txtFieldFormat); // No impact on output
        txtLineMetrics = curGridItem.measureHTMLText(txtField.htmlText);
        curWidth += txtLineMetrics.width + 2;

        if (curWidth >= 670) {
          curGridItem = gridItemAC[0];
          curGridItem.setStyle("leading", "1");
          if (gridItemAC.length != 1) {
            gridItemAC.removeItemAt(0);
          }
          // TODO Configure the proper gap distance
          curWidth = txtLineMetrics.width + 2;
        }
        displayObj = curGridItem.addChild(txtField);
      }
    }

    //txtField.setColor(0xFF0000);  // WORKS

    if (curItem != tmp.length - 1) {
      txtInput = new TextInput();
      txtInput.tabIndex = txtInputCounter;
      txtInput.setStyle("fontSize", 12);
      txtInputCounter++;
      txtInput.setStyle("textAlign", "center");
      txtInput.width = TEXT_INPUT_WIDTH;
      curWidth += TEXT_INPUT_WIDTH;

      if (curWidth >= 670) {
        curGridItem = gridItemAC[0];
        if (gridItemAC.length != 1) {
          gridItemAC.removeItemAt(0);
        }
        // TODO Decide if we need to add a buffer
        curWidth = TEXT_INPUT_WIDTH + 2;
      }
      curGridItem.addChild(txtInput);
      txtInputAC.addItem(txtInput);

      /* Adds event listener so that we can perform dragging into the TextInput */
      txtInput.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
      txtInput.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
      txtInput.addEventListener(DragEvent.DRAG_EXIT, dragExitHandler);
    }

    /* Add event so that this label can be dragged */
    //txtField.addEventListener(MouseEvent.MOUSE_MOVE, dragThisLabel(event, txtField.text));
  }
}

Ответы [ 3 ]

2 голосов
/ 04 июля 2009

После 8 часов поисков решения, которое казалось бы таким простым, я НАКОНЕЦ наткнулся на ваши посты здесь ... Спасибо !!!

Я спотыкался, пытаясь заставить TextField работать, и у меня не было радости, у Лейбла все было в порядке, но форматирование было ограниченным, и мне нужно было использовать встроенные шрифты и поворачивать. После прочтения выше, это, наконец, сработало для меня:

var myFormat:TextFormat = new TextFormat();
myFormat.align = "center";
myFormat.font = "myFont";
myFormat.size = 14;
myFormat.color = 0xFFFFFF;

var newTxt:UITextField = new UITextField();
newTxt.text = "HELLO";
addChild(newTxt);
newTxt.validateNow();
newTxt.setTextFormat(myFormat);

Порядок addChild перед последними 2 шагами был критическим! (myFont - это встроенный шрифт, который я использую).

Еще раз ... тысяча благодарностей ...

John

1 голос
/ 23 июня 2009

Причиной возникновения проблемы при добавлении Textfield в контейнеры является то, что он не реализует интерфейс IUIComponent. Вам нужно использовать UITextField, если вы хотите добавить его. Тем не менее, это представляет мне мои собственные проблемы со стилем, которые привели меня к этому вопросу.

Несколько вещей, которые я знаю:

  1. TextField разрабатывается с использованием определения TextFormat и его применения к текстовому полю. Как сказал Брайан, порядок имеет значение.

  2. setStyle ничего не делает с IUITextField, и метод TextFormat, похоже, не работает так же, как в обычных TextFields. (Edit # 2: Ahah. Вам нужно переопределить функцию validateNow в UITextFields, чтобы использовать функцию setTextFormat)

  3. Для автоматического изменения размера TextArea необходимо выполнить что-то вроде этого (наследование от TextArea):

import mx.core.mx_internal; use namespace mx_internal; ... super.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT; this.height = super.mx_internal::getTextField().height;

Некоторое время назад нашел этот код на StackOverflow. Извинения оригинальному автору. Но идея в том, что вам нужно получить доступ к необработанному текстовому полю "mx_internal".

  1. Text и TextArea имеют параметры обтекания. (Метки нет). Таким образом, если вы установите явную ширину текстового объекта, вы можете изменить размер с помощью параметра measureHeight и избежать усечения.

(правка: это был # 4, но stackoverflow преобразовал его в 1 ...)

1 голос
/ 27 апреля 2009

РЕДАКТИРОВАТЬ НА ОСНОВЕ ОБРАТНОЙ СВЯЗИ ASKERS: Я не осознавал, что вы хотите применить один стиль ко всему текстовому полю, я думал, что вы хотите стилизовать отдельные части. Это еще проще для вас, не доставит вам никаких проблем:)


var textFormat: TextFormat = new TextFormat("Arial", 12, 0xFF0000);
myText.setTextFormat(textFormat);

Имейте в виду, что это устанавливает стиль для текста, который находится в TextField, а не обязательно для будущего текста, который вы вводите. Поэтому поместите ваш текст в поле перед вызовом setTextFormat и устанавливайте его снова каждый раз, когда вы изменяете его просто на будь уверен, что оно останется.

Вероятно, лучше использовать обычный TextField, а не компонент. Если вам все еще нужен компонент, вам, возможно, потребуется вызвать textArea.validateNow (), чтобы обновить его с новым стилем (хотя и не уверен на 100% в этом). Компоненты Adobe, как известно, плохие, и их следует избегать. (

Чтобы увидеть все доступные опции для объекта TextFormat, см. здесь

КОНЕЦ РЕДАКТИРОВАНИЯ ---------

Это достаточно просто сделать с помощью CSS в обычном старом TextField.


var myCSS: String = "Have some CSS here, probably from a loaded file";
var myHTML: String = "Have your HTML text here, and have it use the CSS styles";

// assuming your textfield's name is myText
var styleSheet: StyleSheet = new StyleSheet();
styleSheet.parseCSS(myCSS);
myText.autoSize = TextFieldAutoSize.LEFT;
myText.styleSheet = styleSheet;
myText.htmlText = myHTML;

Поддерживаемые теги HTML можно найти здесь
Поддерживаемые CSS можно найти здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...