Рубрики
Без рубрики

Основы Android: Использование относительного расположения

В этой статье мы создадим неинтерактивное приложение, используя только относительную компоновку… С тегами android, java, для начинающих, android studio.

В этой статье,

Мы создадим неинтерактивное приложение, используя только RelativeLayout ViewGroup и без строки дополнительного кода java , а также попутно узнаем об относительной компоновке .

Весь контент вдохновлен, Курс udacity от Google Основы Android: Пользовательский интерфейс . Это первая часть из пяти частей Android Basics Nanodegree Program серии, этот курс предназначен для основ Android и Программирование на Java . Итак, я бы написал серию блогов, и это мой второй блог в этой серии.

Дизайн пользовательского интерфейса нашего приложения будет выглядеть следующим образом,

Что такое Относительная компоновка ❓

/| Вид – это прямоугольная область на экране. A Группа просмотра – это большой вид, который может содержать внутри себя меньшие виды. Меньшие представления называются дочерними элементами ViewGroup, а ViewGroup называется родительским элементом его дочерних элементов. По сути, он используется для аккуратного отображения большего количества просмотров на экране.

A RelativeLayout – это распространенный тип ViewGroup, который позволяет нам позиционировать дочерние представления относительно родственных элементов (например, слева или ниже другого вида) или относительно родительской области RelativeLayout (например, выровненный по низу, левому краю или центру) .

Виды Позиционирования

По умолчанию все дочерние виды отображаются в верхнем левом углу макета , поэтому вы должны определить положение каждого вида, используя различные свойства макета, доступные в RelativeLayout. LayoutParams .

Относительный макет. Параметры компоновки

View внутри relativelayout, использует значение этих относительных параметров компоновки , чтобы определить, где расположить вид на экране. Значение для каждого свойства макета является либо логическим значением для включения положения макета относительно родительского RelativeLayout , либо идентификатором , который ссылается на другое представление в макете , относительно которого должно быть расположено представление.

Ниже приведены основные атрибуты в RelativeLayout, доступные для его представления. Они относятся к четырем различным категориям:

1️Выровнять по родительскому виду

Эти типы атрибутов позволяют закрепить представление на любой стороне родительского представления. Его атрибуты имеют два значения либо верно или false логическое значение.

Если значение true, сделайте так, чтобы нижний край этого представления совпадал с нижним краем родительского представления. андроид: Layout_alignparentbottom_площадка
Если значение true, то конечный край этого представления совпадает с конечным краем родительского представления. андроид: layout_align Родительский конец
Если значение true, сделайте так, чтобы левый край этого представления совпадал с левым краем родительского представления. андроид: layout_alignParentLeft – Расположение
Если значение true, сделайте так, чтобы правый край этого представления совпадал с правым краем родительского представления. android:layout_alignParentRight
Если значение true, сделайте так, чтобы начальный край этого представления совпадал с начальным краем родительского представления. android:Родительский запуск layout_align
Если значение true, сделайте так, чтобы верхний край этого представления совпадал с верхним краем родительского android:layout_alignParentTop

Примеры.

2️Центр относительно родительского представления

Его атрибуты имеют два значения либо верно или false логическое значение. Если вы хотите разместить свои представления в центре относительно родительского элемента, вы можете использовать следующие 3 атрибута:

Если значение true, центрирует этот дочерний элемент по горизонтали внутри его родительского элемента. андроид: layout_center Горизонтальный
Если значение true, центрируйте этот дочерний элемент по горизонтали и вертикали внутри его родительского элемента. android:layout_centerInParent
Если значение true, центрирует этот дочерний элемент вертикально внутри его родительского элемента. андроид: layout_center Вертикальный

Примеры.

3️RelativeОтносительно дочернего представления

Мы можем расположить новые виды относительно других существующих видов. Нам просто нужно создать идентификатор якорного представления (в главном дочернем представлении его положение должно быть фиксированным), используя атрибуты android:id . Теперь значение этих атрибутов является тем же идентификатором, который ссылается на представление привязки, относительно которого должно быть расположено представление. Например. android:layout_toLeftOf="@id/name_of_anchorView"

Для этого можно использовать следующие атрибуты.

Позиционирует нижний край этого вида над заданным идентификатором вида привязки. андроид: layout_ выше
Позиционирует верхний край этого вида ниже заданного идентификатора привязанного вида. андроид: layout_below (расположение ниже)
Помещает начальный край этого вида в конец заданного идентификатора привязанного вида. android:layout_ до Конца
Позиционирует правый край этого вида слева от заданного идентификатора привязанного вида. android:layout_toLeftOf
Позиционирует левый край этого вида справа от заданного идентификатора привязанного вида. андроид: layout_toRightOf
Помещает конечный край этого вида в начало заданного идентификатора привязанного вида. андроид: layout_ для Начала

Примеры.

4️Выровнять вид относительно дочернего вида

Если вы хотите выровнять новый вид относительно любого существующего вида, вы можете использовать следующие атрибуты. Здесь также значением этих атрибутов будет идентификатор, который относится к якорному представлению

