Руководство по интерфейсу андроид

В конце декабря 2021-го Android обновил рекомендации по архитектуре мобильных приложений. Публикуем перевод гайда в пяти частях:

Обзор архитектуры

Слой UI (вы находитесь здесь)

События UI

Доменный слой

Слой данных

UI отображает данные приложения на экране: это основное место взаимодействия с пользователями. Если отображаемые данные меняются — из-за взаимодействия с пользователем (например, нажатия кнопки) или внешнего воздействия (например, отклика сети) — UI должен обновиться и отразить изменения. По сути UI – это состояние приложения, полученное из слоя данных и представленное визуально.

Данные приложения из слоя данных обычно отличаются по формату от отображаемой информации. К примеру, для UI может требоваться только часть полученной информации или понадобится объединить два класса DataSource, чтобы отобразить нужную пользователю информацию. Вне зависимости от выбранной логики, пользовательскому интерфейсу нужно передать всю информацию для полной отрисовки экрана. Слой UI преобразует изменения данных приложения в формат, удобный для отображения на UI, а затем отображает эти данные на экране.

Разберём простой пример

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

Таким образом, приложение позволяет пользователям:

• Просматривать доступные для прочтения статьи.

• Фильтровать их по категориям.

• Войти в систему и добавить интересные статьи в закладки.

• Пользоваться премиальными фичами, если к ним есть доступ.

В следующих разделах будем использовать это приложение как пример. Вы познакомитесь с принципами Unidirectional Data Flow (UDF) и узнаете, с какими проблемами в контексте архитектуры приложения в слое UI они помогают разобраться.

Архитектура слоя UI

Под термином UI подразумеваются UI-элементы (например, Activity и Fragment), которые отображают данные: вне зависимости от того, какими API они пользуются для этой цели — View или Jetpack Compose. Цель слоя данных — хранить данные приложения, управлять ими и открывать к ним доступ. Поэтому слой UI должен:

1. Принимать данные приложения и преобразовывать их в данные, которые UI легко сможет отрисовать.

2. Принимать данные, которые может отрисовать UI, и преобразовывать их в элементы UI, которые будут показаны пользователю.

3. Принимать события о вводе данных пользователем от элементов UI из пункта 2 и отражать в данных UI изменения, которые они вносят.

4. Повторять шаги 1–3 необходимое количество раз.

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

• Как описать UI-состояние.

• UDF: как с его помощью создать UI-состояние и управлять им.

• Как открывать доступ к UI-состоянию с помощью данных типа observable в соответствии с принципами UDF.

• Как реализовать UI, который принимает UI-состояние типа observable.

Самая базовая из этих задач — описание UI-состояния.

Как описывать UI-состояния

Вернёмся к примеру: UI показывает список статей и метаданные для каждой из них. Информация, которую приложение показывает пользователю, и есть UI-состояние.

UI – то, что пользователь видит на экране. С помощью UI state приложение управляет тем, что пользователь увидит на экране.

Два этих понятия — как две стороны одной монеты: UI — это визуальное представление UI-состояния. Любые изменения UI-состояния немедленно отражаются в UI.

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

data class NewsUiState(

    val isSignedIn: Boolean = false,

    val isPremium: Boolean = false,

    val newsItems: List<NewsItemUiState> = listOf(),

    val userMessages: List<Message> = listOf()

)

data class NewsItemUiState(

    val title: String,

    val body: String,

    val bookmarked: Boolean = false,

    ...

)

Неизменяемость

В предыдущем примере UI-состояние описано как неизменяемое. Основное преимущество такого подхода — неизменяемые объекты гарантируют целостность состояния приложения в любой момент времени. 

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

Если нарушить этот принцип, у одной и той же информации появится несколько source of truth (источников истины), что приведёт к противоречивости данных и багам, которые трудно обнаружить.

Скажем, если бы в флаг bookmarked в объекте NewsItemUiState из UI-состояния обновлялся в классе Activity, за статус статьи «сохранена» отвечали бы параллельно и этот флаг, и слой данных. Неизменяемые классы помогают успешно предотвратить возникновение таких антипаттернов.

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

Правила именования в этом гайде

Классы UI-состояния названы в соответствии с описываемой ими функциональностью на экране или части экрана. Правило выглядит следующим образом:

функциональность + UiState

К примеру, состояние, при котором на экране отображены новости, будет называться NewsUiState. Состояние, при котором статья отображается в списке статей, — NewsItemUiState.

Как управлять состоянием с помощью UDF

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

Лучше обрабатывать эти взаимодействия с помощью дополнительной сущности:

• она будет описывать логику, применяемую к каждому событию,

• и трансформировать данные, получаемые из источников, чтобы создать UI-состояние. 

Такие взаимодействия и их логика могут располагаться непосредственно в UI, однако такой подход быстро приведёт к нагромождению кода: UI будет постепенно выходить за рамки своего определения, начнёт распоряжаться данными, производить их, преобразовывать и так далее. 

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

В этом разделе рассматривается UDF — архитектурный шаблон, который помогает привести код в порядок, разделив ответственности.

State holder

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

В последнем случае его реализация – это, как правило, экземпляр ViewModel. Однако, в зависимости от требований приложения, иногда можно обойтись обычным классом. Так, новостное приложение из примера использует в качестве state holder класс NewsViewModel: он производит UI-состояние для экрана, изображённого в начале статьи.

Ключевой момент: тип ViewModel — реализация, у которой есть доступ к слою данных. С помощью него рекомендуется управлять UI-состоянием в масштабе целого экрана. Помимо прочего, он автоматически переживает изменения конфигураций. Класс ViewModel определяет логику, которая применяется к событиям в приложении, и в результате производит обновлённое состояние.

Смоделировать взаимозависимость между UI и сущностью, которая производит его состояние, можно множеством способов. Так как под взаимодействием между UI и его классом ViewModel по большей части подразумевают ввод некоего события и вывод соответствующего состояния, их отношения можно изобразить следующим образом:

UDF — паттерн, в котором поток состояния направлен вниз, а поток событий – вверх. Вот что этот паттерн даёт архитектуре приложения:

• ViewModel хранит состояние и открывает к нему доступ для UI. UI-состояние – это данные приложения, преобразованные ViewModel.

• UI уведомляет ViewModel о пользовательских событиях.

• ViewModel обрабатывает действия пользователя и обновляет состояние.

• Обновлённое состояние возвращается обратно в UI, а тот его отрисовывает.

