Как сделать рамку вокруг EditText
Как сделать желтую рамку вокруг EditText ? И как потом изменить цвет этой рамки? 🙂 Вот эта желтая рамка:
Отслеживать
8,331 4 4 золотых знака 26 26 серебряных знаков 48 48 бронзовых знаков
задан 17 окт 2015 в 19:02
user189127 user189127
что Вы подразумеваете под рамкой? > В Eclipse у меня она появлялась автоматически -среда разработки не влияет на внешний вид приложения, разница может быть из за разных таргетовых версий Android API
17 окт 2015 в 19:11
@ermak0ff, видимо стиль был другой. Фото рамки добавил в вопрос.
– user189127
17 окт 2015 в 19:17
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
как я понял Вам нужно это
Создаем файл EditTextStyle.xml в папке drawable
Добавляем атрибут в EditText android:background=»@drawable/EditTextStyle»
UPD:
И как потом изменить цвет этой рамки? 🙂
меняете эти строки
. . android:startColor="#C8C8C8" android:endColor="#FFFFFF" . UPD 2:
Как увеличить отступ синей рамки от текста? Он прилегает в плотную
для этого нужно добавить padding на EditText
Отслеживать
ответ дан 17 окт 2015 в 19:19
8,331 4 4 золотых знака 26 26 серебряных знаков 48 48 бронзовых знаков
Сейчас попробую.
– user189127
17 окт 2015 в 19:22
android:padding=»8dp»
17 окт 2015 в 19:32
17 окт 2015 в 19:35
– user189127
17 окт 2015 в 19:36
Спасибо, удачи.
17 окт 2015 в 19:37
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как поместить рамку вокруг символа в textview
Элемент EditText является подклассом класса TextView . Он также представляет текстовое поле, но теперь уже с возможностью ввода и редактирования текста. Таким образом, в EditText мы можем использовать все те же возможности, что и в TextView.
Из тех атрибутов, что не рассматривались в теме про TextView, следует отметить атрибут android:hint . Он позволяет задать текст, который будет отображаться в качестве подсказки, если элемент EditText пуст. Кроме того, мы можем использовать атрибут android:inputType , который позволяет задать клавиатуру для ввода. В частности, среди его значений можно выделить следующие:
- text : обычная клавиатура для ввода однострочного текста
- textMultiLine : многострочное текстовое поле
- textEmailAddress : обычная клавиатура, на которой присутствует символ @ , ориентирована на ввод email
- textUri : обычная клавиатура, на которой присутствует символ / , ориентирована на ввод интернет-адресов
- textPassword : клавиатура для ввода пароля
- textCapWords : при вводе первый введенный символ слова представляет заглавную букву, остальные — строчные
- number : числовая клавиатура
- phone : клавиатура в стиле обычного телефона
- date : клавиатура для ввода даты
- time : клавиатура для ввода времени
- datetime : клавиатура для ввода даты и времени
Первое поле здесь обычное однострочное, а второе — многострочное. Чтобы во втором поле текст выравнивался по верху, дополнительно устанавливается атрибут android:gravity=»top» .
Одной из возможностей элемента EditText также является возможность обработать введенные символы по мере ввода пользователя. Для этого определим в файле activity_main.xml следующую разметку:
Предполагается, что введенные в EditText символы тут же будут отображаться в элементе TextView. И для этого также изменим код MainActivity:
package com.example.viewapp; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText editText = findViewById(R.id.editText); editText.addTextChangedListener(new TextWatcher() < public void afterTextChanged(Editable s) <>public void beforeTextChanged(CharSequence s, int start, int count, int after) < >public void onTextChanged(CharSequence s, int start, int before, int count) < TextView textView = findViewById(R.id.textView); textView.setText(s); >>); > >
С помощью метода addTextChangedListener() здесь к элементу EditText добавляется слушатель ввода текста — объект TextWatcher . Для его использования нам надо реализовать три метода, но в реальности нам хватит реализации метода onTextChanged , который вызывается при изменении текста. Введенный текст передается в этот метод в качестве параметра CharSequence. В самом методе просто передаем этот текст в элемент TextView.
В итоге при вводе в EditText все символы также будут отображаться в TextView:
Как поместить рамку вокруг текстового представления Android?
Вы можете установить фигуру, которая может быть выделена (прямоугольник) в качестве фона для представления.
И прямоугольник drawable back.xml(помещается в папку res/drawable):
Вы можете использовать @android:color/transparent для сплошного цвета, чтобы иметь прозрачный фон. Вы также можете использовать отступы для ветки текста от границы. для получения дополнительной информации см.: http://developer.android.com/guide/topics/resources/drawable-resource.html
Konstantin Burov 16 авг. 2010, в 19:08
Поделиться
Что если я просто хочу верхнюю границу?
happyhardik 01 авг. 2012, в 17:55
@whyoz Его метод добавляет ненужную сложность для просмотра иерархии. Вам понадобятся два дополнительных вида (контейнер макета и вид границы), чтобы использовать его метод. Таким образом, если у вас много представлений, к которым нужно добавить границу, ваше дерево представлений станет неуправляемым.
Konstantin Burov 28 март 2013, в 15:23
@whyoz, но этот метод может быть применен через стили темы, в то время как метод YongGu не может быть использован таким образом.
Konstantin Burov 28 март 2013, в 15:25
Можем ли мы просто добавить код в файл style.xml вместо отдельного файла в drawable?
Pritesh Desai 01 янв. 2014, в 00:06
Только для верхней границы , см. Этот вопрос .
Pang 07 апр. 2014, в 03:01
Вы можете использовать этот инструмент http://shapes.softartstudio.com для создания чертежей.
Arda Basoglu 17 нояб. 2015, в 23:55
Это решение убьет пульсации обратной связи!
zyamys 23 май 2017, в 04:01
Возможно, это возможно только с последних версий, но у меня есть однострочный ответ.
Protean 17 апр. 2018, в 07:03
Показать ещё 6 комментариев
Позвольте мне подвести несколько различных (непрограммных) методов.
Используя форму, пригодную для рисования
Сохраните следующее в виде XML файла в вашей папке (например, my_border.xml):
Затем просто установите его в качестве фона для вашего TextView:
- Shape Drawable (Android docs)
- Советы и рекомендации для разработчиков Android: XML-чертежи (часть I)
Использование 9-патча
9-патч — растягиваемое фоновое изображение. Если вы создадите изображение с рамкой, это даст вашему TextView границу. Все, что вам нужно сделать, это сделать изображение, а затем установить его в фоновом режиме в TextView.
Вот некоторые ссылки, которые покажут, как сделать 9-патч-образ:
- Нарисуйте 9-патч
- Простой генератор Nine-patch
- Простой справочник по 9-патчу для Android-интерфейса пользователя
- Создание и использование 9-патч-изображений в Android
Что делать, если я просто хочу верхнюю границу?
Использование списка слоев
Вы можете использовать список слоев, чтобы складывать два прямоугольника друг над другом. Сделав второй прямоугольник чуть меньшим, чем первый прямоугольник, вы можете сделать эффект границы. Первый (нижний) прямоугольник — это цвет границы, а второй прямоугольник — цвет фона.
Настройка android:top=»2dp» смещает вершину (уменьшает ее) на 2dp. Это позволяет отобразить первый (нижний) прямоугольник, создавая эффект границы. Вы можете применить это к фону TextView так же, как и для shape drawable.
Вот еще несколько ссылок о списках слоев:
- Понимание списка
- Как сделать нижнюю границу в выделенной форме XML-селектором?
- Создавать границы на представлении android в drawable xml с трех сторон?
Использование 9-патча
Вы можете просто сделать изображение с 9 патчами с одной границей. Все остальное такое же, как описано выше.
Использование представления
Это своего рода трюк, но он хорошо работает, если вам нужно добавить разделитель между двумя видами или границей в один текстовый файл.
Вот еще несколько ссылок:
- Как нарисовать линию в Android
- Как поместить горизонтальную линию делителя между редактированием текста в действии
- Как добавить горизонтальную линию 1px над представлением изображения в относительной компоновке?
Suragch 04 апр. 2015, в 11:20
Поделиться
Боже, border: 1px solid #999; не должно быть таким сложным.
Achshar 02 фев. 2018, в 23:51
Что делать, если мне нужна граница textview, которая также имеет эффект тени и ряби?
Akash Dubey 16 март 2018, в 06:47
@AkashDubey, извини, я этого раньше не делал. Я предлагаю вам попробовать каждый из них в отдельности, а затем объединить их. Если вы застряли, задайте новый вопрос о переполнении стека.
Suragch 16 март 2018, в 07:44
Показать ещё 1 комментарий
Простым способом является добавление представления для вашего TextView. Пример для нижней граничной линии:
Для других границ направления, пожалуйста, отрегулируйте расположение разделителя.
Young Gu 22 нояб. 2012, в 03:52
Поделиться
По моему опыту, это решение на старых устройствах оказывает тихое видимое влияние на производительность приложения.
Roberto Lombardini 23 сен. 2013, в 13:16
Это ужасное решение с точки зрения инфляции. Вы создаете 3 новых элемента вида и добавляете еще один уровень в глубину иерархии вида.
philipp 15 нояб. 2013, в 23:26
Худшее решение из-за перспективы инфляции, как сказал Филипп. Знаете ли вы, что у textView есть специальный тег xml, чтобы просто сделать это: определите картинку для рисования влево / вправо / сверху / снизу вокруг вашего TextView, и они известны как android: drawable ****
Mathias Seguy Android2ee 02 дек. 2016, в 11:06
Показать ещё 1 комментарий
Я решил эту проблему, расширив текст и нарисов границу вручную. Я даже добавил, что вы можете выбрать, будет ли точка пунктирной или пунктирной.
public class BorderedTextView extends TextView < private Paint paint = new Paint(); public static final int BORDER_TOP = 0x00000001; public static final int BORDER_RIGHT = 0x00000002; public static final int BORDER_BOTTOM = 0x00000004; public static final int BORDER_LEFT = 0x00000008; private Border[] borders; public BorderedTextView(Context context, AttributeSet attrs, int defStyle) < super(context, attrs, defStyle); init(); >public BorderedTextView(Context context, AttributeSet attrs) < super(context, attrs); init(); >public BorderedTextView(Context context) < super(context); init(); >private void init() < paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.BLACK); paint.setStrokeWidth(4); >@Override protected void onDraw(Canvas canvas) < super.onDraw(canvas); if(borders == null) return; for(Border border : borders)< paint.setColor(border.getColor()); paint.setStrokeWidth(border.getWidth()); if(border.getStyle() == BORDER_TOP)< canvas.drawLine(0, 0, getWidth(), 0, paint); >else if(border.getStyle() == BORDER_RIGHT) < canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint); >else if(border.getStyle() == BORDER_BOTTOM) < canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint); >else if(border.getStyle() == BORDER_LEFT) < canvas.drawLine(0, 0, 0, getHeight(), paint); >> > public Border[] getBorders() < return borders; >public void setBorders(Border[] borders) < this.borders = borders; >> public class Border < private int orientation; private int width; private int color = Color.BLACK; private int style; public int getWidth() < return width; >public void setWidth(int width) < this.width = width; >public int getColor() < return color; >public void setColor(int color) < this.color = color; >public int getStyle() < return style; >public void setStyle(int style) < this.style = style; >public int getOrientation() < return orientation; >public void setOrientation(int orientation) < this.orientation = orientation; >public Border(int Style) < this.style = Style; >> Надеюсь, это поможет кому-то:)
Bojan Jovanovic 17 июль 2013, в 21:17
Поделиться
Не работает для меня 🙁
Roger Keays 14 май 2014, в 04:11
Как инициализировать границы?
zionpi 29 июль 2015, в 02:31
Он не может работать правильно, так как код показывает, что он рисует границы в половине размера определенного значения
ucMedia 30 апр. 2018, в 19:16
Показать ещё 1 комментарий
Я просто смотрел на похожий ответ — он мог быть выполнен с помощью Stroke и следующего переопределения:
@Override public void draw(Canvas canvas, MapView mapView, boolean shadow)
sdtechcomm 16 авг. 2010, в 20:49
Поделиться
Большой! Единственное, что меня беспокоит, это то, что при использовании drawRoundRect обводка выглядит ужасно, как на телефоне, так и в эмуляторе.
erdomester 15 май 2012, в 21:40
@erdomester Maybe Paint StrokePaint = new Paint (Paint.ANTI_ALIAS_FLAG); решит вопрос «безобразно по углам»
P-RAD 18 сен. 2015, в 00:05
Вы можете установить границу двумя способами. Один из них — с возможностью рисования, а второй — программный.
Использование Drawable
public static GradientDrawable backgroundWithoutBorder(int color) < GradientDrawable gdDefault = new GradientDrawable(); gdDefault.setColor(color); gdDefault.setCornerRadii(new float[] < radius, radius, 0, 0, 0, 0, radius, radius >); return gdDefault; > Maulik Santoki 11 сен. 2015, в 19:34
Поделиться
Как бы эта форма XML относилась к textView?
Neo42 30 янв. 2018, в 20:57
Я нашел лучший способ поместить границу вокруг TextView.
Используйте изображение с девятью патчами для фона. Это довольно просто, SDK поставляется с инструментом для создания 9-патча изображения, и он включает в себя абсолютно не кодирование.
Nick 25 фев. 2012, в 04:56
Поделиться
Полезно, да, но как это лучше?
aggregate1166877 13 март 2013, в 10:25
Использование формы, как говорит принятый ответ, лучше, чем 9-патч, файл XML более гибкий, чем графический актив
Jose_GD 12 дек. 2013, в 21:22
Конечно, если вы хотите ограничиться созданием графики, которую вы хотите программным способом, то она более гибкая.
Nick 13 дек. 2013, в 19:58
Подход формы бесполезен. Возможно, я единственный, кто испытывает, что тег «solid» всегда обрабатывается, независимо от того, установлен он на прозрачный или нет. И если я хочу создать BORDER, я имею в виду BORDER, а не прямоугольник с цветными внутренними и другими цветными границами. И это НИКОГДА не прозрачное тело. Это всегда мешает цвету. Кроме того, класс, который наследуется от другого, также должен иметь все функции, потому что он наследуется. действительно не могу понять, почему элементарные ОО-дизайн-директивы нарушаются андроидом. Например, я унаследовал от кнопки. Все функции исчезли. Зачем ?
icbytes 10 янв. 2014, в 10:31
Кроме того, использование 9patch заметно медленнее, поскольку его загрузка намного тяжелее.
Jeremie 17 март 2014, в 21:23
@ Джереми Заметно медленнее? Как вы это наблюдаете?
IgorGanapolsky 21 авг. 2014, в 18:49
«Ограниченный» и «программно» не относятся к одному предложению.
mxcl 20 окт. 2017, в 00:07
Показать ещё 5 комментариев
В коде можно добавить что-то вроде этого:
newbie 13 май 2014, в 06:19
Поделиться
Почему инсульт необходим?
IgorGanapolsky 21 авг. 2014, в 18:52
@IgorGanapolsky, инсульт создать реальную границу?
Tash Pemhiwa 25 апр. 2016, в 10:18
Проверьте приведенную ниже ссылку, чтобы сделать закругленные углы http://androidcookbook.com/Recipe.seam?recipeId=2318
Выделенная папка под разрешением в проекте Android не ограничена растровыми изображениями (PNG или JPG файлами), но также может содержать формы, определенные в файлах XML.
Эти формы затем могут быть повторно использованы в проекте. Форма может быть использована для размещения границы вокруг макета. В этом примере показана прямоугольная рамка с изогнутыми углами. В выпадающей папке создается новый файл customborder.xml(в Eclipse используйте меню «Файл» и выберите «Создать», затем «Файл», в котором выбран тип выбранной папки в имени файла и нажмите «Готово» ).
Вводится XML, определяющий форму границы:
Атрибут android:shape установлен в прямоугольник (файлы формы также поддерживают овал, линию и кольцо). Rectangle — значение по умолчанию, поэтому этот атрибут может быть опущен, если он определен как прямоугольник. Подробную информацию о файле формы см. В документации по форматам на http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape.
Углы элементов устанавливают углы прямоугольника для округления. На каждом углу можно задать другой радиус (см. Ссылку на Android).
Атрибуты дополнения используются для перемещения содержимого представления, к которому применяется форма, для предотвращения совпадения содержимого границы.
Цвет рамки здесь установлен на светло-серый (CXCCC шестнадцатеричное значение RGB).
Формы также поддерживают градиенты, но здесь они не используются. Опять же, просмотрите ресурсы Android, чтобы узнать, как определяется градиент. Форма применяется к простыне с помощью android:background=»@drawable/customborder» .
В макете могут быть добавлены другие представления как обычно. В этом примере был добавлен один TextView, а текст белый (FFFFFF шестнадцатеричный RGB). Фон установлен на синий, плюс прозрачность, чтобы уменьшить яркость (значение A00000FF hexadecimal alpha RGB). Наконец, макет смещается с края экрана, помещая его в другой макет с небольшим количеством отступов. Таким образом, полный файл макета:
Bahaa Hany 06 апр. 2014, в 20:03
Поделиться
Ответы только на ссылки крайне не приветствуются, так как ссылки имеют тенденцию разрываться в какой-то момент в будущем. Вставьте соответствующие части своей ссылки в этот ответ, чтобы информация оставалась доступной, даже если ссылка отсутствует.
Andy♦ 06 апр. 2014, в 18:21
У меня есть способ сделать это очень просто, и я хотел бы поделиться им.
Когда я хочу квадрат mi TextViews, я просто помещаю их в LinearLayout. Я установил цвет фона моего LinearLayout, и я добавляю дополнение к моему TextView. Результат в точности соответствует квадрату TextView.
Урок 180. ConstraintLayout. Основы
Android Studio по умолчанию предлагает нам использовать ConstraintLayout при создании разметки экрана. Давайте разберемся, что это за штука и как с ней работать.
Хоть это и 180-й урок, но он будет заточен под новичков, т.к. сюда будет вести ссылка из самых первых уроков. Поэтому, опытных разработчиков прошу не удивляться стилю изложения материала, начало вы можете пропустить.
Начнем с самых азов. Чтобы вы могли размещать на экране различные компоненты (кнопки, поля ввода, чекбоксы и т.п.), необходимо использовать специальный контейнер. Именно в него вы будете помещать компоненты. В Android компоненты называются View, а контейнер — ViewGroup.
Существуют несколько типов ViewGroup: LinearLayout, RelativeLayout, FrameLayout, TableLayout, ConstraintLayout и т.д.
Они различаются тем, как они будут упорядочивать компоненты внутри себя. LinearLayout, например, выстроит их по горизонтальной или вертикальной линии. А TableLayout — в виде таблицы. Более подробно об этом вы можете прочитать в Уроке 6.
В этом уроке мы будет разбираться, как будут вести себя компоненты в контейнере ConstraintLayout.
Вообще, слово Constraint переводится как ограничение, принуждение. Но как по мне, так это не совсем точно отражает смысл. Самое подходящее слово, которое я могу тут подобрать — это привязка. Его и буду использовать.
Практика
Чтобы вам самим попрактиковаться, рекомендую создать модуль для этого урока. О том, как создать модуль, мы уже говорили в Уроке 3.
В меню студии: File > New > New module
Application/Library name: ConstraintLayoutIntro
Module name: p0180constraintlayoutintro
Package name: ru.startandroid.p0180constraintlayoutintro
Итак, у нас в Android Studio есть модуль. А в нем есть файл res > layout > activity_main.xml.
Откроем этот файл двойным кликом. Он выглядит так
Убедитесь, что слева-внизу открытка вкладка Design, и режим просмотра выбран Design, а не Blueprint.
Сейчас на экране вы видите текст Hello World. Этот текст отображен с помощью View, которое называется TextView.
Вы можете видеть его в Component Tree (слева-снизу).
Обратите внимание, что TextView как бы вложен в ConstraintLayout. Это то, о чем я говорил в начале. ConstraintLayout — контейнер, а внутри него находятся различные View, в нашем случае — TextView. Также, можно сказать, что ConstraintLayout является родителем или родительским ViewGroup для TextView.
Давайте удалим TextView с экрана. Для этого просто выделите его на экране или в Component Tree и нажмите кнопку Del на клавиатуре.
Теперь ConstraintLayout пуст и экран ничего не отображает.
Если вы вдруг что-то удалили по ошибке, вы всегда можете восстановить это, нажав Ctrl+Z.
А если вы там совсем чего-то наворотили и не получается все это отменить, то откройте вкладку Text (слева-снизу) и вставьте туда этот код:
Ваш экран вернется к первоначальному состоянию.
Зачем нужны привязки
Давайте добавим на экран какой-нибудь компонент, например, снова TextView. Для этого просто перетащите компонент мышкой из Palette на экран.
После этого TextView появился на экране и в Component Tree.
Запустим приложение и посмотрим, как этот текст будет выглядеть.
Видим, что TextView уехал влево и вверх. Что-то явно пошло не так.
Если вы откроете текстовое представление вашего экрана (вкладка Text слева-снизу), то увидите, что элемент TextView подчеркнут красной линией.
Если навести на него мышкой, то он покажет ошибку:
This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints.
Этим сообщением студия говорит нам, что View не привязано. Его текущее положение на экране актуально только для разработки (т.е. только в студии). А при работе приложения, это положение будет проигнорировано, и View уедет в точку (0,0), т.е. влево-вверх (что мы и наблюдали при запуске).
Как сделать так, чтобы View в ConstraintLayout оставалось на месте и не смещалось в угол? Необходимо добавить привязки (constraints). Они будут задавать положение View на экране относительно каких-либо других элементов или относительно родительского View.
Как добавить привязки
Давайте добавим привязки для нашего TextView.
Если вы выделите на экране TextView, то можете видеть 4 круга по его бокам.
Эти круги используются, чтобы создавать привязки.
Существует два типа привязок: одни задают положение View по горизонтали, а другие — по вертикали.
Создадим горизонтальную привязку. Привяжем положение TextView к левому краю его родителя. Напомню, что родителем TextView является ConstraintLayout, который в нашем случае занимает весь экран. Поэтому края ConstraintLayout совпадают с краями экрана.
Чтобы создать привязку, нажмите мышкой на TextView, чтобы выделить его. Затем зажмите левой кнопкой мыши левый кружок и тащите его к левой границе.
TextView также уехал влево. Он привязался к левой границе своего родителя.
Но вовсе необязательно они должны быть вплотную. Мы можем задать отступ. Для этого просто зажмите левой кнопкой мыши TextView, перетащите вправо и отпустите.
Обратите внимание на число, которое меняется. Это величина отступа TextView от объекта, к которому он привязан (в нашем случае — от левой границы родителя).
Раньше у нас TextView уезжал влево-вверх, а теперь он уехал только вверх. Влево он не уехал, т.к. мы создали для него горизонтальную привязку. И TextView теперь знает, что по горизонтали он должен располагаться с определенным отступом от левого края.
Давайте создадим вертикальную привязку, чтобы закрепить TextView и по вертикали.
Используем верхний кружок и тащим его к верхней границе. TextView привязывается по вертикали к верхней границе родителя. После этого можно перетащить TextView куда вам нужно, чтобы настроить горизонтальный и вертикальный отступы. При перетаскивании вы видите значения отступов.
Теперь TextView привязан и по горизонтали, и по вертикали. Т.е. он точно знает, где он должен находиться на экране во время работы приложения.
Запускаем, чтобы проверить
TextView никуда не уехал, а находится там, где мы и настроили с помощью привязок.
Давайте добавим еще одно View, например, кнопку — Button.
Если сейчас запустить приложение, то кнопка уедет влево-вверх потому что она ни к чему не привязана.
Мы можем привязывать не только к границам родителя, но и к другим View. Давайте привяжем кнопку к TextView.
Мы привязали кнопку к TextView, создав две привязки
1) Вертикальная привязка. Верхняя граница кнопки привязана к нижней границе TextView. Отступ = 82.
Т.е. можно сказать, что по вертикальной оси:
верхняя граница кнопки = нижняя граница TextView + 82
2) Горизонтальная привязка. Левая граница кнопки привязана к правой границе TextView. Отступ 103.
По горизонтальной оси:
левая граница кнопки = правая граница TextView + 103
Т.к. кнопка привязана к TextView, то, если мы сейчас будем перемещать TextView, то кнопка будет также перемещаться.
Добавим еще View. Например, CheckBox.
Давайте сделаем так, чтобы он по горизонтали находился на том же уровне, что и TextView. Для этого нам надо левую границу CheckBox привязать к левой границе TextView и сделать нулевой отступ. А по вертикали привяжем к нижней границе родителя.
Теперь чекбокс и TextView выравнены по левому краю.
Как удалить привязку
Чтобы удалить привязку, надо просто нажать на соответствующий кружок. Удалим привязки у кнопки.
Чтобы удалить сразу все привязки, есть специальная кнопка
Привязка с двух сторон
Мы рассмотрели примеры, когда View было привязано по каждой оси только с одной стороны. Т.е. только слева или справа по горизонтали, и сверху или снизу по вертикали. Но мы можем привязать View с обоих сторон по каждой оси.
Пока рассмотрим только горизонтальную привязку. Но, разумеется, все это будет работать и для вертикальной привязки.
Давайте попробуем, например, левый край привязать к левой границе родителя, а правый край — к правой границе родителя.
Очистим экран от всех View и добавим новый TextView без каких-либо привязок. Теперь привяжем его к левой и правой границам родителя.
TextView сначала ушел влево, т.к. была привязка к левой границе, но после создания привязки к правой границе он выровнялся и теперь расположен по центру. Т.е. привязки уравняли друг друга, и View находится ровно посередине между тем, к чему он привязан слева, и тем, к чему он привязан справа. Т.е. в нашем случае View находится посередине между левой и правой границами его родителя.
Обратите внимание, что такие двусторонние привязки отображаются как пружинки, а не линии.
Давайте немного усложним пример, добавив кнопку и перенастроив привязки
Кнопка привязана к правому краю. А TextView привязан к левому краю и к кнопке.
Если мы теперь будем перемещать кнопку, то TextView будет оставаться ровно посередине между левым краем и кнопкой.
Мы можем настроить двустороннюю привязку так, чтобы View располагалось не посередине, а ближе к левому краю или к кнопке. Для этого удобно использовать специальный скролл в Properties.
Этим скроллом вы задаете пропорцию. По умолчанию значение = 50. Это половина от 100. Соответственно, View находится на половине расстояния между объектами, к которому оно привязано. В нашем случае, при значении = 50, TextView находится посередине между левым краем и кнопкой.
Если поставить значение, например, 25, то TextView будет находится от левого края на расстоянии равном четверти расстояния между левым краем и кнопкой. Если поставить 75, то TextView будет находится от левого края на расстоянии равном 3/4 от расстояния между левым краем и кнопкой.
И как бы не менялось расстояние между левым краем и кнопкой, эти пропорции всегда будут соблюдаться.
В следующем уроке продолжим рассматривать возможности ConstraintLayout.
P.S.
Если вы пришли в этот урок по ссылке из первых уроков, то теперь вы можете вернуться и продолжить обучение. Этой информации вам будет достаточно.
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Compose, Kotlin, RxJava, Dagger, Тестирование, Performance
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня