Что такое view андроид

Зачем Android нужен WebView и как он работает

Несмотря на то что почти все смартфоны на Android получают новые версии ОС только два года, Google худо-бедно старается их поддерживать в актуальном состоянии ещё какое-то время путём обновления своих сервисов. Для этого поисковый гигант просто рассылает апдейты через Google Play, чтобы те пользователи, которым уже не светят традиционные обновления, могли получить запланированные нововведения и экстренные баг-фиксы. Однако, многие, как показала практика, этого не знают, и, видя, как системные компоненты с непонятными им названиями, спрашивают, например, что такое WebView и зачем это нужно. Восполняю пробел.

Вы много раз видели Android System WebView, но наверняка не знаете, что это и зачем нужно

Вы могли видеть WebView, полное название которого Android System WebView, в двух местах: в каталоге Google Play и в разделе «Приложения». Причём мелькает он заметно чаще других, периодически получая обновления и фигурируя в описаниях обновлений стороннего софта, разработчики которого почему-то считают необходимым упомянуть его. Прямо-таки в каждой бочке затычка. Однако, если разобраться чуть глубже, всё становится на свои места.

Что такое Android WebView

WebView — это встроенный браузер для приложений

WebView – это системный компонент, или, проще говоря, приложение, которое отвечает за открытие веб-страниц в рамках других приложений. Думаю, вам не раз приходилось открывать ту или иную ссылку в мессенджере, социальной сети или клиенте электронной почте. Так вот, если вы заметили, почти всегда нажатие на ссылку приводит к тому, что она открывается в интерфейсе самого приложения, вместо того чтобы перенести вас в браузер. Таким образом разработчику проще отслеживать ваши действия, поскольку получить их из стороннего браузера у него не выйдет.

Google рассказала, что изменится в Google Chrome после обновления

Но поскольку Android System WebView является, по сути, самостоятельным компонентом, периодически пользователи сталкиваются с проблемами в его работоспособности. Одни уверяют, что WebView не работает, другие сообщают, что WebView не обновляется, а третьи – что WebView недоступен. Казалось бы, причины у этих проблем могут быть самые разные и, чтобы что-то советовать пользователям, которые с ними столкнулись, нужно хотя бы разузнать дополнительные подробности или по крайней мере худо-бедно разбираться в разработке приложений и особенностях функционирования системных компонентов. Но нет.

WebView и Google Chrome

В конце прошлого года Google интегрировала в Android System WebView компонент Chrome WebView. Проще говоря, компания просто сделала так, что теперь все ссылки в сторонних приложениях будут открываться в виджете Chrome, который будет встроен во все программы по умолчанию. Поисковый гигант объяснил это тем, что это позволяет снизить нагрузку на ресурсы устройства и облегчит эффективность обновления. Но, как показывает практика, это только лишний раз запутало пользователей, которые вообще перестали понимать, что им делать в случае возникновения проблем.

Samsung хочет, чтобы Chrome для Android получил поддержку расширений

А, между тем, всё очень просто. Несмотря на то что Android System WebView по-прежнему обновляется самостоятельно, он глубоко связан с Google Chrome. Поэтому, когда вы сталкиваетесь с перебоями в работе системного компонента, вам нужно не искать обновления для него, а установить апдейт браузера.

Как обновить Android WebView

  • Для этого перейдите в Google Play и свайпните от левого края экрана;
  • Перейдите во вкладку «Мои приложения и игры;

Зачастую обновлять следует не Android System WebView, а Google Chrome

  • В открывшемся окне нажмите «Обновить всё» или отыщите Google Chrome и обновите его;
  • Для надёжности рекомендуется обновить и Android System WebView, если для него тоже доступно обновление.

Chrome загружает процессор и жрёт зарядку? Google всё исправит

На первый взгляд, может показаться, что всё это глупости, и на самом деле обновления ничего не решают, но это не так. В прошлом Google неоднократно выпускала такие патчи, которые возвращали работоспособность системных компонентов, от которых во многом зависела и работа сторонних приложений. Последний такой случай произошёл в декабре прошлого года, когда из-за сбоя в Chrome пользователи лишились возможности открывать ссылки в приложениях, которые к Google не имеют никакого отношения. Поэтому не пренебрегайте обновлениями. Они выходят для вас.

Источник

Рисование собственных представлений (View) в Android

Получите полный контроль над представлением и оптимизируйте его производительность

В преддверии старта курса «Android Developer. Professional» приглашаем всех желающих принять участие в открытом вебинаре на тему «Пишем gradle plugin».

А пока делимся переводом полезного материала.

Введение

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

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

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

Зачем создавать собственные представления?

Чтобы реализовать собственное представление, в большинстве случаев понадобится больше времени, чем если использовать обычные представления. Создавать собственные представления стоит лишь в том случае, если нет другого, более простого способа реализовать нужную вам возможность или если у вас есть какие-либо из указанных ниже проблем, которые можно устранить за счет создания собственного представления.

Читайте также:  Zip pro для андроид

Производительность: в вашем макете много представлений и вы хотите оптимизировать их, нарисовав одно, более легкое собственное представление.

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

Необходимо создать специализированное представление, требующее рисования вручную.

Общий подход

Чтобы приступить к созданию компонентов для реализации собственных представлений, необходимо выполнить следующие основные шаги.

Создать класс, расширяющий базовый класс или подкласс представления.

Реализовать конструкторы, использующие атрибуты из XML-файла.

Переопределить некоторые методы родительского класса (onDraw(), onMeasure() и т. д.) в соответствии с нашими требованиями.

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

Пример

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

Шаг 1. Создадим класс с именем CircularTextView .

Шаг 2. Расширим класс виджета TextView. Здесь под TextView в IDE выдается ошибка, в которой сообщается, что у этого типа есть конструктор и он должен быть инициализирован.

Шаг 3. Добавим конструкторы в класс.

Это можно сделать двумя способами.

Первый способ добавления конструкторов в класс показан ниже.

Другой способ заключается в добавлении аннотации @JvmOverloads к вызову конструктора, как показано ниже.

Часто нас сбивает с толку то, что у представления есть несколько разных типов конструкторов.

View(Context context)

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

View(Context context, @Nullable AttributeSet attrs)

Конструктор, который вызывается при формировании представления из XML-файла. Он вызывается, когда представление создается из XML-файла, содержащего атрибуты представления. В этом варианте конструктора используется стиль по умолчанию (0), поэтому применяются только те значения атрибутов, которые есть в теме контекста и заданном наборе AttributeSet .

Шаг 4. Самый важный шаг в отрисовке собственного представления — это переопределение метода onDraw() и реализация необходимой логики отрисовки внутри этого метода.

Метод OnDraw (canvas: Canvas?) имеет параметр Canvas (холст), с помощью которого компонент представления может отрисовывать себя. Для рисования на холсте необходимо создать объект Paint.

Как правило, процесс рисования определяется двумя аспектами:

что рисовать (определяется объектом Canvas);

как рисовать (определяется объектом Paint).

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

Давайте займемся кодом. Мы создаем объект Paint и присваиваем ему некоторые свойства, а затем рисуем фигуру на холсте (объект Canvas), используя наш объект Paint. Метод onDraw() будет выглядеть так:

IDE показывает предупреждение о том, что следует избегать выделения объектов во время операций отрисовки или операций с макетом. Это предупреждение возникает потому, что метод onDraw() много раз вызывается при отрисовке представления, в котором каждый раз создаются ненужные объекты. Поэтому, чтобы избежать ненужного создания объектов, мы вынесем соответствующую часть кода за пределы метода onDraw() , как показано ниже.

При выполнении отрисовки всегда помните о том, что следует повторно использовать объекты вместо создания новых. Ваша IDE может указать на потенциальные проблемы, но полагаться на нее не стоит. Например, она не сможет отследить случай, когда объекты создаются внутри методов, вызываемых из метода onDraw() . Поэтому лучше проверять все самостоятельно.

Шаг 5. Мы закончили с рисованием. Теперь давайте внесем этот класс представления в XML.

Добавьте этот XML-макет в вашу активность (Activity) и запустите приложение. Вот что будет на экране.

Выглядит неплохо, правда? Теперь сделаем так, чтобы значение динамическому свойству цвета в circlePaint назначалось из активности, а также добавим контур к кружку. Для этого в классе CircularTextView необходимо создать несколько методов-сеттеров, чтобы можно было вызывать эти методы и устанавливать свойства динамически.

Для начала давайте реализуем настройку цвета отрисовки. Для этого создадим сеттер, как показано ниже.

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

Неплохо, правда? Теперь давайте добавим контур к кружку. Контур будет задаваться двумя входными параметрами: шириной линии контура и ее цветом. Чтобы задать цвет линии контура, нам нужно создать объект Paint точно так же, как мы это делали для кружка. Чтобы задать ширину линии контура, мы создадим переменную, установим для нее нужное значение и используем его в методе onDraw() . Полный код будет выглядеть так:

Теперь в активности можно динамически настраивать эти атрибуты нужным образом.

Далее давайте запустим приложение, устанавливая различные цвета для нашего виджета.

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

Для начала создадим файл с именем attrs.xml в папке values. Этот файл будет содержать все атрибуты для различных представлений, которые мы создаем сами. В приведенном ниже примере у нашего представления под названием CircularTextView имеется атрибут ct_circle_fill_color , который принимает значение цвета. Аналогичным образом мы можем добавить и другие атрибуты.

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

Теперь просто переходим к XML-макету и устанавливаем значение свойства, соответствующее нужному цвету, после чего запускаем приложение. На выходе мы увидим нужный результат.

В моем случае результат был таким:

Читайте также:  Как взломать puzzle quest для андроид

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

Обновление представления

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

invalidate()

invalidate() — это метод, который инициирует принудительную перерисовку определенного представления. Проще говоря, метод invalidate() следует вызывать в случае, когда требуется изменение внешнего вида представления.

requestLayout()

Если в какой-то момент происходит изменение состояния представления, то метод requestLayout() сообщает системе представлений, что необходимо сделать перерасчет фаз «измерение» (Measure) и «макет» (Layout) для данного представления (измерение → макет → рисование). Проще говоря, метод requestLayout() следует вызывать в случае, когда требуется изменение границ представления.

Теперь, я надеюсь, вы знаете в общих чертах, как создавать собственные представления. Чтобы они демонстрировали отличную производительность, необходимо освоить все описанные здесь методы.

Источник

Пользовательский интерфейс. View, основные атрибуты

Пользовательский интерфейс

Любое приложение отображает пользователю графический интерфейс. На картинке ниже вы можете увидеть примеры текстовых элементов ( TextView ), кнопок ( Button ), картинок ( ImageView ).

Пользовательский интерфейс представлен layout файлом (рус. Макетом), который создаётся, используя язык разметки XML. Макет определяет структуру пользовательского интерфейса экрана. Все элементы макета построены с использованием иерархии объектов View и ViewGroup . View – компонент, который пользователь может видеть и взаимодействовать с ним. В то время как ViewGroup является невидимым контейнером, который определяет структуру макета, как показано на рисунке.

Объекты View обычно называют «виджетами». Они могут быть представлены одним из классов-наследников, таких как Button , TextView , ImageView . Объекты ViewGroup обычно называют «контейнерами». Они определяют, как именно будут располагаться элементы внутри экрана. Подробнее с ViewGroup мы познакомимся в следующих уроках.

Вы можете работать с макетами двумя способами:

  • Объявлять элементы пользовательского интерфейса в XML коде. Android предоставляет простой XML файл, в котором можно добавлять разные View и ViewGroup вручную. Вы также можете использовать редактор макетов Android Studio, чтобы создать свой XML-макет, не заглядывая в XML код.
  • Создавать элементы макета во время выполнения программы из Java кода. Приложение может создавать объекты View и ViewGroup (и управлять их свойствами) программно.

В этом уроке мы подробнее будем рассматривать именно первый вариант. Откройте файл activity_main.xml . Для ознакомления с синтаксисом языка XML мы будем вносить изменения в этот файл.

XML синтаксис

XML – язык разметки, определяющий теги (элементы) и их атрибуты. Язык очень похож на HTML. Давайте разберём на примере.

Тег ограничивается скобками . Название тега в данном случае – LinearLayout . Всё, что находится между скобками – называется атрибутами. В примере два атрибута:

Атрибуты состоят из названия и значения, которые разделены символом = , причём значение атрибута всегда пишется в кавычках. У атрибута android:layout_width=»match_parent» название – android:layout_width , а значение – match_parent .

После открытия тега, его обязательно надо закрывать. Это можно сделать используя конструкцию (в примере – ).

У элемента могут быть вложенные элементы:

Если у какого-то тега нет вложенных элементов, то лучше сократить закрывающийся тег, используя конструкцию . Обратите внимание на тег TextView :

Пример макета

Layout должен содержать только один корневой элемент, который должен быть объектом View или ViewGroup (обычно используют ViewGroup ). После того, как вы определили корневой элемент, вы можете добавить дополнительные объекты в качестве дочерних элементов, чтобы постепенно создавать пользовательский интерфейс. Давайте изменим файл activity_main.xml . Например, вот код XML-макета, который использует контейнер LinearLayout в качестве корневого элемента и два виджета внутри него: TextView и Button .

При запуске приложения макет будет выглядеть так:

Связь XML и Java кода

Когда мы запускаем приложение, каждый файл макета XML компилируется в ресурс View . Связь XML файла и Activity происходит в методе onCreate класса MainActivity . Этот код также сгенерировала Android Studio при создании Activity .

Связь происходит при вызове метода setContentView(R.layout.activity_main) . Обращаться к layout файлу нужно в виде R.layout.имя_файла . Это связано с внутренним хранением ресурс файлов в Android системе. В нашем случае файл по умолчанию называется activity_main.xml , поэтому указываем R.layout.activity_main (постфикс xml опускается).

Метод onCreate() вызывается Android системой во время загрузки приложения (эту тему рассмотрим подробнее в следующих уроках).

XML Атрибуты

Каждый объект View и ViewGroup поддерживает множество атрибутов XML.

Вы можете заметить, что в названии атрибутов есть префикс android . Этот префикс называют пространством имён (англ. namespace). В данном случае он означает, что атрибуты объявлены в библиотеке android . Также вы могли заметить, что у корневого элемента в макете обязательно указывается атрибут xmlns:android=»http://schemas.android.com/apk/res/android» . Это сделано для объявления пространства имён.

Некоторые атрибуты специфичны для конкретного элемента. Например, TextView поддерживает атрибут android:textSize (русс. размер текста). Атрибуты наследуются View объектами при расширении класса другого виджета. Некоторые из атрибутов являются общими для всех виджетов, поскольку они наследуются от корневого класса View (например, текст – android:text , ширина – android:layout_width , высота – android:layout_height , идентификатор – android:id ).

Атрибут android:text

Атрибут android:text отвечает за текст, который будет отображаться на экране:

Обязательные атрибуты android:layout_width, android:layout_height

У любого View компонента необходимо объявить атрибуты android:layout_width (русс. ширина макета), android:layout_height (русс. высота макета), иначе приложение не скомпилируется.

Существует три варианта указания ширины и высоты:

  • фиксированный размер в dp . Density-independent Pixel (сокр. dp) – это виртуальный пиксель, основанный на физической плотности экрана устройства. Android переводит это значение в соответствующее количество реальных пикселей для разных экранов.
  • wrap_content означает, что элемент занимает место, необходимое для отрисовки его содержимого.
  • match_parent означает, что элемент занимает столько же места, сколько и родительский элемент. Раньше вместо этого значения использовалось fill_parent . Но это устаревший вариант, поэтому не используйте его.
Читайте также:  Колин макрей для андроида

Создадим три TextView , чтобы показать эти значения:

В данном случае при размере wrap_content TextView занимает столько же места, сколько и текст в нём. Вы можете изменить текст, чтобы убедиться, что размер текста и элемента TextView будут совпадать.

Вы могли заметить, что в примере мы использовали атрибуты android:background (русс. цвет фона), android:marginTop (русс. отступ сверху), android:textColor (русс. цвет текста), android:textSize (русс. размер текста) для наглядности. Сейчас мы рассмотрим эти атрибуты детальнее.

Атрибут android:textSize

Атрибут android:textSize отвечает за размер текста, как вы догадались. Разберём на примере:

Размер текста нужно указывать в единицах sp (Scale-independent Pixels). Отличие от dp состоит в том, что этот размер изменяется в зависимости от настроек размера шрифта в телефоне. В Android системе у пользователя есть возможность в настройках изменить шрифт в своём телефоне на крупный, средний или маленький. Чтобы текст в приложении автоматически изменился вместе с этой настройкой рекомендуется использовать единицы sp для текста.

Атрибут android:background

Атрибут android:background определяет фоновый цвет элемента. Когда вы указываете атрибут android:background , то видите точно, сколько места занимает элемент. Разберём на примере:

Давайте разберём запись android:background=»#00FF00″ . #00FF00 – простой способ закодировать любой цвет. Вы можете генерировать нужные цвета онлайн на этом сайте. Для самых любопытных ниже объяснение, как работает задание цветов.