• Все предыдущие пункты повторяются с каждым событием, меняющим состояние.

В случае с конечными точками навигации или экранами ViewModel получает данные из репозиториев или классов UseCase, а затем преобразует их в UI-состояния, применяя к ним эффекты событий, вызвавших изменение состояния. В упомянутом ранее примере есть список статей: у каждой указаны заголовок, описание, источник, имя автора, дата публикации и возможна пометка «добавлено в закладки». UI каждой статьи выглядит так:

Когда пользователь отправляет запрос, чтобы добавить статью в закладки, он создаёт событие, которое способно изменить состояние. Так как ViewModel производит состояния, его ответственность – описывать логику, необходимую для заполнения всех полей в UI-состоянии, и обрабатывать события, без которых UI не сможет отрисоваться полностью.

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

Виды логики

• Бизнес-логика — то, как меняется состояние. Один из примеров — добавление новостной статьи в закладки: эта фича наделяет приложение ценностью. Бизнес-логику обычно помещают в доменный слой или слой данных, но точно не в слой UI.

• Логика поведения UI или логика UI — то, как мы отображаем изменения состояния на экране. Например, с помощью Android Resources получаем текст, который нужно отобразить на экране; переходим на нужный экран, когда пользователь нажимает на кнопку; или показываем пользователю сообщение на экране с помощью Toast или Snackbar.

Логика UI, в особенности когда она затрагивает такие типы UI, как Context, должна находиться в UI, а не во ViewModel. Если UI приложения усложняется, и вам хочется делегировать логику UI другому классу, чтобы разделить ответственности и легче тестировать приложение, можно создать простой класс, который будет выполнять роль экземпляра state holder. Простые классы, созданные в UI, могут получать зависимости от Android SDK: их жизненный цикл ограничен жизненным циклом UI, в то время как объекты ViewModel живут дольше.

Подробнее о state holder и том, как он помогает построить UI, можно почитать в гайде «Jetpack Compose State».

Зачем использовать UDF

UDF моделирует цикл производства состояний, как показано на рисунке выше. Также он отделяет источник изменений состояния от места их трансформации и получения. Благодаря такому разделению UI может выполнять только те действия, которые следуют из его названия: отслеживать изменения состояния и сообщать о намерениях пользователя, передавая эти изменения во ViewModel, а в результате отображать информацию.

Другими словами, UDF позволяет добиться:

• Согласованности данных. У UI есть только один источник правды.

• Удобства тестирования. Источник состояния изолирован, а значит, его можно тестировать отдельно от UI.

• Надёжности. Изменение состояния следует чётко заданному паттерну: изменения вызываются пользовательскими событиями и источниками данных, которые они запрашивают.

Как предоставлять доступ к UI-состоянию

После того, как вы описали UI-состояние и определили, как будете управлять его производством, следующий шаг – предоставить UI доступ к готовому состоянию. 

Так как вы управляете производством состояния с помощью UDF, рекомендуется сделать производимое состояние потоком — другими словами, в процессе работы программы будет произведено несколько версий этого состояния. В таком случае доступ к UI-состоянию следует предоставить с помощью observable-обёртки над данными, к примеру LiveData или StateFlow. Это нужно сделать, чтобы UI мог реагировать на все изменения, внесённые в состояние, и вам не приходилось вручную получать данные прямо из ViewModel. 

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

Views

class NewsViewModel(...) : ViewModel() {

val uiState: StateFlow = …

}

Compose

class NewsViewModel(...) : ViewModel() {
  
    val uiState: NewsUiState = …
  
}

Вводную информацию об использовании LiveData в качестве observable-обёртки над данными можно прочитать в этом кодлабе. Вводную информацию о flow в Kotlin — в статье «Flow в Kotlin на Android».

Важно: чтобы предоставить доступ к UI-состоянию в приложениях с Jetpack Compose, можно использовать его родные observable State API, например mutableStateOf или snapshotFlow. Все указанные в этом гайде типы observable-обёрток над данными, такие как StateFlow или LiveData, легко можно использовать в Compose с помощью соответствующих extension функций.

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

Поток данных UiState зачастую создают, предоставляя из ViewModel доступ к приватному изменяемому потоку как к неизменяемому: например, доступ к MutableStateFlow<UiState> как к StateFlow<UiState>.

Views

class NewsViewModel(...) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())

    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    ...

}

Compose

class NewsViewModel(...) : ViewModel() {

    var uiState by mutableStateOf(NewsUiState())
        private set

    ...
}

Благодаря этому ViewModel сможет предоставлять доступ к методам, которые изменяют состояние изнутри, публикуя обновления, которые получит UI. Возьмём, к примеру, кейс, в котором нужно выполнить асинхронное действие. В этом случае можно запустить корутину с помощью viewModelScope, а по завершении обновить изменяемое состояние.

Views

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())
    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                _uiState.update {
                    it.copy(newsItems = newsItems)
                }
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                _uiState.update {
                    val messages = getMessagesFromThrowable(ioe)
                    it.copy(userMessages = messages)
                 }
            }
        }
    }
}

Compose

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

   var uiState by mutableStateOf(NewsUiState())
        private set

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                uiState = uiState.copy(newsItems = newsItems)
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                val messages = getMessagesFromThrowable(ioe)
                uiState = uiState.copy(userMessages = messages)
            }
        }
    }
}

В примере выше класс NewsViewModel пытается составить выборку статей определённой категории. Затем отражает результаты попытки — удачные или неудачные — в UI-состоянии, на которое UI реагирует соответствующим образом. Чтобы узнать больше о работе с ошибками, прочитайте раздел «Отображение ошибок на экране».

Важно: шаблон из предыдущего примера, где состояние изменяют посредством функций во ViewModel, — одна из наиболее популярных реализаций UDF.

Дополнительные рекомендации

Предоставляя доступ к UI-состоянию, следует учитывать:

• Объект UI-состояния должен обрабатывать состояния, которые связаны друг с другом. В таком случае неконсистентность будет возникать реже, а код будет проще понять. Если открыть доступ к списку статей и количеству сохранённых статей в двух разных потоках данных, можно оказаться в ситуации, где одни данные обновились, а другие – нет. Если использовать один поток, оба элемента будут содержать актуальные данные.

  Более того, в некоторых случаях бизнес логика может потребовать слияния источников. К примеру, вам может потребоваться показывать кнопку «добавить в закладки» только если пользователь зарегистрировался и подписан на премиум услугу. В таком случае класс UI-состояния можно описать следующим образом:

