четверг, 26 декабря 2013 г.

Компоненты, сделанные на заказ

Андроид предоставляет сложную и мощную модель компонентов для построения  пользовательских интерфейсов, основанную на классах View и ViewGroup. Начнём с того, что платформа включает в себя разнообразные готовые подклассы элементов View и ViewGroup, называемые элементами и контейнерами. Их вы можете использовать для построения своего интерфейса. 
Неполный список полезных элементов включает в себя ButtonTextView,EditTextListViewCheckBoxRadioButtonGallerySpinner,  и много элементов особого назначения AutoCompleteTextView,ImageSwitcher, и TextSwitcher.
Среди контейнеров часто используемые LinearLayoutFrameLayoutRelativeLayout и другие. 
Если не один из готовых элементов или контейнеров не отвечает вашим запросам, то вы можете создать свой собственный подкласс View. Если вам необходимо внести небольшие корректировки в существующий элемент или контейнер, то вы можете просто переопределить методы этого подкласса.
Создание своего собственного подкласса View даёт вам контроль над внешним видом и функциями элемента. Вот некоторые примеры того, что Вы могли бы сделать со своим собственным элементов View
  • Вы сможете создавать полностью необычно отрисованный элемент. Например "регулятор громкости", ручка визуализируется с помощью 2D графики и напоминает аналоговый электронный переключатель громкости.
  • Вы могли бы объединить группу элементов в один. Возможно, сделать что-то вроде ComboVox (сочитание всплывающего списка и поля для ввода текста). Или двухпанельный переключатель (левая и правая понель со списком, где в каждом списке можно выбрать элемент). Ну и так далее.
  • Вы можете переопределить метод элемента EditText, отвечающий за отрисовку элемента на экране.
  • Вы можете ловить событи, например нажатие на клавишу, и обрабатывать их в своё методе.
Далее будет объяснено, как создавать собственные элементы и использовать их в вашем приложении.

Основной подход

Вот краткий обзор того, что вам нужно знать, чтобы начать работу в создании собственных элементов:
  1. Расширить существующий класс или подкласс вашим классом.
  2. Переопределить некоторые методы суперкласса. МЕтоды для переопределения начинаются с 'on'. Например, OnDraw (), onMeasure (), и OnKeyDown (). Это похоже на событи в Activity  или ListActivity, которые вы переопределяете для жизненного цикла и других функциональных моментов.
  3. Испольуйте ваш новый расширенный класс.  После завершения ваш новый расширенный класс может использоваться вместо View, на котором он основан.
Совет: расширенные классы могут быть определены как внутренние классы внутри активити, которая их использует. Это полезно, так как активити управляет доступом к ним, но не является необходимой (возможно вы хотите создать новый View для более широкого использования в вашем приложении).

Полностью настроенный элемент

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

  1. Создать новый супер элемент, расширив класс View.
  2. Вы можете объявить конструктор, который будет принимать атрибуты и параметры из  XML, также вы можете использовать собственные атрибуты и параметры.
  3. Возможно вы хотите создать свои собственные обработчики событий, свойства доступа и модификаторы, а также более сложное поведение для нового класса.
  4. Вы почти наверняка хотите переопределить метод onMeasure () и, вероятно, также вам необходимо переопределить метод OnDraw (), если хотите, чтобы элемент что-то показывал. В то время как по умолчанию OnDraw () ничего не делает, а  onMeasure установлен размер 100х100, который вероятно не является таким, каким вы хотите.  Другие методы тоже необходимо переопределить в соответствии с требованиями.

Расширение методов onDraw() и onMeasure()

