Android - 07 - User Interface
-
Upload
noveo -
Category
Technology
-
view
207 -
download
3
description
Transcript of Android - 07 - User Interface
![Page 1: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/1.jpg)
Android User Interface
Android Internship 2014
Роман Савин
![Page 2: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/2.jpg)
Android User Interface
UI Overview• Весь графический интерфейс строится из объектов классов View и
ViewGroup• View - нечто, что может быть нарисованно на экране и с чем
пользователь может взаимодействовать• ViewGroup - наследник View, содержит в себе другие View и
определяет как они будут расположенны относительно друг друга• AdapterView - особый наследник ViewGroup, дочерние элементы
которого задаются с помощью Adapter’a
![Page 3: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/3.jpg)
Android User Interface
UI Overview
![Page 4: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/4.jpg)
Android User Interface
Declaring Views• Дерево View может быть создано прямо в коде• Более простой и предпочтительный способ - использовать XML• Это декларативно (говорим что делать, а не как)• Позволяет отделить графический интерфейс и логику• Меньше усилий и более читабельно• Переиспользуемо• Для разных конфигураций могут быть созданы разные XML файл,
при этом коду знать об этом не обязательно
![Page 5: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/5.jpg)
Android User Interface
Attributes• В xml поведение отдельного View можно настраивать с помощью
аттрибутов• Существует набор аттрибутов общих для всех View• Почти каждый наследник View имеет свой собственный набор
специфичных для него аттрибутов• Можно создавать свои собственные аттрибуты• Часто для каждого аттрибута существуют соответствующие ему
методы
![Page 6: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/6.jpg)
Android User Interface
Common Attributes• android:id - уникальный идентификатор• android:layout_width - ширина элемента• android:layout_height - высота элемента• android:layout_margin - отступы снаружи элемента• android:padding - отступы внутри элемента• android:layout_gravity - расположение элемента внутри родителя• android:gravity - расположение контента внутри элемента• android:visibility - показывать элемент или нет• android:background - фоновое изображение
![Page 7: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/7.jpg)
Android User Interface
Dimension Units• px - реальные пиксели на экране• pt - points, 1/72 дюйма• mm – миллиметры• in – дюймы• dip - density independent pixels. Количество пикселей одном dip
зависит от плотности экрана• sp - scaled pixels. Аналогичны dip + размер зависит от выбранного
размера шрифта пользователем• процентов нет
![Page 8: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/8.jpg)
Android User Interface
Dimension Units. px vs. dp
![Page 9: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/9.jpg)
Android User Interface
Drawable Types
• ColorDrawable - просто цвет• BitmapDrawable - просто картинка• NinePatchDrawable - картинка, которая умеет
растягиваться• StateListDrawable - меняет свой контент в зависимости
от состояния
![Page 10: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/10.jpg)
Android User Interface
Common Views
• TextView - текстовое поле. Нередактируемое• EditText - редактируемое текстовое поле• ImageView – картинка• Button – кнопочка• CheckBox - галочка
![Page 11: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/11.jpg)
Android User Interface
TextView Attributes• android:text – текст• android:textSize – размер• android:textColor – цвет• android:textStyle - стиль (bold, italic, monospace)• android:singleLine - максимум одна строка текста• android:maxLines - максимальное число строк текста• android:ellipsize - что делать, если текст слишком длинный
![Page 12: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/12.jpg)
Android User Interface
EditText Attributes• android:hint - подсказка, видна пока EditText пустой• android:textColorHint - цвет подсказки• android:inputType - тип клавиатуры (email, телефон и т.д.)• android:digits - список допустимых символов
![Page 13: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/13.jpg)
Android User Interface
ImageView Attributes• android:src - что показывать• android:scaleType - как масштабировать• android:adjustViewBounds - меняем размеры View в зависимости от
размеров каритнки
![Page 14: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/14.jpg)
Android User Interface
Input Handling• View.setOnClickListener• View.setOnLongClickListener• View.setOnFocusChangeListener• View.setOnTouchListener• TextView.addTextChangedListener• CompoundButton.setOnCheckedChangeListener
![Page 15: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/15.jpg)
Android User Interface
Common Layouts• FrameLayout - рисует дочерние View поверх друг друга• LinearLayout - выстраивает свои элементы в одну линию• RelativeLayout - хитро располагает элементы относительно друг
друга• GridLayout - дочерние View располагаются по сеточке• ScrollView - добавляет скролл, если контент слишком большой
![Page 16: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/16.jpg)
Android User Interface
ListView• Отображение вертикального списка однотипных данных• Переиспользует созданные вьюхи• Можно добавлять хедеры и футеры • Необходимо использовать класс Adapter
![Page 17: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/17.jpg)
Android User Interface
BaseAdapter
Необходимо переопределить:• int getCount()• getItem(int position)• getItemId(int position)• getView(int position, View convertView, ViewGroup parent)
![Page 18: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/18.jpg)
Android User Interface
Common Adapters
• ArrayAdapter• CursorAdapter• SimpleAdapter
![Page 19: Android - 07 - User Interface](https://reader034.fdocuments.us/reader034/viewer/2022042509/547ce191b47959c5508b47b2/html5/thumbnails/19.jpg)
Android User Interface
Дополнительные ссылки• http://developer.android.com/guide/topics/ui/index.html• http://developer.android.com/training/best-ui.html• http://developer.android.com/training/improving-layouts/index.html