data class NewsUiState(
    val isSignedIn: Boolean = false,
    val isPremium: Boolean = false,
    val newsItems: List<NewsItemUiState> = listOf()
)

val NewsUiState.canBookmarkNews: Boolean get() = isSignedIn && isPremium

В этом описании наличие или отсутствие кнопки «добавить в закладки» — это свойство, унаследованное от двух других свойств. Чем сложнее становится бизнес-логика приложения, тем удобнее иметь один единственный класс UiState, где в вашем распоряжении есть все свойства.

• UI-состояния: один поток или несколько? Если вы выбираете, открыть доступ к UI-состоянию в одном потоке или в нескольких, основным ориентиром должен стать предыдущий пункт: связь между отправляемыми элементами.

  Основной плюс одного потока – удобство и консистентность данных: получатели состояния всегда принимают наиболее актуальную информацию. Однако бывают случаи, когда удобнее получать из ViewModel несколько потоков состояний:

  • Типы данных, не связанные друг с другом. Некоторые состояния, необходимые для отрисовки UI, могут абсолютно не зависеть друг от друга. В таких случаях результат объединения различных состояний может не оправдать затраченных ресурсов, в особенности если одно из состояний обновляется чаще второго.

  • Сравнение UiState. Чем больше в объекте UiState полей, тем вероятнее, что поток будет отправлять данные при обновлении одного из его полей. View обновляется в каждом случае: у него нет механизма сравнения, с помощью которого можно было бы понять, отличаются отправляемые друг за другом данные или нет. В такой ситуации для решения проблемы вам могут потребоваться Flow API или методы типа distinctUntilChanged() на LiveData.

Как принимать UI-состояния

Чтобы UI начал получать UiState из потока, используется терминальный оператор, соответствующий конкретному observable-типу данных в коде. Например, в случае с LiveData используется метод observe(), а в случае с flow в Kotlin – метод collect() или его вариации.

Когда запускаете получение observable-обёрток над данными в UI, убедитесь, что учли жизненный цикл UI. Это важно: UI не должен отслеживать UI-состояние, когда view пользователю не показывают. 

Подробнее тему можно изучить в посте «A safer way to collect flows from Android UIs». Когда используется LiveData, LifecycleOwner сам решает вопрос жизненных циклов. В случае с flow лучше использовать соответствующий coroutine scope и repeatOnLifecycle API:

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                viewModel.uiState.collect {
                    // Update UI elements
                }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    viewModel: NewsViewModel = viewModel()
) {
    // Show UI elements based on the viewModel.uiState
}

Важно: объекты StateFlow, использованные в этом примере, не прекращают работу, когда у них нет активных получателей данных. Но, работая с flow, вы можете и не знать, как они реализованы. Получение данных flow с учётом жизненного цикла позволяет вносить подобные изменения в потоки ViewModel позднее — без необходимости дорабатывать код получателя данных.

Как отображать прогресс выполнения операций

Проще всего отобразить состояние загрузки в классе UiState с помощью поля boolean:

data class NewsUiState(

    val isFetchingArticles: Boolean = false,

    ...

)

Значение этого флага указывает на наличие или отсутствие прогресс-бара в UI.

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                // Bind the visibility of the progressBar to the state
                // of isFetchingArticles.
                viewModel.uiState
                    .map { it.isFetchingArticles }
                    .distinctUntilChanged()
                    .collect { progressBar.isVisible = it }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    modifier: Modifier = Modifier,
    viewModel: NewsViewModel = viewModel()
) {
    Box(modifier.fillMaxSize()) {

        if (viewModel.uiState.isFetchingArticles) {
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }

        // Add other UI elements. For example, the list.
    }
}

Отображение ошибок на экране

Показывать ошибки в UI – то же самое, что показывать прогресс выполнения операции: оба случая легко представить с помощью Boolean-значения, которое обозначает наличие или отсутствие чего-либо. 

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

Возьмём пример из предыдущего раздела, где в процессе поиска статей отображался прогресс-бар. Если в результате операции возникнет ошибка, вы, возможно, захотите показать пользователю сообщение «что пошло не так».

data class Message(val id: Long, val message: String)

data class NewsUiState(

    val userMessages: List<Message> = listOf(),

    ...

)

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

Потоки и параллелизм

Любая операция, которую мы выполняем в ViewModel, должна быть main-safe: вызывать её из главного потока должно быть безопасно. За переключение работы в другой поток отвечают слои данных и предметной области.

Если ViewModel выполняет продолжительные операции, она также отвечает за перемещение этой логики в фоновый поток. Корутины в Kotlin – отличный способ управления параллельными операциями, а Jetpack Architecture Components предоставляют встроенную поддержку корутин. Вы можете подробнее узнать о том, как использовать корутины в приложениях на Android, если прочитаете статью «Корутины Kotlin в Android».

Навигация

Изменения в навигации приложения зачастую обусловлены получением событий или подобных им сущностей. К примеру, после того, как класс SignInViewModel выполняет регистрацию, поле isSignedIn в UiState может иметь значение true. Такие триггеры следует принимать так же, как и описанные в предыдущем разделе Как принимать UI-состояния. Единственное исключение состоит в том, что получатель состояния следует реализовать, полагаясь на Navigation component.

Пагинация

Paging library передает на UI-класс PagingData. Так как PagingData представляет и содержит элементы, которые могут меняться с течением времени (то есть не относятся к неизменяемому типу), его не следует представлять в неизменяемом UI-состоянии. Логичнее будет предоставить к нему доступ из ViewModel в отдельном потоке. Конкретные примеры можно посмотреть в кодлабе Android Paging.

Анимации

Чтобы анимации переходов были качественными и плавными, иногда приходится подождать, пока загрузятся данные со следующего экрана, прежде чем стартовать анимацию. В Android view фреймворке есть методы, с помощью которых можно отсрочить переход между фрагментами с postponeEnterTransition() API и startPostponedEnterTransition() API. Эти API помогают убедиться, что элементы UI на следующем экране (как правило, изображения, которые загружаются из сети) готовы к отрисовке, прежде чем UI анимирует переход на этот экран. Подробную информацию и способы применения вы найдёте в Android Motion sample.

Читайте далее

Обзор архитектуры

События UI

Доменный слой

Слой данных