Метод onDraw()  предоставляет вам холст (Canvas), на котором можно реализовать всё, что угодно: 2D-графику,  другие стандартные или пользовательские элементы, стилизованный текст, или что-нибудь ещё, что придёт вам в голову.
Примечание: это не относится к 3D-графике. Если вы хотите использовать 3D-графику, необходимо расширить SurfaceView вместо View, и сделать это в отдельном потоке.
С onMeasure () немного сложнее. onMeasure является важной частью договора рендеринга между компонентом и его контейнером. onMeasure () должен быть изменен, чтобы эффективно и точно сообщить результаты измерения содержащихся в нем частей. Это составляет небольшие сложности в виде требований границ от родителя (которые передаются методу onMeasure()) и требований вызвать метод  setMeasuredDimension с измеренной высотой и шириной, как только они были рассчитаны. Если вам неудастся вызвать этот метод в переопределённом   onMeasure(), будет выброшено исключение во время измерения.
На высоком уровне, реализации onMeasure () выглядит примерно так:
  1. Вызывается переопределённый метод onMeasure с параметрами измерения ширины и высоты (widthMeasureSpec и heightMeasureSpec параметры, оба целые коды, представляющие размеры), которые   должны рассматриваться как требования к ограничениям на ширину и высоту, которые вы должны предоставить.
  2. Метод onMeasure() вашего компонента должен рассчитывать ширину и высоту,  в которую необходимо преобразовать ваш компонент. Следует не выходить за рамки параметров,  хотя можно расширить их (в данном случае, родитель может выбрать, что делать, включая отсечения, прокрутку, выбрасывание исключений, или попросить метод onMeasure () повторить попытку, возможно, с различными параметрами в качестве размеров).
  3. После того, получили ширину и высоту, необходимо вызвать метод setMeasuredDimension(int width, int height), передав в параметрах полученную ширину и высоту. Если этого не сделать, произойдёт выброс исключительной ситуации.

Составные элементы управления

Если вы не хотите полностью с нуля создавать новый компонент,  а взамен тому ищите возможность совместить повторно используемый элемент, содержащий группу существующих элементов управления, тогда создайте Compound Component (составной элемент), который будет отвечать всем этим требованиям. В двух словах, этот элемент объединяет несолько более атомных элементов в логическую группу элементов, которые можно использовать как один элемент. Например,  ComboBox можно рассматривать как сочетание в одной строке EditText и прилегающей кнопки с прикрепленным PopupList. Если нажать на кнопку и выберите что-то из списка, заполняется поле EditText, но пользователь может также  ввести что-то сам непосредственно в EditText если он этого захочет. 
В андроид есть два других элемента, с помощью которых легко сделать тоже самое: Spinner и AutoCompleteTextView, но несмотря на это, концепция Combo Box делает пример простым для понимания.

Для создания составного компонента необходимо:
  1. Начать нужно с создания класса расширяющего Layout.  Возможно, что в случае поля со списком, мы можем использовать LinearLayout с горизонтальной ориентацией. Помните, что другие макеты могут быть вложены, поэтому наш составной компонент может быть сколь угодно сложным и структурированным. Обратите внимание, что так же, как с помощью Activity, вы можете использовать любое  подход к созданию составного компоненты, описание с помощью XML или вы можете вкладывать элементы программно из вашего кода.
  2. В конструктор нового класса передать параметры, которые ожидает суперкласс в первую очередь. Затем вы можете настроить другие элементы, используемые внутри вашего нового компонента. Это то место, когда надо было бы создать EditText и PopupList. Обратите внимание, что вы также можете ввести свои собственные атрибуты и параметры в XML, который может быть выдвинут и используемой конструкторе.
  3. Вы также можете создать слушателей для событий, что ваши "внутренние" элементы могут генерировать, 
  4. Вы также можете создавать свои собственные свойства  методов доступа и модификаторов, например, позволяют значению EditText быть установлены изначально в компоненте и запроса для его содержания по мере необходимости.
  5. В случае расширения Layout вам не нужно переопределить OnDraw () и onMeasure () методы, так как макет будет иметь поведение по умолчанию, что, скорее всего, работать просто отлично. Тем не менее, вы все равно можете переопределить их, если вам нужно.
  6. Вы можете переопределить другие методы 'on'.
Подводя итог, использование макета в качестве основы для создания пользовательского элемента управления имеет ряд преимуществ, в том числе: 
  • Вы можете описать макет, используя описательный XML файл так же, как для экрана деятельности, или вы можете создавать представления программно и вкладывать их в макет из кода.
  • OnDraw () и onMeasure () методы (плюс большинство других 'on' ... методов), скорее всего, иметь соответствующую поведение таким образом, вы не должны переопределить их.
  • В конце концов, вы можете очень быстро построить сколь угодно сложные составные элементы и повторно использовать их как если бы они были одним компонентом.

пятница, 8 ноября 2013 г.

Стиль. Иконки


