Лекция__ .Этапы разработки android-приложений. Интерфейс приложений

План лекции:

1. Элементы UI-приложений

2. Определение интерфейса в файле XML. Файлы layout

1. Элементы UI-приложений

Просмотрите ролик https://www.youtube.com/watch?v=-JmIQpiBgU8&list=PLrCZzMib1e9ptI7bPXFG8X5xEiCBt5qYE&index=2 с момента 1ч29 мин и до 1ч 57мин.

Во всех ссылках таблицы несложные примеры по элементу интерфейса.

View	это объект, который рисует что-то на экране, с которым пользователь может взаимодействовать.
Image
Button	https://www.tutorialspoint.com/android/android_button_control.htm
ImageButton	https://www.tutorialspoint.com/android/android_imagebutton_control.htm
TextView	https://www.tutorialspoint.com/android/android_textview_control.htm
RadioButton	https://www.tutorialspoint.com/android/android_radiogroup_control.htm
CheckBox	https://www.tutorialspoint.com/android/android_checkbox_control.htm Это переключатель включения / выключения, который может переключаться пользователем. Вы должны использовать флажки при представлении пользователям группы выбираемых опций, которые не являются взаимоисключающими.
RadioGroup	Если мы отметим одну радиокнопку, которая принадлежит радиогруппе, она автоматически снимает флажки с любой ранее проверенной радиокнопки в той же группе. https://www.tutorialspoint.com/android/android_radiogroup_control.htm
Switch	Переключатель из положения ВЫКЛ/ВКЛ. https://abhiandroid.com/ui/switch
ProgressBar	Индикаторы выполнения используются для отображения хода выполнения задачи. Например, когда вы загружаете или скачиваете что-то из Интернета, лучше показать прогресс загрузки / выгрузки пользователю. В Android есть класс с именем ProgressDialog, который позволяет создавать индикатор выполнения. Для этого вам нужно создать экземпляр объекта этого класса. https://www.tutorialspoint.com/android/android_progressbar.htm
WebView	В Android WebView - это вид, используемый для отображения веб-страниц в приложении. Этот класс является основой, на которой вы можете использовать свой собственный веб-браузер или просто использовать его для отображения некоторого онлайн-контента в своей деятельности. Мы также можем указать строку HTML и показать ее в нашем приложении с помощью WebView. По сути, WebView превращает приложение в веб-приложение. https://abhiandroid.com/ui/webview
Spinner	Spinner позволяет выбрать элемент из выпадающего меню. Например откройте ВК и сверху вы видите меню-спиннер «Новости» https://www.tutorialspoint.com/android/android_spinner_control.htm
Пикеры времени и даты	Android Time Picker позволяет вам выбрать время суток в режиме 24 часа или AM / PM. Время состоит из часов, минут и формата часов. Android предоставляет эту функциональность через класс TimePicker. https://www.tutorialspoint.com/android/android_timepicker_control.htm Android Date Picker позволяет вам выбрать дату, состоящую из дня, месяца и года, в вашем пользовательском интерфейсе. Для этой функции Android предоставляет компоненты DatePicker и DatePickerDialog. https://www.tutorialspoint.com/android/android_datepicker_control.htm
RatingBar	RatingBar используется для получения рейтинга от пользователя приложения. Пользователь может просто коснуться, перетащить или нажать на звезды, чтобы установить значение рейтинга. Значение рейтинга всегда возвращает число с плавающей запятой, которое может быть 1,0, 2,5, 4,5 и т. Д. https://abhiandroid.com/ui/ratingbar
Zoom Controls	В Android класс Zoom Controls отображает простой набор элементов управления, который используется для масштабирования и обеспечивает обратный вызов для регистрации событий. Zoom Controls имеет две кнопки ZoomIn и ZoomOut, которые используются для управления функцией масштабирования. https://abhiandroid.com/ui/zoomcontrols
ViewFlipper	Анимация изображений (например при загрузке телефона). https://developer.android.com/reference/android/widget/ViewFlipper

2. Определение интерфейса в файле XML. Файлы layout