Больше полезного про Android — в нашем телеграм-канале Surf Android Team. Здесь мы публикуем кейсы, лучшие практики, новости и вакансии Surf, а также проводим прямые эфиры. Присоединяйтесь!

1. Введение

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

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

2. Структура приложения

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

Возвращаясь к нашему приложению To do, мы можем представить, что у нас есть следующие требования:

• Там должен быть список предметов (для выполнения предметов).
• Пользователь может добавить элемент к существующим.
• Предметы должны иметь приоритетный цвет.
• Приложение должно работать на смартфоне и планшете.

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

Это очень простая навигация: при запуске приложение отображает текущий список элементов, а когда пользователь нажимает «Добавить элемент» на панели действий. приложение покажет экран добавления элемента. Для простоты и сосредоточенности на аспектах пользовательского интерфейса мы можем предположить, что приложение не будет сохранять элементы. Читателю может быть интересно расширить приложение, чтобы оно сохраняло элементы.

Теперь, когда мы примерно знаем, какой будет навигация и как будет выглядеть пользовательский интерфейс приложения, мы можем приступить к созданию нашего приложения с помощью нашей IDE. В этом случае мы будем использовать Eclipse + ADT. Мы создаем новый проект Android, который мы можем назвать Todo . Мы не будем рассказывать, как создать проект Android с использованием Eclipse, поэтому мы предполагаем, что вы уже знакомы с этой IDE. Посмотрите наш пример «Android Hello World», если вы не знакомы с процессом.

2.1. Список предметов с ListView и объектной моделью

Теперь у нас есть структура проекта, и мы можем сосредоточиться на разработке модели, стоящей за приложением. В этом случае модель очень проста, это просто класс, который содержит информацию о новом элементе todo:

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

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

Если вы заметили, мы дали указание Android использовать только пространство, необходимое для хранения элементов в списке. Мы знаем, что для использования ListView мы должны реализовать адаптер. Мы могли бы использовать стандартный адаптер, предоставляемый Android, но в этом случае этих стандартных адаптеров недостаточно, мы хотим реализовать собственный адаптер, потому что мы хотели бы показать некоторую информацию для каждой строки в списке. Нам бы хотелось, чтобы строка в списке выглядела так:

Как вы можете заметить, каждая строка имеет изображение слева, которое представляет приоритет задачи и некоторую информацию. В настоящее время мы не рассматриваем применение какого-либо стиля к нашим строкам. Чтобы иметь такую ​​строку в нашем ListView , мы должны создать макет строки, который мы будем использовать в нашем настраиваемом адаптере. Таким образом, мы можем создать новый файл с именем item_layout.xml в директории layout . Этот файл выглядит так:

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

Более того, мы можем размещать представления относительно родителя, например, мы хотим, чтобы информация о дате была размещена справа от строки и внизу:

Теперь, когда у нас есть макет, мы должны построить адаптер. Мы расширим ArrayAdapter и переопределим некоторые методы, чтобы мы могли обрабатывать данные нашей модели и новый макет. Мы называем этот адаптер ToDoItemAdaper , поэтому мы имеем:

Конструктор получает Context и itemList качестве параметров, последний параметр содержит список элементов todo. Вы можете заметить, что когда мы вызываем супер метод, мы R.layout.item_layout пользовательский макет с именем R.layout.item_layout . Теперь нам нужно переопределить один из наиболее важных методов, называемый getView , который используется для создания View и рендеринга макета строки:

В этом методе мы проверяем в начале, является ли представление, которое мы получаем как параметр, нулевым. В этом случае мы должны надуть наш макет. Если вы заметили, мы использовали шаблон ViewHolder , чтобы сделать прокрутку ListView более плавной. Мы создали небольшой внутренний класс ItemHolder который содержит ссылки на View внутри нашего пользовательского макета:

Одна вещь, которую вы должны заметить, это то, как мы обрабатывали цвет фона ImageView . Мы использовали setBackgroundResource для установки imageview изображения. Этот метод принимает int, представляющий идентификатор ресурса, который мы хотим использовать в качестве фона:

Глядя на наш класс модели, мы можем заметить, что метод getTag() возвращает экземпляр класса TagEnum . Это перечисление, определенное следующим образом:

В перечислении мы определяем различные цвета, которые мы хотим поддерживать, и в качестве первого параметра мы передаем идентификатор ресурса. Если вы помните, в предыдущей статье мы говорили о том, как определить цвет ресурса в формате XML. Мы уже знаем, что нам нужно создать XML-файл в res/values который мы можем назвать colors.xml :

В определении цвета перечисления мы ссылались на этот цвет, используя R.color.color_name , поэтому, когда мы используем метод getTagColor в пользовательском адаптере getView , мы получаем идентификатор ресурса, который будет использоваться фоном изображения. Важно понимать, что мы не жестко кодировали цвета в конструкторе: например, мы могли напрямую использовать шестнадцатеричный код цвета, например, # FF0000 для красного и так далее.

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

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

2.2. Поддержка нескольких устройств и особенности компоновки

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

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

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

Мы можем предположить, что размер экрана составляет не менее 600 dp, поэтому мы хотим разделить экран на другие области и определить новый макет в res/layout-sw600dp :

где FrameLayout будет «заполняться» динамически в зависимости от потока навигации.

Конечно, мы можем настроить макет более подробно, в соответствии с различными размерами экрана. В этом случае мы можем просто создать разные макеты в разных каталогах под res.

2,3. Добавить элемент макета пользовательского интерфейса

Если мы запустим приложение, то получим пустой список без элементов. Мы должны создать новый пользовательский интерфейс. Поэтому, учитывая соображения, которые мы делали ранее, мы создаем Fragment который обрабатывает функциональность добавления элемента, называя его NewItemFragment . Фрагмент имеет сложный жизненный цикл, но для этого мы можем переопределить только метод onCreateView . Этот метод отвечает за создание пользовательского интерфейса. Как всегда, мы должны сначала создать макет. В нашей IDE в res/layout мы создаем еще один XML-файл, который мы называем add_item_layout.xml :

Это очень простой макет, созданный TextView и EditText : первый используется для отображения текстовых сообщений в пользовательском интерфейсе, а другой — для приема пользовательских данных. В этом макете важны два компонента: Spinner и Spinner Date/Time picker .

Спиннер — это компонент пользовательского интерфейса, который показывает только один элемент за раз и позволяет пользователю выбрать один элемент среди них. Мы используем этот компонент, чтобы показать различные цвета тегов / приоритеты. Это идеально подходит для нашей цели, на самом деле мы хотим, чтобы пользователь выбирал один цвет из списка цветов.