Иконка - графический элемент, который занимает небольшую часть экрана и даёт пользователю интуитивное представление о назначении приложения.
При создании иконки для Вашего приложения, важно иметь ввиду, что приложение может быть установлено на различные устройства. А, как известно, устройства Андроид имеют широкий спектр плотностей и большое различие в размерах экранов. Но Вы можете сделать так, что Ваши иконки будут отлично смотреться на всех устройствах, предоставляя каждому устройству иконки в нескольких размерах. Когда приложение будет запущено, Андроид проверит характеристики экрана устройства и загрузит в приложение иконку с соответствующей плотностью.
Поэтому, Вы должны поставлять иконку в нескольки размерах, для поддержания различных плотностей экрана. Ниже приведены рекомендации, относящиеся к иконке в единицах измерения DP, основанные на пикселях средней плотности (MDPI) экрана.
Таким образом, чтобы создать иконку для различных плотностей, необходимо использовать следующие коэффициенты масштабирования 2:3:4:6:8, где каждый соответствует одной из пяти основных плотностей (средней, высокой, х-высокой, хх-высокой, ххх-высокой соответственно).  Например, считают, что размер иконки-запуска-приолжения должен быть равен 48х48 DP. Это означает, что исходный размер иконки для плотности MDPI должен быть 48х48, для более высокой плотности HDPI размер увеличивается в полтора раза 1.5x и равен 72х72, для XHDPI 2x и равен 96х96 и так далее.
Также существуют устройства Андроид и с низкой плотностью экрана LDPI, но Вам не придётся создавать отдельную иконку для этой плотности экрана, так Андроид эффективно масштабирует вниз от  HDPI деля на 2, в соответствии с ожидаемым размером.

 Иконка-запуска-приложения
Иконка-запуска-приложения является визуальным представлением вашего приложения на домашнем экране или в меню всех приложений, установленных на устройство. Так как пользователь может менять обои на главном экране, убедитесь, что Ваша иконка отлично смотрится на любом фоне.
Размер иконки-запуска-приложения на мобильном устройстве должен быть равен 48х48.
Размер иконки-запуска-приложения на Google Play должен быть 512х512 пикселей.
Используйте различные силуэты. Трёхмерные, вид спереди, как будто смотришь на иконку сверху - это даст ощущение некоторой силы.


Панель управления
Иконки панели управления являются графическими кнопками, предоставляющие наиболее важные действия, которые могут сделать пользователи в пределах Вашего приложения. Каждая иконка должна быть выполнена в виде простой аналогии, представляющей единую концепцию, что большинство людей сможет понять с первого взгляда. Здесь Вы можете загрузить иконки для Action Bar
Размер иконок панели упраления должен быть  32х32. 
Полная площадь 32 DP, оптическая - 24 DP. 
Стиль: пиктографика, плоская, не слишком подробная, с плавными изгибами или острыми формами. Толщина штрихов и пустого пространства не меньше 2 dp. Если иконка слишком узкая, то поверните её на 45 градусов. 
Цвет:                                           
Colors: #333333                                   
Enabled: 60% opacity
Disabled: 30 % opacity
или
Colors: #FFFFFF                                   
Enabled: 80% opacity
Disabled: 30 % opacity







вторник, 1 октября 2013 г.

Стиль. Цвет

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

Палитра

Синий является основным цветом в палитне ОС Андроид. Для каждого цвета существует более тёмный, который может использоваться в качестве дополнения. Вы можете скачать образцы.


понедельник, 30 сентября 2013 г.

Стиль. Шрифтовое оформление

Загрузить Roboto
Андроид использует традиционные инструменты шрифтового оформления: масштаб, интервал, размер и выравнивание по основной сетке. Правильное использование этих инструментов необходимо, чтобы помочь пользователям быстро понять информацию на экране. Для поддержки использования шрифтового оформления, в версии Андроида Ice Cream Sandwich введено  новое семейство шрифтов под названием Roboto, созданное в соответствии с требованиями пользовательского интерфейса (UI) и экранов с высоким разрешением.
Существующий TextView предлагает Roboto в тонком, лёгком, нормальном и жирном шрифте вместе с курсивным стилем для каждого шрифта.Также TextView предлагает шрифт Roboto Condensed в нормальном и жирном весе и курсив для каждого веса.
Маленькая методичка по Roboto

Типы цветов по умолчанию

Андроид UI использует следующие стили цветов по умолчанию: textColorPrimary и textColorSecondary. Для лёгких тем используется textColorPrimaryInverse и textColorSecondaryInverse. Стиль цвета текста также поддерживает варианты для состояний, когда пользователь прикасается к элементам. 


Масштаб шрифта