Цвет задаётся в формате ARGB. Это аббревиатура расшифровывается, как Alpha Red Green Blue. Дело в том, что любой цвет можно получить из сочетания в разной степени 3 цветов: красного, зелёного и синего. Также цвета могут быть прозрачными, именно это обозначает слово Alpha.

Чтобы задать цвет мы указываем символ # и 3 байта в шестнадцатеричной системе, которые отвечают за каждый цвет. Первый байт отвечает за красный цвет, второй – за зелёный, третий – за синий.

В данном примере мы указали, что красного цвета будет 00 , зелёного цвета будет FF (максимальное значение), и синего будет 00 . Поэтому фон стал зелёным. Также можно не писать второе число, если оно такое же, как и первое. Т.е. мы можем записать этот же цвет : android:background=»#0F0″ . Если хотите узнать ещё больше о RGB формате, то читайте здесь.

Атрибут android:textColor

Атрибут android:textColor похож на атрибут android:background только он задаёт цвет текста:

Атрибут android:textStyle

Атрибут android:textStyle отвечает за стиль текста. Его возможные значения:

  • normal – обычный текст (применяется по умолчанию, если вы не указали атрибут android:textStyle ).
  • bold – толстый.
  • italic – курсив.

Атрибут android:id

Атрибут android:id у View позволяет работать с ней из Java кода и ссылаться на эту View внутри макета. Покажем на примере работы с View элементом из Java кода:

Символы @+id/ в начале строки указывают, что будет создан новый идентификатор. После этого следует новое имя ресурса, которое должно быть создано и добавлено к нашим ресурсам (в данном случае – text ). Из java кода к этому элементу можно будет обратиться с помощью вызова R.id.text .

С помощью вызова метода findViewById(R.id.text) можно связать View из XML макета с Java объектом TextView . После этого можно вызывать любые методы, которые есть у данного объекта. Для примера мы вызвали метод setText() и указали текст Text from java code .

В результате увидим, что отобразился тот текст, который мы указали из Java кода:

Атрибуты android:padding, android:layout_margin

Рассмотрим атрибуты, которые задают отступы элементов:

  • android:padding (top, bottom, right | end, start | left)
  • android:layout_margin (top, bottom, right | end, start | left)

В xml коде они указываются так:

Параметры (top, bottom, right | end, start | left) означают, с какой стороны вы хотите сделать отступ. Параметры right | end , start | left означают практически одно и тоже. Только start, end добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо значений left , right . Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 21 версии и выше).

Если указать padding , layout_margin без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, что padding делает отступ внутри элемента, а layout_margin делает отступ снаружи. Пример:

Можно сделать тоже самое, указывая отступы со всех сторон явно:

Атрибуты android:gravity, android:layout_gravity

Атрибуты android:gravity и android:layout_gravity отвечают за выравнивание. Ключевое отличие состоит в том, что android:gravity отвечает за выравнивание содержимого внутри элемента, а layout_gravity отвечает за выравнивание элемента относительно родительского контейнера. Разберём на примере:

В данном примере текст в первом TextView выровнен по правому краю, т.к. мы указали атрибут android:gravity=»end» . Второй элемент прижался к правой стороне родительского контейнера, потому что указан атрибут android:layout_gravity=»end» .

Также у этого атрибута могут быть другие значения, которые указывают, как именно выровнять элемент. Перечислим основные из них: top, bottom, start, end, center, center_horizontal, center_vertical

Различные значения можно комбинировать, используя символ | . Если хотим выровнять содержимое по правому нижнему углу, то можем использовать значение end|bottom .

Верите или нет, профессиональные разработчики не запоминают всё – поиск информации является ключевой частью работы. Поэтому не пытайтесь запомнить все View объекты и атрибуты сразу. Google сделал специальный словарь, в котором вы можете найти тот компонент, атрибут или класс, который вам необходим.

Заключение

Сегодня вы познакомились с пользовательским интерфейсом в Android системе. Теперь вы знаете язык XML и основные компоненты пользовательского интерфейса, а также их атрибуты. Информации было много, поэтому это нормально, если вы её не запомнили. При необходимости в следующих уроках вы сможете возвращаться к этому уроку, как к справочнику. Скорее выполняйте практические задания к этому уроку, чтобы набить руку и создать первый макет реального приложения!

Источник

Оцените статью