2,4. Цвет метки / приоритетный спиннер

Для правильной работы Spinner необходим адаптер массива. Android предоставляет список адаптеров, которые мы можем использовать, но мы хотим настроить их, потому что мы хотим показать изображение с цветом. Затем мы должны создать пользовательский адаптер так же, как мы делали для ListView . Сначала мы создаем макет строки с именем spinner_tag_layout.xml :

и наконец мы создаем наш адаптер:

Анализируя приведенный выше код, мы замечаем, что этот адаптер обрабатывает объекты TagEnum и мы переопределяем два метода getView и getDropDownView . Мы обрабатываем эти методы одинаково. Как вы можете заметить, мы сделали почти то же самое, что уже сделали для ListView.

Во фрагменте, который содержит эти компоненты пользовательского интерфейса, мы должны найти ссылку на Spinner и установить пользовательский макет, который мы определили выше:

Когда пользователь выбирает один элемент в Spinner , мы должны найти способ узнать, какой элемент был выбран.

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

и мы храним результат в атрибуте класса.

2.5. Выбор даты и времени

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

Мы используем фрагменты, поэтому нам нужно создать два внутренних класса, которые представляют пользователю указатели даты и времени. В этом случае мы расширяем для обоих сборщиков класс DialogFragment и переопределяем метод onCreateDialog . В этом методе мы просто инициализируем средство выбора Date и возвращаем его как результат:

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

Таким же образом мы обрабатываем TimePickerFragment , но в этом случае мы расширяем TimePickerDialog :

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

чтобы получить ссылку на TextView а затем мы просто реализуем слушатель:

В результате мы имеем:

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

Мы можем определить этот интерфейс в классе фрагмента:

Это очень простой интерфейс, созданный только одним методом. Теперь у нас есть:

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

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

В методе onCreate мы создаем новый экземпляр нашего класса фрагмента и, используя FragmentManager показываем фрагмент на экране.

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

2.6. Основное занятие

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

Теперь мы должны проверить, работает ли наше приложение на смартфоне или планшете, чтобы мы могли изменить поведение активности. Мы можем сделать это, проверив, есть FrameLayout компонент FrameLayout в определении макета:

2,7. Панель действий

В этом упражнении мы добавляем панель действий (известный шаблон Android) с действием: добавить новый элемент. Чтобы определить его, мы создаем (если не существует) файл XML в res/menu :

В результате получаем:

Когда пользователь нажимает на знак плюс, мы должны показать пользовательский интерфейс для добавления нового элемента. Первое, что мы должны обработать, это событие, когда пользователь нажимает на значок «плюс», поэтому мы должны переопределить метод в классе активности:

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

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

В этом методе мы создаем Intent, который содержит результат, и передаем его обратно в вызывающее действие ( MainActivity ), и мы завершаем действие. В MainActivity мы должны быть готовы обработать результат:

В этом упражнении мы извлекаем объект предмета, сохраненный в Intent которое мы получаем в результате, и добавляем его в список предметов. Когда мы закончим, мы вызываем метод notifyDataSetChange для обновления ListView .

Если наше приложение работает на планшете, мы просто «заполняем» NewItemFragment описанным выше NewItemFragment . В этом случае мы запускаем транзакцию и заменяем FrameLayout фрагментом, а в конце мы FrameLayout транзакцию. В этом случае нам не нужно запускать другое действие, потому что мы используем FrameLayout чтобы показать фрагмент, который обрабатывает пользовательский интерфейс для добавления нового элемента. Итак, мы имеем:

В этом случае мы должны просто реализовать интерфейс, указанный фрагментом, как мы делали раньше:

Обратите внимание, что в последней части мы удалили фрагмент в конце.

3. Стилизация приложения

К настоящему времени мы не рассмотрели стиль приложения, но мы знаем, что можем применять стиль к каждому компоненту пользовательского интерфейса. Мы можем изменить все цвета и внешний вид пользовательского интерфейса, реализуя наш стиль и выпуская бренд приложения. Например, мы хотим применить стиль к строке listView, делая их немного более привлекательными. Мы создаем (если он еще не существует) файл с именем style.xml разделе res/values и здесь мы можем определить наш стиль, как мы обсуждали в предыдущей статье :

Мы определили три разных стиля и хотим применить их к нашей строке списка:

Запустив приложение с этим стилем мы имеем:

4. Вывод

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

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

5. Загрузите исходный код

Это был урок о том, как создать пользовательский интерфейс приложения Android с нуля. Вы можете скачать исходный код здесь: AndroidApp.zip

Every mobile app has some form of user interface (UI), and in Android user interfaces are created using Views.

If you’re just getting started with Android development, then it makes sense to familiarize yourself with Views as soon as possible, as they’re central to many “Hello World” apps and Android tutorials.

Even if you’ve been developing Android apps for a while, it’s easy to get into a rut! If you’re using the same Views over and over, then now’s the perfect time for a refresher on all the different Views that are included in the Android platform.

In this article, we’ll be taking a closer look at this essential building block of Android development, before exploring some of the most commonly-used Views that you can use in your Android apps.

Each View occupies a rectangular area of the screen and typically draws something that the user can see, such as text or an image. In addition to displaying content, some Views also provide interactive functionality, such as Buttons, EditTexts and Spinners. Whenever an event occurs Android dispatches this event to the appropriate View, which then handles the event and notifies any listeners.

The easiest way to add a View to your Java or Kotlin project, is to define that View within an XML layout resource file. Android provides a simple XML syntax that corresponds to the different View subclasses, for example in the following snippet we’re using XML to instantiate a TextView:

<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

The Android framework is responsible for measuring, laying out and drawing your Views, so you don’t have to explicitly call any methods to perform these actions.

To build a layout, simply keep adding View elements to your XML file, similar to how you create webpages in HTML – just try to keep nesting to a minimum, as it can negatively impact your application’s performance. User interfaces with “shallow” View hierarchies tend to be drawn faster, so if you’re going to deliver a high-performing app then you’ll need to avoid nesting wherever possible.

If you know all of a View’s properties at build time, then you can define this View entirely in XML. By keeping your UI code separate from your application code, you can provide alternate layouts that are optimized for different screen sizes, orientations and languages. This separation also makes your application code easier to read, test and modify, as it isn’t muddled up with UI code.

Since it’s the recommended approach, we’ll be defining Views in XML throughout this tutorial, although you can create Views programmatically where required.

If you need to edit a View’s properties at runtime, then’ll typically have to define some, or all of that View’s properties programmatically in Java or Kotlin. For example, in the following snippet we’re defining a TextView in Java:

//Create a TextView programmatically//

        TextView tv = new TextView(getApplicationContext());

//Define the View’s layout parameters//

        LayoutParams lp = new LinearLayout.LayoutParams(

//Set the View’s width//

                  LayoutParams.WRAP_CONTENT,

//Set the View’s height//

                  LayoutParams.WRAP_CONTENT);

//Apply the layout parameters to the TextView//

        tv.setLayoutParams(lp);

//Set the text//

        tv.setText("Hello World!");

//Add the TextView to the parent ViewGroup//

        rl.addView(tv);
    }
}

Note that you may be able to declare your app’s default layout in XML, and then modify some of its properties at runtime.

android:id="@+id/hello_world"

The + symbol signifies that this is a new name that must be created and added to your project’s R.java file.

When you need to work with a View, you can reference it using its View ID. Typically, you’ll reference a View by creating an instance of that View object in your Activity’s onCreate() method, for example:

TextView myTextView = (TextView) findViewById(R.id.hello_world);

The ID integer technically doesn’t need to be unique throughout the entire tree, just within the part of the tree you’re searching. However, to avoid conflicts and confusion it’s recommended that you use completely unique View IDs, wherever possible.

Android devices have screens of varying dimensions and pixel densities, so 10 pixels doesn’t translate to the same physical size across every device. If you define a View’s width and height using exact measurements, then this can result in user interfaces that only display and function correctly on devices with specific screens, so you should never use any exact measurements when creating your Views.

The following screenshot shows an ImageView with 10dp of padding:

An ImageView with 20dp of padding.

If your app contains multiple interactive UI elements, then margins can help ensure the user always activates the correct control, particularly for users who have manual dexterity issues.

To create a TextView, simply add a <TextView> element to your layout resource file, and then specify your text using the android:text attribute and a string:

<TextView
        android:id="@+id/hello_world"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="@string/helloWorld" />

If required, you can set or modify the View’s text at runtime, from your project’s Java code:

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         final TextView helloWorldTextView = (TextView) findViewById(R.id.hello_world);
         helloWorldTextView.setText(R.string.new_text);
     }
 }

You can also style your text, using elements such as android:textColor, android:fontFamily, and android:textStyle, which has possible values of bold, italic, and bolditalic.

<EditText
    android:id="@+id/phoneNumber"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="phone" />

Android supports a list of inputTypes, including some that specify additional behavior, for example android:inputType=”textPassword” automatically masks the user’s input, which reduces the chances of someone spying on their password.

Depending on the expected input type, you may be able to further streamline the user experience by combining inputType values with attributes that define additional behaviour, such as whether to provide spelling suggestions, or automatically capitalize new sentences. For example, if you wanted your EditText to capitalize the first word of a sentence and auto-correct spelling mistakes, then you’d use the following:

android:inputType=
        "textCapSentences|textAutoCorrect

By default, Android’s virtual keyboard provides a user action button, such as a Next or Done button. However, these default actions aren’t always appropriate for the currently-selected EditText, for example if your EditText is a search field, then a Search action makes much more sense than Next or Done.

You can specify an alternative action for your EditText, using the android:imeOptions attribute and one of the many supported values, such as an actionSearch which performs a Search operation using the EditText’s contents.

Finally, sometimes you may want to be notified when the user changes the contents of your EditText. For example if your password EditText requires a password that’s at least ten characters long and features a mixture of letters, symbols and numbers, then you can improve the user experience by automatically checking the user’s input as they’re typing and then notifying them of any issues with their password, before they hit the Register button. You can register to receive these callbacks, by adding a TextWatcher to your EditText.

To instantiate a drawable from an image resource, you need to add a PNG, JPG or GIF to your project’s res/drawable directory and then reference that file from your XML layout. You’ll need to use the image’s file name as its resource ID, so if you had a file named scenery.jpg then you’d display that image using the following:

<ImageView
         android:id="@+id/myImage"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/scenery" />

The following screenshot shows this scenery drawable, rendered in Android Studio:

Alternatively, in Android 5.0 (API level 21) and higher you can use vector drawables, which define an image as a set of points, lines, and curves. Vector drawables can be scaled without loss of display quality, so you can use a single file for all of Android’s different screen densities.

Creating a custom vector drawable is beyond the scope of this tutorial, but you can get a taste for working with vectors, by taking a look at Vector Asset Studio, which is included as part of Android Studio.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
       android:width="24dp"
       android:height="24dp"
       android:viewportWidth="24.0"
       android:viewportHeight="24.0">
   <path
       android:fillColor="#FF000000"
       android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z"/>
</vector>

You then just need to reference this vector drawable in your ImageView, in exactly the same way you’d reference a standard drawable resource, for example  android:src=”@drawable/done_vector.”

You can communicate the action that’ll occur when the user interacts with your button, using a text label, an icon, or a text label and an icon.

In the following snippet, we’re creating a Button that features a text label:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"/>

To create an ImageButton, you’ll need to add an image file to your project and then reference it in exactly the same way you referenced your drawables in the previous section. For example:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"/>

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"
   android:drawableStart="@drawable/button_icon"/>

In addition to adding labels and images, you can customize your Buttons and ImageButtons by adding a background image or a color resource, using the android:background attribute. For example, you can turn a button blue, by adding the following to your Button or ImageButton declaration:

android:background="#0000FF"

Whenever the user interacts with a button, that Button or ImageButton will receive an onClick event. You’ll need to define a handler for this event, using the android:onClick attribute.

The value of the onClick attribute must correspond to a public method, which will be called in response to the onClick event, for example:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/button_label"
   android:onClick="displayToast" />

Next, you’ll need to implement this method in the Activity that’s hosting your Button or ImageButton. This method must be public, return void, and define a View as its only parameter, for example:

public void displayToast(View view) {
       Toast.makeText(MainActivity.this,
               "Your Message", Toast.LENGTH_LONG).show();

   }

}

Alternatively, you can declare an event handler programmatically. In Java, this means creating an View.OnClickListener object and then assigning it to the Button or ImageButton, using setOnClickListener(View.OnClickListener).