Различие в масштабах шрифта может пройти длинный путь для создания упорядоченных, понятных макетов.  Однако, слишком много различных шрифтов в одном интерфейсе может смотреться неаккуратно. Андроид использует следующий, ограниченный набор размеров шрифтов:
Пользователи могут выбрать общесистемный коэффициент масштабирования текста в настройках приложения. В целях поддержки таких пользователей с ограниченными возможностями, масштаб шрифта должен быть указан в независимых пикселях scale-independent pixels (sp) там, где это возможно. Макеты, поддерживающие масштабируемые шрифты должны быть проверены  на эти параметры.

Стиль. Метрика

Устройства различаются не только физическими размерами, но и плотностью их экранов (DPI). Для упрощения проектирования приложений под экраны с различными характеристиками, необходимо разделить все устройства на несколько категорий. У каждой категории будут свои характеристики:
  • Размер экрана телефона (меньше 600DP) и планшета (больше или равно 600DP)
  • Плотность экрана LDPI, MDPI, HDPI, XHDPI и XXHDPI.
Оптимизировать проектирование приложений можно, разработав альтернативные макеты для различных размерностей экранов и предусмотреть альтернативные растровые изображения для экранов с различной плотностью. Это очень важно, чтобы ваше приложение на всех экранах смотрелось органично.
Плотность экрана не зависит от его размера, а размер от плотности. Чтобы узать больше смотрите Размеры и плотность экранов.

В ритме 48dp
Область прикосновения элементов пользовательского интерфейса, как правило, равна 48dp. 

Почему 48dp?
Если перевести на физический размер, то 48dp это примерно 9 мм (значение немного варьируется). Это значение находится в области комфорта (7-10 мм) для сенсорных элементов, и пользователь сможет  управлять ими с помощью пальцев. 
Если элементы вашего интерфейса будут 48dp в высоту и ширину, то вы сможете гарантировать, что:
  • независимо от экрана, ваши элементы не будут никогда меньше минимально-рекомендуемого размера  7 мм.
  • вы получите хороший компромисс между общей информационной плотностью с одной стороны и целевой способностью элементов пользовательского интерфейса с другой стороны.
Следите за пробелами
Расстояние между элементами - 8 миллиметров.

Пример




четверг, 26 сентября 2013 г.

Стиль. Обратная связь прикосновений

Использование цвета и освещения элемента в качестве реакции на прикосновения усилит осознание, что прикосновение принесло результат, а также даст понять, какие действия включаются/выключаются в этот момент. 
Каждый раз, когда пользователь прикасается к активным частям вашего приложения, обеспечьте визуальный ответ. Это позволит пользователю узнать, какой предмет был тронут и то, что ваше приложение "прослушивает" данное действие.
Состояния
  1. В нормальном состоянии: неизменное состояние
  2. В нажатом состоянии: подсвечивающее цветом
  3. Сфокусировано: закрашено на 50%, рамочка 2DP
  4. Нельзя выбрать: закрашено на 30% от нормального состояния
  5. Нельзя выбрать и сфокусировано: закрашено на 30% от состояния фокусирования

Большинство элементов пользовательского интерфейса Андроид имеют встроенную обратную связь на сенсорные прикосновения.

Средство общения

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





Границы

Когда, при прокручивании, пользователь пытается уехать за верхнюю или нижнюю границы экрана, покажите это с помощью визуальной подсказки. Например, если пользователь пытается "уехать" за пределы первой панели домашнего экрана, содержимое экрана наклоняется вправо чтобы указать, что дальнейшая прокрутка в этом направлении невозможна. Многие из прокручиваемых элементов системы Андроид (например ListView),  уже имеют встроенную визуализацию границ. Если вы создаёте свой прокручиваемый элемент, не забудьте визуализировать границу элемента.

среда, 25 сентября 2013 г.

Стиль. Темы.

Темы - это некоторый механизм в системе Андроид, отвечающий за стиль приложения или активити (Activity). Стиль определяет визуальные характеристики элементов пользовательского интерфейса, такие как цвет, высота, отступы, размер шрифта. В целях обеспечения слаженной работы всех приложений платформы, Андроид предоставляет три темы, которые можно выбрать при создании приложения для версии Андроида  Ice Cream Sandwich:
  1. Holo Light (светлый)
  2. Holo Dark (тёмный)
  3. Holo Light with dark action bars (светлый с тёмной панелью управления)
Выбирая эти темы, вы пройдёте долгий путь, помогая создавать приложения, которые соответствуют правилам общего визуального языка системы Андроид.

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

Для получения информации, как использовать системные темы и создавать собственные темы см. Стили и Темы в руководстве по API.