Что означает Ems? (Android TextView)
Делает TextView именно таким большим количеством ems в ширину.
Поделиться Источник 13 августа 2011 в 22:35
8 ответов
android:ems или setEms(n) устанавливает ширину TextView для текста размером в n ‘M’ букв, независимо от фактического расширения текста и размера текста. См. Википедию Единицу измерения
но только тогда, когда layout_width установлен равным «wrap_content» . Другие значения layout_width переопределяют установку ширины ems.
Добавление атрибута android:textSize определяет физическую ширину представления в textSize * длину текста размером в n ‘M’ выше.
Поделиться 24 июня 2012 в 13:36
Ems — это термин для типографии, он контролирует размер текста и т.д. Проверьте здесь
Поделиться 13 августа 2011 в 22:38
Это ширина буквы M в заданном английском размере шрифта.
Таким образом, 2em в два раза больше ширины буквы M в этом заданном шрифте.
Для не-английского шрифта это ширина самой большой буквы в этом шрифте. Этот размер ширины в пикселях отличается от размера ширины M в английском шрифте , но все еще равен 1em .
Таким образом, если я использую текст с 12sp в английском шрифте, 1em является относительно этого английского шрифта с 12sp; использование итальянского шрифта с 12sp дает 1em, который отличается шириной в пикселях от английского.
Поделиться 24 июня 2012 в 13:24
В то время как другие ответы уже ответили на вопрос (это вопрос, который уже 3 года), я просто добавлю некоторую информацию и, вероятно, исправлю немного непонимания.
Эм, хотя изначально имел в виду термин для ширины одного символа ‘M’ в типографии, в цифровой среде он был смещен на единицу относительно точечного размера шрифта (font-size или textSize), другими словами, он использует высоту текста, а не ширину одного ‘M’.
В Android это означает, что при указании ems TextView, он использует указанный textSize TextView в качестве основы, исключая добавленный отступ для акцентов/диакритики. Когда вы установили ems 16sp для TextView в 4, это означает, что его ширина будет 64sp, поэтому комментарий @stefan ‘объяснил, почему 10 ems шириной EditText может соответствовать 17 ‘M’.
Поделиться 08 ноября 2020 в 05:35
em — это единица типографии ширины шрифта. Один эмм в 16-ти точках — это 16 точек
Поделиться 02 августа 2016 в 12:47
ems — это единица измерения
Имя em изначально было ссылкой на ширину главной буквы M. Оно устанавливает ширину TextView/EditText для текста в n ‘M’ букв независимо от фактического расширения и размера текста.
android:ems делает текст EditText точно таким же, как и многие ems.
определяет, что ширина буквы M создается в два раза.
Поделиться 23 сентября 2017 в 08:41
em в основном является CSS-свойством для размеров шрифтов.
Единицы em и ex зависят от шрифта и могут отличаться для каждого элемента в документе. Em — это просто размер шрифта. В элементе с 2в шрифтом, 1em означает 2в. Выражая размеры, такие как отступы и отступы, в em означает, что они связаны с размером шрифта, и если у пользователя есть большой шрифт (например, на большом экране) или маленький шрифт (например, на ручном устройстве), размеры будут пропорциональны. Такие объявления, как отступ текста: 1.5em и отступ: 1em, крайне распространены в CSS.
Поделиться 03 августа 2017 в 06:08
Чтобы добавить к другим ответам в Android, размер Ems может по умолчанию меняться в каждом языке и входе.
Это означает, что если вы хотите установить минимальную ширину для текстового поля, определенную количеством символов, вам нужно правильно вычислить Ems и установить его в соответствии с вашим типом и размером шрифта с атрибутом Ems.
Для тех из вас, кто борется с этим, вы можете вычислить размер подсказки самостоятельно, чтобы избежать беспорядков с Ems:
val tf = TextField() val layout = TextInputLayout() val hint = "Hint" val measureText = tf.paint.measureText(hint).toInt() tf.width = tf.paddingLeft + tf.paddingRight + measureText.toInt() layout.hint = hint Android ems 10 что это
Освой программирование играючи
/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей — и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000
Читайте на здоровье!
Статья проплачена кошками — всемирно известными производителями котят.
Если статья вам понравилась, то можете поддержать проект.
В секции Custom можно увидеть компонент . Если вы имели дело с PHP, то данный тег вам уже знаком. Он позволяет вставить заранее подготовленный кусок разметки в вашу разметку. Зачем это нужно? Представьте себе, что у вас сложное приложение, состоящее из нескольких активностей. И в каждой активности есть один и тот же одинаковый элемент, например, футер для отображения логотипа компании или текста. Чтобы не повторять одинаковый блок в каждой активности по отдельности, можно создать отдельную разметку и через include добавлять в нужное место.
Подготовим заранее нужную разметку и сохраним его в отдельном файле папки res/layout:
res/layout/excerpt_content.xml
Теперь возвращаемся к основной активности, где уже есть кнопки, метки и текстовое поле, и добавляем подготовленную разметку через include:
Как видите, вам нужно указать в атрибуте layout нужную разметку и его содержимое отобразится на экране активности. Подобный подход может существенно сэкономить ресурсы для сложной разметки.
Кстати, вы можете переопределять различные параметры источника, указывая свои значения для разных макетов.
Если вы выберете в режиме дизайна, то появится диалоговое окно, в котором нужно выбрать созданный вами макет.
Тег
Тег помогает устранить избыточную группировку, когда один шаблон включается в другой. Например, если ваш основной шаблон – вертикальный LinearLayout, в котором два последовательных компонента могут быть повторно использованы в различных других разметках, то повторно используемый шаблон, в котором вы размещаете два компонента, требует свой корневой элемент. Однако, использование другого LinearLayout как корневого элемента для повторно используемого Layout приведет к вертикальному LinearLayout внутри вертикального LinearLayout. Вложенный LinearLayout уменьшает производительность работы пользовательского интерфейса и не нужен для работы.
Чтобы избежать избыточной группировки элементов View, вы можете использовать как корневой элемент для повторного использования шаблона. Например:
Теперь, когда вы подключает шаблон в другой с использованием тега , система игнорирует элемент и помещает две кнопки непосредственно в разметку на месте тега .
TableLayout приложения Android
Данная статья является продолжением описания разметки интерфейса приложения Android. В предыдущей статье был представлен обзор с примерами возможных типов разметки. В данной статье рассмотрим табличную разметку TableLayout.
Пример табличной разметки, TableLayout
Для наглядного использования контейнера TableLayout создадим layout в рамках приложения p02layout, описанного в начальной части статьи. При создании нового layout определим наименование table (table.xml) и тип контейнера TableLayout. После этого в table.xml создадим интерфейс авторизации пользователя, т.е. включим компоненты ввода логина и пароля с метками пользователя и кнопки выполнения авторизации и закрытия.
Интерфейс формы будет включать 4 строки. В первой строке разместим метку (TextView) и компонент определения логина пользователя (EditText). Во второй строке установим метку (TextView) и компонент определения пароля пользователя (TextPassword). Третья строка останется пустой; она будет определять по вертикали относительное расположение кнопок. В четвертой строке справа разместим кнопки управления (Button).
Добавление строк, TableRow. Для формирования строк интерфейса необходимо использовать объект TableRow, который должен быть дочерним элементом контейнера TableLayout. Каждый компонент TableRow определяет единственную строку в таблице. Строка может не иметь ячеек или иметь одну и более ячеек. Ячейки строки являются контейнерами для других объектов. В ячейку можно вкладывать другой TableLayout или LinearLayout.
Для добавления строки в интерфейс нужно открыть вкладку Layouts в Palette, выделить компонент TableRow и перетащить его либо на страницу, либо в контейнер панели Component Tree. После этого можно таким же образом размещать в строке другие компоненты.
На первом шаге, чтобы не делать лишних телодвижений можно в контейнер поместить сразу 4 строки TableRow. На следующем шаге создадим пустую 3-ю строку с определенным по высоте размером.
Пустая строка. Чтобы создать пустую строку требуемого размера по высоте в 3-ю строку TableRow помещаем контейнер LinearLayout и определяем его размер по высоте; это можно сделать мышкой. Хватаем нижнюю часть компонента (LinearLayout), перемещаем на требуемое расстояние и бросаем (drag-and-drop). Таким образом, можно отделить одну часть интерфейса – компонентов определения учетной записи – от другой (кнопок управления).
Cтрока кнопок управления. Теперь можно в 4-ую строку поместить кнопки управления. Для этого сначала перетаскиваем два пустых компонента Space, и после этого две кнопки «ОК» и «Закрыть». Компонент Space также можно растягивать мышкой по горизонтали. Первый Space будет определять ширину первой колонки для меток, второй Space в совокупности с кнопкой «ОК» будет определять ширину второй колонки, где будут размещаться компоненты ввода параметров учетной записи.
Фоновой цвет строки. Чтобы визуально выделять заголовки или строки таблицы можно определить фоновый цвет TableRow. Для этого следует использовать атрибут «android:background» компонента TableRow.
Растягивание компонентов. Чтобы содержимое компонентов TableRow растянулось на всю ширину макета, необходимо указать в атрибуте «android:stretchColumns» контейнера TableLayout символ ‘*’. Но можно через запятую указать порядковые номера столбцов, которые следует растянуть. Номера столбцов отсчитываются от нуля; остальные колонки занимают минимум места. Например :
Объединение колонок. Смежные ячейки строк можно объединить, чтобы расстянуть компонент на несколько ячеек. Ряды строк объединить нельзя. Слияние ячеек выполняется определением значения целочисленного атрибута «android:layout_span» компонента; layout_span является аналогом атрибута colspan в HTML. Вот как это было выполнено для компонента edLogin в примере :
Рамка в таблице. К сожалению, контейнер TableLayout не может создать рамку для таблицы или ячейки; разработчики Android почему-то не определили эту функциональность. Но данную функциональность Вы можете создать самостоятельно, определяя фоновой цвет таблицы и ячейки.
Ограничение размера колонки. По невнимательности в ячейку таблицы можно вставить очень длинный текст, который растянет ячейку так, что часть текста просто выйдет за пределы экрана. Чтобы избежать данной проблемы необходимо использовать атрибут «android:shrinkColumns» контейнтера TableLayout. С точки зрения программирования приложения данный атрибут управляется методом setColumnShrinkable().
Рассмотрим програмное управление свойством «android:shrinkColumns» на примере. Допустим, что одна из меток в нулевой колонке таблицы имеет очень длинный текст. В интерфейсе мы разместили кнопку btnShrink, по нажатию на которую будем устанавливать флаг «android:shrinkColumns» или сбрасывать. Для этого, необходимо в главном модуле определить логическую переменную (b_shrink), значением которой будет управлять. Код примера представлен в листинге :
public class MainActivity extends AppCompatActivity < private boolean b_shrink; @Override public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.table); final TableLayout table = null; table = (TableLayout) findViewById(R.id.tblLayout); Button btn = (Button) findViewById(R.id.btnShrink); btn.setOnClickListener(new Button.OnClickListener() < public void onClick(View v) < b_shrink = !b_shrink; table.setColumnShrinkable(0, b_shrink); >>); b_shrink = table.isColumnShrinkable(0); > >
Программное создание таблицы. При программном создании таблицы необходимо найти/определить контейнер TableLayout, к которому соответствующим образом добавить необходимое количество строк TableRow. Каждую из строк можно также динамически «оформить». Следующий пример демонстрирует динамическое формирование таблицы, в каждой из ячеек которой размещается изображения.
int ROWS = 3; int COLS = 4; TableLayout tblLayout = null; tblLayout = (TableLayout) findViewById(R.id.tableLayout); for (int i = 0; i < ROWS; i++) < TableRow tableRow = new TableRow(this); tableRow.setLayoutParams(new LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); for (int j = 0; j < COLS; j++) < // получение изображения полки ImageView imageView = new ImageView(this); imageView.setImageResource(R.drawable.shelf); tableRow.addView(imageView, j); >tblLayout.addView(tableRow, i);
Интерфейс приложения
Описание возможностей TableLayout и TableRow можно было бы продолжать еще долго. Но, как я полагаю, Вы получили достаточный толчок в понимании того, как можно через интерфейс или программно определить тот или иной атрибут таблицы. Теперь Вам не составит труда самостоятельно соответствующим образом настроить табличный интерфейс приложения.
Возвращаясь к нашему примеру, можно представить внешний вид интерфейса приложения на следующем скриншоте.
Если посмотреть на представление компонентов в дереве (Component Tree), то сразу же бросаются в глаза изображения предупреждения с восклицательными знаками напротив компонентов. В данном случае среда разработки Android Studio нас предупреждает, что текстовые заголовки меток и кнопок необходимо локализовать. Кроме этого необходимо связать метки с компонентами.
Вопрос локализации интерфейса Android Studio рассмотрен на отдельной странице локализациии приложения, а здесь только покажем, как можно бороться с подобными предупреждениями.
Обратите внимание на светло-серый текст возле компонентов tvLogin (@string/lbl_login), tvPassword (@string/lbl_password). Рядом с кнопками подобный текст отсутствует, но имеются предупреждающие сообщения. Это говорит о том, что текст для меток tvLogin и tvPassword используется из ресурсного файла string.xml. Рассмотрим этот файл :
Текст меток
В ресурсном файле определяются наименования ключей и их значения подобно key=value. Для этого в текст файла в формате XML включаются строки с атрибутами (ключами) «name» и соответствующими значеними.
P02layout Login Password OK Закрыть
Далее необходимо определенный ключ подключить к метке TextView или к кнопке в опции «android:text». Вот как это выглядит для метки tvLogin :
В описании метки tvLogin определяется идентификатор «android:id», размер метки «android:layout_width», текстовое значение «android:text» и устанавливается связь с компонентом edLogin в опции «android:labelFor». Все эти значения можно определять также через интерфейс в панели атрибутов после выделения компонета.
Текстовое описание интерфейса
В следующем листинге приведено полное описание файла table.xml . Полагаю, что Вам не составит труда самостоятельно подключить локализованные строки к кнопкам.
Старт приложения
Для старта приложения необходимо в активности MainActivity.java в методе onCreate переключиться на интерфейсное описание table.xml :
setContentView(R.layout.table);
Помните, что если Вы не корректно завершите работу Android приложения, то IDE может не удалить файлы и поддиректории эмулятора, и при следующем старте приложения эмулятор не запуститься. Как бороться с проблемами запуска эмулятора описано здесь.
EditText
Компонент EditText — это текстовое поле для пользовательского ввода, которое используется, если необходимо редактирование текста. Следует заметить, что EditText является наследником TextView.
В Android Studio на панели инструментов текстовые поля можно найти в категории Texts под разными именами.
Для быстрой разработки текстовые поля снабдили различными свойствами и дали разные имена: Plain Text, Person Name, Password, Password (Numeric), E-mail, Phone, Postal Address, Multiline Text, Time, Date, Number, Number (Signed), NumberDecimal.
Plain Text
Plain Text — самый простой вариант текстового поля без наворотов. При добавлении в разметку его XML-представление будет следующим:
Person Name
При использовании элемента Person Name в XML добавляется атрибут inputType, который отвечает за вид клавиатуры (только буквы) при вводе текста.
Password и Password (Numeric)
При использовании Password в inputType используется значение textPassword. При вводе текста сначала показывается символ, который заменяется на звёздочку. Если используется элемент Password (Numeric), то у атрибута inputType используется значение numberPassword. В этом случае на клавиатуре будут только цифры вместо букв. Вот и вся разница.
У элемента E-mail используется атрибут android:inputType=»textEmailAddress». В этом случае на клавиатуре появляется дополнительная клавиша с символом @, который обязательно используется в любом электронном адресе.
Кстати, финны называют символ @ кошачьим хвостом (взято из Википедии). А в России этот символ называют собакой. Где справедливость?
Phone
У элемента Phone используется атрибут android:inputType=»phone». Клавиатура похожа на клавиатуру из старого кнопочного сотового телефона с цифрами, а также с кнопками звёздочки и решётки.
Postal Address
Атрибут android:inputType=»textPostalAddress».
Multiline Text
У Multiline Text используется атрибут android:inputType=»textMultiLine» позволяющий сделать текстовое поле многострочным. Дополнительно можете установить свойство Lines (атрибут android:lines), чтобы указать количество видимых строк на экране.
Time и Date
Атрибут android:inputType=»time» или android:inputType=»date». На клавиатуре цифры, точка, запятая, тире.
Number, Number (Signed), Number (Decimal)
Атрибут android:inputType=»number» или numberSigned или numberDecimal. На клавиатуре только цифры и некоторые другие символы.
Текст-подсказка
Веб-мастера знают о таком атрибуте HTML5 как placeholder, когда в текстовом поле выводится строчка-подсказка приглушенным (обычно серым цветом). Живой пример приведён ниже.
Подсказка видна, если текстовый элемент не содержит пользовательского текста. Как только пользователь начинает вводить текст, то подсказка исчезает. Соответственно, если удалить пользовательский текст, то подсказка появляется снова. Это очень удобное решение во многих случаях, когда на экране мало места для элементов.
В Android у многих элементов есть свойство Hint (атрибут hint), который работает аналогичным образом. Установите у данного свойства нужный текст и у вас появится текстовое поле с подсказкой.
Запускаем приложение и видим подсказку, которая исчезает при попытке ввести текст.
Вызов нужной клавиатуры
Не во всех случаях нужна стандартная клавиатура с буковками и цифрами. Если вы пишете калькулятор, то проще показать пользователю цифровую клавиатуру. А если нужно ввести электронный адрес, то удобнее показать клавиатуру, где уже есть символ @. Ну а если ваше приложение пишется для котов, то достаточно вывести только те буквы, из которых можно составить слова Мяу и Жрать давай (к сожалению, такой клавиатуры ещё нет, но Google работает в этом направлении).
У элемента EditText на этот случай есть атрибут inputType:
В данном случае с атрибутом inputType=»textCapWords" каждый первый символ каждого слова при вводе текста автоматически будет преобразовываться в прописную. Удобно, не так ли?
Значение textCapSentences делает прописным каждый первый символ предложения.
Если вам нужен режим CapsLock, то используйте значение textCapCharacters и все буквы сразу будут большими при наборе.
Для набора телефонного номера используйте phone, и тогда вам будут доступны только цифры, звёздочка (*), решётка (#).
Для ввода веб-адресов удобно использовать значение textUri. В этом случае у вас появится дополнительная кнопочка .com (при долгом нажатии на нее появятся альтернативные варианты .net, .org и др.).
Вот вам целый список доступных значений (иногда различия очень трудно различимы)
text textCapCharacters (клавиатура с символами в верхнем регистре) textCapWords textCapSentences textAutoCorrect textAutoComplete textMultiLine textImeMultiLine textNoSuggestions (без подсказок при вводе текста) textUri textEmailAddress textEmailSubject textShortMessage textLongMessage textPersonName textPostalAddress textPassword textVisiblePassword (без автокоррекции) textWebEditText textFilter textPhonetic number numberSigned numberDecimal phone datetime date time
Интерфейс InputType
Кроме использования атрибута android:inputType мы можем добиться нужного поведения от текста при помощи интерфейса InputType.
// Делаем заглавным первый символ предложения val inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_CAP_SENTENCES editText.inputType = inputType // Другие варианты // Только числа, десятичную точку и минус val inputType = InputType.TYPE_CLASS_NUMBER or // allow numbers InputType.TYPE_NUMBER_FLAG_DECIMAL or // allow decimal numbers InputType.TYPE_NUMBER_FLAG_SIGNED // allow positive and negative numbers
Атрибут android:imeOptions — параметры для текущего метода ввода
У текстовых полей есть атрибут android:imeOptions, с помощью которого настраиваются параметры для текущего метода ввода. Например, когда EditText получает фокус и отображается виртуальная клавиатура, эта клавиатура содержит кнопку «Next» (Далее), если атрибут android:imeOptions содержит значение actionNext. Если пользователь касается этой кнопки, фокус перемещается к следующему компоненту, который принимает пользовательский ввод. Если компонент EditText получает фокус и на виртуальной клавиатуре появляется кнопка «Done» (Готово), значит использовался атрибут android:imeOptions со значением actionDone. Как только пользователь касается этой кнопки, система скрывает виртуальную клавиатуру.
Заблокировать текстовое поле
Для блокировки текстового поля присвойте значения false свойствам Focusable, Long clickable и Cursor visible.
Другие свойства
minLines и maxLines Позволяют ограничить количество строк текста, которое можно ввести в текстовом поле maxLength Позволяет задать максимальное количество символов для ввода
Методы
Основной метод класса EditText — getText(), который возвращает текст, содержащийся в текстовом поле. Возвращаемое значение имеет специальный тип Editable, а не String.
String strCatName = nickNameEditText.getText().toString(); // приводим к типу String
Соответственно, для установки текста используется метод setText().
В Kotlin может возникнуть проблема, если программист захочет использовать конструкцию присвоения через свойство.
editText.text = someText // нельзя! edittext.setText(someText)
Большинство методов для работы с текстом унаследованы от базового класса TextView: setTypeface(null, Typeface), setTextSize(int textSize), SetTextColor(int Color).
Выделение текста
У EditText есть специальные методы для выделения текста:
- selectAll() — выделяет весь текст;
- setSelection(int start, int stop) — выделяет участок текста с позиции start до позиции stop;
- setSelection(int index) — перемещает курсор на позицию index;
Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово «кот», а вы что подумали?).
// выделяем 4, 5, 6 символы editText.setSelection(3, 6);
Ещё есть метод setSelectAllOnFocus(), который позволяет выделить весь текст при получении фокуса.
editText.setSelectAllOnFocus(true)
Обработка нажатий клавиш
Для обработки нажатий клавиш необходимо зарегистрировать обработчик View.OnKeyListener, используя метод setOnKeyListener() элемента EditText. Например, для прослушивания события нажатия клавиши Enter во время ввода текста пользователем (или котом), используйте следующий код:
// Kotlin // edit text enter key listener editText.setOnKeyListener(object : View.OnKeyListener < override fun onKey(v: View?, keyCode: Int, event: KeyEvent): Boolean < // if the event is a key down event on the enter button if (event.action == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER ) < // perform action on key press textView.text = "Pressed Enter Key\n\n$" // clear focus and hide cursor from edit text editText.clearFocus() editText.isCursorVisible = false return true > return false > >)
// Java final EditText editText = findViewById(R.id.EditText1); editText.setOnKeyListener(new View.OnKeyListener() < public boolean onKey(View v, int keyCode, KeyEvent event) < if(event.getAction() == KeyEvent.ACTION_DOWN && (keyCode == KeyEvent.KEYCODE_ENTER)) < // сохраняем текст, введённый до нажатия Enter в переменную String strCatName = editText.getText().toString(); return true; >return false; > > );
Пустой ли EditText
Чтобы проверить, пустой ли EditText, можно воспользоваться кодом:
if (editText.getText().toString().equals("")) < // Здесь код, если EditText пуст >else < // если есть текст, то здесь другой код >
Также можно проверять длину текста, если она равно 0, значит текст пуст.
if (editText.getText().length() == 0)
В Kotlin есть удобная функция-расширение ifEmpty(), позволяющая сделать проверку и задать значение по умолчанию, что очень удобно во многих случаях.
// если текстовое поле пустое, то задать текст по умолчанию val cat = catEditText.text.ifEmpty < "Барсик" >.toString()
Превращаем EditText в TextView
Практического смысла тут нет, но для общего развития превратим текстовое поле в текстовую метку. Для этого нужно сделать компонент недоступным, убрать курсор, установить прозрачный фон и отключить слушатель нажатий клавиш.
EditText editText = (EditText)findViewById(R.id.editText); editText.setEnabled(false); editText.setCursorVisible(false); editText.setBackgroundColor(Color.TRANSPARENT); editText.setKeyListener(null);
Также можно установить эти свойства через XML, кроме последнего пункта.
Дополнительное чтение
Beware EditText on API 21 — разница между версиями 21 и 22