You create a CheckBox by adding a <Checkbox> item to your XML layout:

<CheckBox android:id="@+id/yes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/yes"
        android:onClick="onCheckboxClicked"/>

Since CheckBoxes typically allow the user to select multiple items, you’ll need to add an android:onClick attribute to each individual <CheckBox> element, and then reference the method that’ll be called in response to CheckBox click events.

When you implement the corresponding method in your hosting Activity, you’ll need to verify which CheckBox was selected, and then perform an appropriate action depending on the user’s selection. For example, if we created Yes and No CheckBoxes, then we’d add the following to our hosting Activity:

public void onCheckboxClicked(View view) {
    boolean checked = ((CheckBox) view).isChecked();

//Verify which checkbox is selected//

    switch(view.getId()) {
         case R.id.yes:

//If the “yes” checkbox is selected, then...//

            if (checked)

//Do something//

            else
            Break;

//If the “no” checkbox is selected, then….//

        case R.id.no:

            if (checked)

//Do something//

You create each RadioButton by adding a <RadioButton> element to your layout. Since RadioButtons are mutually exclusive you’ll need to arrange all of your <RadioButton> elements inside a <RadioGroup> ViewGroup, which ensures that only one RadioButton can be selected at a time.

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/confirm"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_deny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/deny"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

You define a click handler by adding the android:onClick attribute to every RadioButton in your RadioGroup, and then implementing the corresponding method in your hosting Activity. Similar to our CheckBox example, this method needs to verify which RadioButton is currently selected, and then take appropriate action based on the user’s selection.

public void onRadioButtonClicked(View view) {
    boolean checked = ((RadioButton) view).isChecked();

//Verify which RadioButton is selected//

    switch(view.getId()) {

//If the “confirm” radio button is selected, then...//

        case R.id.radio_confirm:

            if (checked)

//Do something//

            Break;

//If the “deny” button is selected, then...//

         case R.id.radio_deny:

             if (checked)

//Do something//

The user can tap any item in the Spinner, and your application will perform an action based on their selection. By default, a Spinner always displays the currently-selected value.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <Spinner
       android:id="@+id/location_spinner"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

If the data is predetermined, then you can provide it as a String Array that’s defined in your Strings.xml file:

<resources>
   <string name="app_name">SimpleSpinner</string>
       <string-array name="location_array">
           <item>Argentina</item>
           <item>Armenia</item>
           <item>Australia</item>
           <item>Belgium</item>
           <item>Brazil</item>
           <item>Canada</item>
           <item>China</item>
           <item>Denmark</item>
           </string-array>
           </resources>

You can then deliver this Array to your Spinner using an instance of ArrayAdapter, which you implement in an Activity or Fragment.

Spinner spinner = (Spinner) findViewById(R.id.location_spinner);

//Create an ArrayAdapter//

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,

//Populate the spinner using the String Array and the simple_spinner_item layout//

        R.array.location_array, android.R.layout.simple_spinner_item);

//Specify the layout that should be used for the dropdown menu//

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

//Apply the Adapter to the Spinner//

spinner.setAdapter(adapter);

The Spinner will receive an onItemSelected event every time the user selects an item from the dropdown. To process this event, you’ll need to use the AdapterView.OnItemSelectedListener interface to define an onItemSelected() callback method.

In the following code, I’m displaying a toast every time onItemSelected() is invoked, and incorporating the name of the newly-selected item into my toast. I’m also defining a onNothingSelected() callback method, as this is also required by the AdapterView.OnItemSelectedListener interface.

Here’s the completed Activity:

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       Spinner spinner = (Spinner) findViewById(R.id.location_spinner);
       spinner.setOnItemSelectedListener(this);

       ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,

               R.array.location_array, android.R.layout.simple_spinner_item);
                   adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
       spinner.setAdapter(adapter);

   }

   public void onItemSelected(AdapterView<?> parent, View view,
                   int pos, long id) {

       Toast.makeText(parent.getContext(),
               "You've selected n" + parent.getItemAtPosition(pos).toString(),
               Toast.LENGTH_LONG).show();
   }

   @Override
   public void onNothingSelected(AdapterView<?> adapterView) {

//To do//

   }
}

To create a ListView, you’ll need to add a <ListView> element to your XML layout resource file, and then create an Adapter, which will handle the process of displaying each item in your ListView.

Let’s start by adding a <ListView> to our layout:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ListView android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/myListView">
    </ListView>

</LinearLayout>

A ListView requests Views on-demand from its assigned Adapter. In our MainActivity, we need to create an Adapter and then associate it with our ListView, using setAdapter(android.widget.ListAdapter).

import android.app.Activity;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.os.Bundle;
import android.widget.ListView;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {

    String[] countryArray = {"Argentina" , "Armenia", "Australia", "Belgium" ,"Brazil" ,"Canada" , "China" ,
            "Denmark" , "Estonia" , "Finland" , "France" , "Greece" , "Hungary" , "Iceland" , "India" ,
            "Indonesia" , "Italy" , "Japan" , "Kenya" , "Latvia"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ListView listView = (ListView)findViewById(R.id.myListView);

 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, countryArray);
   listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(parent.getContext(),
                        "You've selected n" + parent.getItemAtPosition(position).toString(),
                         Toast.LENGTH_LONG).show();

            }
        }
        )
                ;
    }}

Most of the time, you’ll create a custom View by identifying a built-in View that almost meets all of your requirements, and then extend this View with your own modifications. However, it’s also possible to create a View from scratch, by extending the base View class.

Creating a custom View is an advanced topic that requires you to complete multiple steps, including providing overrides for the methods that Android usually calls automatically, such as onDraw() and onTouchEvent(), but custom Views can be an effective way to deliver unique experiences to your users.

Are there any Views you’d like us to explore in more detail? Let us know in the comments below!

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

Если вы являетесь одним из таких людей, мы предоставим вам самую важную информацию о том, как разобраться в системе, познакомим с её главными функциями. В общем, перед вами своеобразная инструкция под названием «Андроид для чайников», где собраны все актуальные советы по работе с платформой.

Начало пользования системой Андроид

Включаем устройство, заходим в свой аккаунт и устанавливаем соединение с интернетом

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

• Выбрать язык интерфейса.
  
• Подключится к интернету через Wi-Fi — если у вас нет поблизости сети, то этот шаг можно пропустить. Почему это меню появляется при первом же включении? Из-за того, что большинство программ разработаны для использования при рабочем интернет-подключении. Это вовсе не значит, что телефон или планшет бесполезен без интернета, подобный шаг создан скорее для удобства — мол, подключитесь к нему сразу, чтобы потом об этом не беспокоиться.
  
• Далее системный мастер предложит зайти в ваш Google-аккаунт или создать его, если вы ещё не обзавелись учётной записью. Крайне советуем завести себе аккаунт, ведь сама система Андроид сильно привязана к сервисам компании Google. Без него вы не зайдёте в магазин приложений, не сможете пользоваться почтой. Кроме того, учётную запись создать нетрудно, зато она всегда будет с вами на всех устройствах, где вы только пожелаете, что довольно удобно.
  
• В следующем меню вам нужно подтвердить время и дату, которые практически всегда определяются автоматически, либо ввести их вручную.
  
• В последнем окне вы увидите пункты, касающиеся определения вашего местоположения — лучше не выключать их, чтобы все сервисы правильно работали и смартфон верно определял время и дату.

Что представляет собой интерфейс системы?

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

Что он собой представляет? Вам будут предложены следующие символы и иконки:

• Время и дата — у вас могут отображаться отдельные часы или календарь, или эти данные будут расположены в правом нижнем углу, как это чаще всего принято на планшетах.
• Снизу в большинстве случаев размещены три знака — кнопка назад, главное меню и контекстное меню, где отображаются запущенные приложения.
  
• На рабочем столе, как правило, размещаются самые важные и наиболее используемые программы. Их можно удалить — просто нажмите и задержите палец на программе, через пару секунд значок станет перемещаемым и его можно будет перетянуть на крестик.
• Рабочих столов может быть несколько — они перемещаются при выполнении перелистывающих движений по экрану, при желании их тоже можно добавить или удалить — убирается виджет так же, как и отдельная программа. Чтобы добавить ещё один рабочий стол, коснитесь 2 пальцами экрана и сведите их, после чего появится плюсик — на него и следует нажать.
  
• На рабочие столы можно добавлять программы из общего списка меню. Где его найти? Нажмите главную клавишу на планшете или смартфоне, или на среднюю кнопку внизу экрана — о ней мы уже упоминали. Когда перед вами откроется список, вы можете выбрать один из элементов, зажать палец на той части экрана, где он расположен, после чего его можно передвинуть на любое место рабочего стола.

Стоит отметить, что на планшетах с Андроидом в нижней строке открывается быстрое меню, где вы можете включить Wi-Fi, узнать о заряде батареи и прочей важной информации — чтобы открыть его, просто сделайте движение снизу вверх в области часов. В смартфонах под управлением этой системы для открытия меню уведомлений нужно провести пальцем по всему экрану сверху вниз.

Мы рассмотрели, как выглядит рабочий стол, теперь перейдём к основному меню Android.

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

Пользование интернетом на Андроид

Если вы уже установили подключение к интернету, самое время узнать, как пользоваться браузером. В случае, когда Wi-Fi выключен, активировать его вы можете в упомянутом меню уведомлений или через настройки, которые вы найдёте в меню. После того как вы откроете раздел беспроводного соединения, активируйте работу Wi-Fi, затем, устройство выполнит автоматический поиск сетей. Дело остаётся за малым — выбрать сеть из списка, ввести пароль, если это необходимо и нажать «Подключить».

Как зайти в интернет на Андроид?

Для этого следуйте таким инструкциям:

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

В целом ничего сложного в работе с браузером на планшете или смартфоне нет — если вы не знаете некоторых функций или значков, просто попробуйте их.

Мы упустили только один момент — чтобы ввести адрес сайта, вам нужна клавиатура.

Как работать с клавиатурой?

Клавиатура будет автоматически открываться всякий раз, когда вы будете нажимать на строку, где вводится тот или иной текст, сообщение. Поэтому её запуск — дело нехитрое, а если нужно убрать средство ввода просто нажмите «Назад».

О работе с клавиатурой стоит знать следующее:

• Расположение клавиш здесь такое же, как и на компьютерной клавиатуре.
• Значок глобуса служит для смены языка ввода.
• Прозрачная стрелка меняет клавиши на заглавные, если нажать два раза подряд — включится режим Caps Lock.
• Стрелка с крестиком стирает символы, большая кнопка справа служит для переноса курсора вниз — как компьютерная клавиша Enter.
• Чтобы переместить курсор, прикоснитесь к необходимой области на экране.
• На некоторых клавишах размещены несколько символов — чтобы выбрать дополнительный, а не основной знак, просто немного придержите палец на нём.
  
• Как правило, под буквами на клавиатуре размещены кнопки для её переключения на цифровую раскладку или список с символами — просто нажимайте на неё, чтобы открыть нужный набор знаков.
• Если вам нужно выделить текст и скопировать, вырезать или переместить его, выполните длинное нажатие на строке, где начинается нужный вам кусок, после чего появятся две стрелки. Растягивая их, вы можете выделить необходимое количество символов, а в верхнем меню выбрать операцию для выделенного текста.

Как добавить другие языки на клавиатуру?

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

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

Как пользоваться Google Play Market?

Этот сервис представляет собой приложение, где вы найдёте тысячи всевозможных программ для вашего устройства с Android. Как правило, Play Market есть по умолчанию в меню вашего планшета или смартфона, для пользования им нужна учётная запись Google — если ранее вы не выполняли вход, то сделаете это при первом запуске магазина.

Итак, как пользоваться этим чудом? Всё очень просто — выбираете понравившееся приложение или находите его через строку поиска, нажимаете «Установить», а далее оборудование справится со всем самостоятельно.

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

Файловый менеджер и как смотреть фильмы и слушать музыку на Андроид

Для просмотра файлов мультимедиа есть отдельное приложение под названием Галерея или Хранилище Мультимедиа, которое вы найдёте в главном меню. Ничего сложного в пользовании им нет, по созданным папкам распределяются фотографии, видео, находящиеся в памяти устройства или на карте.

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

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

Как установить мелодию на звонок?

Если вы пользуетесь смартфоном на Андроид, то наверняка хотите слышать любимую мелодию на звонке. Делается это через настройки — зайдите в меню Звук, нажмите на строку Мелодия звонка, где вы сможете выбрать необходимый файл. Как видите, в этом меню вы можете полностью редактировать настройки звонков. Установить понравившуюся мелодию вы можете и в плеере при прослушивании музыки — в меню вы найдёте соответствующую функцию.

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