В приложениях Android визуальный интерфейс нередко загружается из специальных файлов xml, которые хранят разметку. Эти файлы являются ресурсами разметки. Подобный подход напоминает создание веб-сайтов, когда интерфейс определяется в файлах html, а логика приложения - в коде javascript.

Объявление пользовательского интерфейса в файлах XML позволяет отделить интерфейс приложения от кода. Что означает, что мы можем изменять определение интерфейса без изменения кода java. Например, в приложении могут быть определены разметки в файлах XML для различных ориентаций монитора, различных размеров устройств, различных языков и т.д. Кроме того, объявление разметки в XML позволяет легче визуализировать структуру интерфейса и облегчает отладку.

Файлы разметки графического интерфейса располагаются в проекте в каталоге res/layout. По умолчанию при создании проекта уже есть один файл ресурсов разметки activity_main.xml, который может выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"

xmlns:app="https://schemas.android.com/apk/res-auto"

xmlns:tools="https://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.eugene.viewsapplication.MainActivity">

<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" />

</android.support.constraint.ConstraintLayout>

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

В данном случае корневым элементом является элемент ConstraintLayout, который содержит элемент TextView.

При компиляции каждый XML-файл разметки компилируется в ресурс View. Загрузка ресурса разметки осуществляется в методе Activity.onCreate. Чтобы установить разметку для текущего объекта activity, надо в метод setContentView в качестве параметра передать ссылку на ресурс разметки.

Для получения ссылки на ресурс в коде java необходимо использовать выражение R.layout.[название_ресурса]. Название ресурса layout будет совпадать с именем файла, поэтому чтобы использовать файл activity_main.xml в качестве источника визуального интерфейса, нам надо изменить код MainActivity следующим образом:

package com.example.eugene.viewsapplication;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

ConstraintLayout представляет новый тип контейнеров, который является развитием RelativeLayout и позволяет создавать гибкие и масштабируемые интерфейсы.

Начиная с версии Android Studio 2.3 ConstraintLayout был добавлен в список стандартных компонентов и даже является контейнером, который используется в файлах layout по умолчанию. Однако если вы используете Android Studio 2.2 или ниже, то в этом случае функциональность ConstraintLayout надо дополнительно добавлять.

Контейнер LinearLayout представляет объект ViewGroup, который упорядочивает все дочерние элементы в одном направлении: по горизонтали или по вертикали. Все элемены расположены один за другим. Направление разметки указывается с помощью атрибута android:orientation.

Если, например, ориентация разметки вертикальная (android:orientation="vertical"), то все элементы располагаются в столбик - по одному элементу на каждой строке. Если ориентация горизонтальная (android:orientation="horizontal"), то элементы располагаются в одну строку. Например, расположим элементы в горизонтальный ряд:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello"

android:textSize="26sp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Android"

android:textSize="26sp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Nougat"

android:textSize="26sp" />

</LinearLayout>

Если бы мы указали для LinearLayout атрибут android:orientation="vertical", то элементы размещались бы по вертикали:

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

Допустим, вложим в FrameLayout два элемента TextView:

<? xml version = "1.0" encoding = "utf-8"?>

<FrameLayout xmlns: android = "https://schemas.android.com/apk/res/android"

android: id = "@ + id / activity_main"

android: layout_width = "match_parent"

android: layout_height = "match_parent">

<TextView

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "Hello World!"

android: TextSize = "26sp" />

<TextView

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "Android Nougat 7.1"

android: TextSize = "26sp"

android: layout_marginTop = "50dp" />

</ FrameLayout>

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

Контейнер TableLayout структурирует элементы управления по столбцам и строкам. Определим в файле activity_main.xml элемент TableLayout, который будет включать две строки и два столбца:

<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_weight="0.5"

android:text="Логин"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:layout_weight="1"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</TableRow>

<TextView

android:layout_weight="0.5"

android:text="Email"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:layout_weight="1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</TableRow>

</TableLayout>

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

Причем элемент TableRow наследуется от класса LinearLayout, поэтому мы можем к нему применять тот же функционал, что и к LinearLayout. В частности, для определения пространства для элементов в строке используется атрибут android:layout_weight.

Лекция__ .Этапы разработки android-приложений. Интерфейс приложений

Поиск по сайту