Позиционирует базовую линию этого представления на базовой линии заданного идентификатора привязанного представления. android:layout_align Базовая линия
Делает так, чтобы нижний край этого представления совпадал с нижним краем заданного идентификатора привязанного представления. android:layout_align Снизу
Делает так, чтобы конечный край этого представления совпадал с конечным краем заданного идентификатора привязанного представления. андроид: layout_alignment выравнивание
Делает так, чтобы левый край этого представления совпадал с левым краем заданного идентификатора привязанного представления. андроид: layout_align Слева
Делает так, чтобы правый край этого представления совпадал с правым краем заданного идентификатора привязанного представления. android:layout_align справа
Делает начальный край этого представления совпадающим с начальным краем заданного идентификатора привязанного представления. андроид: layout_align Начало
Делает так, чтобы верхний край этого представления совпадал с верхним краем заданного идентификатора привязанного представления. android:layout_align Сверху

Примеры.

Мы создадим Приложение для поздравительных открыток , которое в основном будет неинтерактивным, т.Е. Без строки дополнительного java-кода, просто XML-код для разработки пользовательского интерфейса нашего приложения с использованием относительного макета.

Всякий раз, когда мы пишем код XML-макета, думайте о 3 шаге в уме

Шаг 1-> Выберите виды
Шаг 2->Положение виды
Шаг 3-> Стили представлений

Шаг 1:Выберите вид

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

Наш макет будет выглядеть следующим образом,

Глядя на изображение, становится ясно, что, Мы будем использовать 2 textView1 Просмотр изображений итак, мы видим, что на заднем плане изображения есть изображение, а их текст написан в двух разных местах.

Шаг 2: Расположите виды

Как выбрать, какую группу просмотра мы должны использовать для позиционирования представлений, поскольку мы видим, что два текстовых представления перекрываются над ImageView, следовательно, относительная компоновка идеально подходит для этой ситуации, помогает позиционировать два текстовых представления так, как они расположены.

Перекрывающийся Вид

В относительном расположении Представления перекрываются и складываются сверху вниз соответственно, как написано в XML

Вставить изображение
  • Сохраните изображение в папке drawable/| и используйте атрибуты android:src для отображения изображения Здесь мы также должны
  • центрировать обрезку на изображении, чтобы оно увеличивало изображение и энтропировало его, чтобы создать полное изображение и создать приятное ощущение погружения, а его ширина и высота равнялись match_parent так, чтобы изображение занимало все пространство размера экрана
Позиционирование текстового представления

Теперь, когда мы выбираем RelativeLayout, подумайте о том, как выровнять и расположить представления относительно других.
  • С ДНЕМ РОЖДЕНИЯ Текстовое представление по умолчанию будет размещено в правом верхнем углу нам не нужно добавлять какие-либо параметры компоновки в представление позиции
  • РОХИТ.К TextView необходимо было расположить в правом нижнем углу мы будем использовать два атрибута, как показано выше, и сделаем это значение равным true
  • высота и ширина должны быть установлены на wrap_content_контент поскольку нам нужно быть гибкими в отношении объема написанного текста

Теперь с помощью этого кода макет будет выглядеть следующим образом…

Шаг 3: Стиль представлений

Нам нужно добавить или изменить еще несколько атрибутов, чтобы добавить некоторый стиль и сделать наш пользовательский интерфейс лучше. Так что добавьте стиль, чтобы сделать пользовательский интерфейс более красивым и улучшить пользовательский опыт

  • Для оформления мы можем изменить размер, шрифт и цвет текста в зависимости от ситуации.
  • Мы также можем изменить цвет background color текстового представления.
  • И лучше всего также добавить отступ или поле так что это делает его более читаемым и не разбитым в углу.
Для увеличения Размера Текста

Сделайте размер текста 36sp используя атрибуты, android:textSize

Настройка шрифта

Установите шрифт текста на без засечек-светлый с помощью атрибутов, android:FontFamily

Настройка цвета

используйте атрибуты android:textColor

Фон TextView

для изменения цвета фона мы будем использовать атрибуты android:background

Добавьте отступы и поля

мы будем использовать атрибуты android:padding и android:layout_margin мы можем использовать либо оба, либо оба в зависимости от ситуации.

Стиль зависит от того, насколько лучше мы можем думать, чтобы наше приложение выглядело лучше и имело эстетичный вид Это полностью зависит от опыта и наше творчество

ЭТО Изображение нашего приложения, как оно будет выглядеть после написания этих кодов в XML

Код для записи в activity_main.xml внутри Android Studio находится внутри res папки

Вот и все на сегодня!

Рекомендации:

Если вам понравился мой контент, пожалуйста, поделитесь Также, если у вас есть какие-либо вопросы или предложения, не стесняйтесь комментировать ниже .

Если вы подумываете о том, чтобы начать разработку Android, вы можете проверить этот блог,

Чему нужно научиться, чтобы начать разработку приложений для Android?

РОХИТ КУМАР ・ 12 июля ・ 6 мин читать

Спасибо! 😊

Вы можете следовать за мной по Linkedin Твиттер

Оригинал: “https://dev.to/rohitk570/android-basics-using-relative-layout-2980”

Читайте ещё по теме: